├── README.md ├── client ├── .gitignore ├── App.js ├── Main.js ├── app.json ├── assets │ ├── adaptive-icon.png │ ├── favicon.png │ ├── icon.png │ └── splash.png ├── babel.config.js ├── components │ ├── Banner │ │ └── Banner.js │ ├── Form │ │ ├── InputBox.js │ │ └── OrderItem.js │ ├── Layout │ │ ├── Footer.js │ │ ├── Header.js │ │ └── Layout.js │ ├── Products │ │ ├── Products.js │ │ └── ProductsCard.js │ ├── cart │ │ ├── CartItem.js │ │ └── PriceTable.js │ └── category │ │ └── Categories.js ├── data │ ├── BannerData.js │ ├── CartData.js │ ├── CategoriesData.js │ ├── OrderData.js │ ├── ProductsData.js │ └── userData.js ├── hooks │ └── customeHook.js ├── package-lock.json ├── package.json ├── redux │ ├── features │ │ └── auth │ │ │ ├── userActions.js │ │ │ └── userReducer.js │ └── store.js └── screens │ ├── About.js │ ├── Account │ ├── Account.js │ ├── MyOrders.js │ ├── Notifications.js │ └── Profile.js │ ├── Admin │ └── Dashboard.js │ ├── Cart.js │ ├── Checkout.js │ ├── Home.js │ ├── Payments.js │ ├── ProductDetails.js │ └── auth │ ├── Login.js │ └── Register.js └── server ├── config └── db.js ├── controllers ├── categoryController.js ├── orderController.js ├── productController.js ├── testController.js └── userController.js ├── middlewares ├── authMiddleware.js └── multer.js ├── models ├── categoryModel.js ├── orderModel.js ├── productModel.js └── userModel.js ├── package-lock.json ├── package.json ├── routes ├── categoryRoutes.js ├── orderRoutes.js ├── productRoutes.js ├── testRoutes.js └── userRoutes.js ├── server.js └── utils └── features.js /README.md: -------------------------------------------------------------------------------- 1 | # React Native Ecommerce App | Full Stack Project With MERN STACK 2 | React Native Ecommerce APP | Full Stack Project (React Native/ Node Express JS / Mongodb Database/ REDUX TOOL KIT /Payment Gateway/ Social Logins / Image Uploads etc) 3 | 4 | 5 | # Project Playlist 6 | https://www.youtube.com/playlist?list=PLuHGmgpyHfRzZy2xPF2Vn68sprpaZmCTV 7 | 8 | # please like comment and subscribe Techinfoyt Youtube Channel 9 | -------------------------------------------------------------------------------- /client/.gitignore: -------------------------------------------------------------------------------- 1 | # Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files 2 | 3 | # dependencies 4 | node_modules/ 5 | 6 | # Expo 7 | .expo/ 8 | dist/ 9 | web-build/ 10 | 11 | # Native 12 | *.orig.* 13 | *.jks 14 | *.p8 15 | *.p12 16 | *.key 17 | *.mobileprovision 18 | 19 | # Metro 20 | .metro-health-check* 21 | 22 | # debug 23 | npm-debug.* 24 | yarn-debug.* 25 | yarn-error.* 26 | 27 | # macOS 28 | .DS_Store 29 | *.pem 30 | 31 | # local env files 32 | .env*.local 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | -------------------------------------------------------------------------------- /client/App.js: -------------------------------------------------------------------------------- 1 | import { Provider } from "react-redux"; 2 | 3 | import store from "./redux/store"; 4 | import Main from "./Main"; 5 | 6 | export default function App() { 7 | return ( 8 | 9 |
10 | 11 | ); 12 | } 13 | -------------------------------------------------------------------------------- /client/Main.js: -------------------------------------------------------------------------------- 1 | import { StatusBar } from "expo-status-bar"; 2 | import { StyleSheet, Text, View } from "react-native"; 3 | import { NavigationContainer } from "@react-navigation/native"; 4 | import { createNativeStackNavigator } from "@react-navigation/native-stack"; 5 | 6 | import Home from "./screens/Home"; 7 | import About from "./screens/About"; 8 | import ProductDetails from "./screens/ProductDetails"; 9 | import Cart from "./screens/Cart"; 10 | import Checkout from "./screens/Checkout"; 11 | import Payments from "./screens/Payments"; 12 | import Login from "./screens/auth/Login"; 13 | import Register from "./screens/auth/Register"; 14 | import Account from "./screens/Account/Account"; 15 | import Notifications from "./screens/Account/Notifications"; 16 | import Profile from "./screens/Account/Profile"; 17 | import MyOrders from "./screens/Account/MyOrders"; 18 | import Dashboard from "./screens/Admin/Dashboard"; 19 | 20 | import { useSelector, useDispatch } from "react-redux"; 21 | import { useEffect, useState } from "react"; 22 | import AsyncStorage from "@react-native-async-storage/async-storage"; 23 | 24 | //routes 25 | const Stack = createNativeStackNavigator(); 26 | 27 | export default function Main() { 28 | const [isAuth, setIsAuth] = useState(null); 29 | // get user 30 | useEffect(() => { 31 | const getUserLocalData = async () => { 32 | let data = await AsyncStorage.getItem("@auth"); 33 | setIsAuth(data); 34 | // let loginData = JSON.parse(data); 35 | console.log("user login data ==>", data); 36 | }; 37 | getUserLocalData(); 38 | }, []); 39 | return ( 40 | <> 41 | 42 | 43 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | {!isAuth && ( 62 | <> 63 | 68 | 73 | 74 | )} 75 | 76 | 77 | 78 | ); 79 | } 80 | -------------------------------------------------------------------------------- /client/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "expo": { 3 | "name": "client", 4 | "slug": "client", 5 | "version": "1.0.0", 6 | "orientation": "portrait", 7 | "icon": "./assets/icon.png", 8 | "userInterfaceStyle": "light", 9 | "splash": { 10 | "image": "./assets/splash.png", 11 | "resizeMode": "contain", 12 | "backgroundColor": "#ffffff" 13 | }, 14 | "assetBundlePatterns": [ 15 | "**/*" 16 | ], 17 | "ios": { 18 | "supportsTablet": true 19 | }, 20 | "android": { 21 | "adaptiveIcon": { 22 | "foregroundImage": "./assets/adaptive-icon.png", 23 | "backgroundColor": "#ffffff" 24 | } 25 | }, 26 | "web": { 27 | "favicon": "./assets/favicon.png" 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /client/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techinfo-youtube/react-native-ecommerce-mern-stack-project/dd64291cbd42a44d3e7b6dc5599f5f8490ea4412/client/assets/adaptive-icon.png -------------------------------------------------------------------------------- /client/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techinfo-youtube/react-native-ecommerce-mern-stack-project/dd64291cbd42a44d3e7b6dc5599f5f8490ea4412/client/assets/favicon.png -------------------------------------------------------------------------------- /client/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techinfo-youtube/react-native-ecommerce-mern-stack-project/dd64291cbd42a44d3e7b6dc5599f5f8490ea4412/client/assets/icon.png -------------------------------------------------------------------------------- /client/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/techinfo-youtube/react-native-ecommerce-mern-stack-project/dd64291cbd42a44d3e7b6dc5599f5f8490ea4412/client/assets/splash.png -------------------------------------------------------------------------------- /client/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /client/components/Banner/Banner.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { 3 | StyleSheet, 4 | View, 5 | Text, 6 | Image, 7 | Dimensions, 8 | Pressable, 9 | } from "react-native"; 10 | import Carousel, { PaginationLight } from "react-native-x-carousel"; 11 | import { BannerData } from "../../data/BannerData"; 12 | 13 | const { width } = Dimensions.get("window"); 14 | const Banner = () => { 15 | const renderItem = (data) => ( 16 | 17 | alert(data._id)}> 18 | 19 | 20 | 26 | {data.cornerLabelText} 27 | 28 | 29 | 30 | 31 | ); 32 | 33 | return ( 34 | 35 | 42 | 43 | ); 44 | }; 45 | const styles = StyleSheet.create({ 46 | container: { 47 | backgroundColor: "#fff", 48 | alignItems: "center", 49 | justifyContent: "center", 50 | }, 51 | cardContainer: { 52 | alignItems: "center", 53 | justifyContent: "center", 54 | width, 55 | }, 56 | cardWrapper: { 57 | // borderRadius: 8, 58 | overflow: "hidden", 59 | }, 60 | card: { 61 | width: width * 1, 62 | height: width * 0.4, 63 | }, 64 | cornerLabel: { 65 | position: "absolute", 66 | bottom: 0, 67 | right: 0, 68 | borderTopLeftRadius: 8, 69 | }, 70 | cornerLabelText: { 71 | fontSize: 12, 72 | color: "#fff", 73 | fontWeight: "600", 74 | paddingLeft: 5, 75 | paddingRight: 5, 76 | paddingTop: 2, 77 | paddingBottom: 2, 78 | }, 79 | }); 80 | export default Banner; 81 | -------------------------------------------------------------------------------- /client/components/Form/InputBox.js: -------------------------------------------------------------------------------- 1 | import { View, Text, TextInput, StyleSheet } from "react-native"; 2 | import React from "react"; 3 | 4 | const InputBox = ({ 5 | value, 6 | setValue, 7 | autoComplete, 8 | placeholder, 9 | secureTextEntry, 10 | }) => { 11 | return ( 12 | 13 | setValue(text)} 21 | /> 22 | 23 | ); 24 | }; 25 | const styles = StyleSheet.create({ 26 | container: { 27 | justifyContent: "center", 28 | alignItems: "center", 29 | marginVertical: 10, 30 | }, 31 | input: { 32 | width: "80%", 33 | backgroundColor: "#ffffff", 34 | height: 40, 35 | paddingLeft: 10, 36 | borderRadius: 10, 37 | color: "#000000", 38 | borderWidth: 1, 39 | borderColor: "gray", 40 | }, 41 | }); 42 | export default InputBox; 43 | -------------------------------------------------------------------------------- /client/components/Form/OrderItem.js: -------------------------------------------------------------------------------- 1 | import { View, Text, StyleSheet } from "react-native"; 2 | import React from "react"; 3 | 4 | const OrderItem = ({ order }) => { 5 | return ( 6 | 7 | 8 | Order ID : {order._id} 9 | Date : {order.date} 10 | 11 | Product name : {order.productInfo.name} 12 | Price : {order.productInfo.price} 13 | Quantity : {order.productInfo.qty} 14 | Total AMount : {order.totalAmount} $ 15 | Order Status : {order.status} 16 | 17 | ); 18 | }; 19 | const styles = StyleSheet.create({ 20 | container: { 21 | backgroundColor: "#ffffff", 22 | margin: 10, 23 | padding: 10, 24 | borderRadius: 10, 25 | }, 26 | orderinfo: { 27 | flexDirection: "row", 28 | justifyContent: "space-between", 29 | borderBottomWidth: 1, 30 | borderColor: "lightgray", 31 | paddingBottom: 5, 32 | }, 33 | status: { 34 | borderTopWidth: 1, 35 | fontWeight: "bold", 36 | borderColor: "lightgray", 37 | padding: 5, 38 | }, 39 | }); 40 | export default OrderItem; 41 | -------------------------------------------------------------------------------- /client/components/Layout/Footer.js: -------------------------------------------------------------------------------- 1 | import { View, Text, TouchableOpacity, StyleSheet } from "react-native"; 2 | import React from "react"; 3 | import AntDesign from "react-native-vector-icons/AntDesign"; 4 | import { useRoute, useNavigation } from "@react-navigation/native"; 5 | import { useReduxStateHook } from "../../hooks/customeHook"; 6 | import { useDispatch } from "react-redux"; 7 | import { logout } from "../../redux/features/auth/userActions"; 8 | import AsyncStorage from "@react-native-async-storage/async-storage"; 9 | 10 | const Footer = () => { 11 | const route = useRoute(); 12 | const navigation = useNavigation(); 13 | const dispatch = useDispatch(); 14 | 15 | const loading = useReduxStateHook(navigation, "login"); 16 | return ( 17 | 18 | navigation.navigate("home")} 21 | > 22 | 26 | 27 | Home 28 | 29 | 30 | navigation.navigate("notifications")} 33 | > 34 | 38 | 44 | notification 45 | 46 | 47 | navigation.navigate("account")} 50 | > 51 | 55 | 58 | Account 59 | 60 | 61 | navigation.navigate("cart")} 64 | > 65 | 69 | 70 | Cart 71 | 72 | 73 | { 76 | dispatch(logout()); 77 | await AsyncStorage.removeItem("@auth"); 78 | }} 79 | > 80 | 81 | Logout 82 | 83 | 84 | ); 85 | }; 86 | 87 | const styles = StyleSheet.create({ 88 | container: { 89 | flexDirection: "row", 90 | justifyContent: "space-between", 91 | paddingHorizontal: 10, 92 | }, 93 | menuContainer: { 94 | alignItems: "center", 95 | justifyContent: "center", 96 | }, 97 | icon: { 98 | fontSize: 25, 99 | color: "#000000", 100 | }, 101 | iconText: { 102 | color: "#000000", 103 | fontSize: 10, 104 | }, 105 | active: { 106 | color: "blue", 107 | }, 108 | }); 109 | export default Footer; 110 | -------------------------------------------------------------------------------- /client/components/Layout/Header.js: -------------------------------------------------------------------------------- 1 | import { 2 | View, 3 | Text, 4 | StyleSheet, 5 | TextInput, 6 | TouchableOpacity, 7 | } from "react-native"; 8 | import React, { useState } from "react"; 9 | import FontAwesome from "react-native-vector-icons/FontAwesome"; 10 | const Header = () => { 11 | const [searchText, setSearchText] = useState(""); 12 | //funciotn for search 13 | const handleSearch = () => { 14 | console.log(searchText); 15 | setSearchText(""); 16 | }; 17 | return ( 18 | 24 | 25 | setSearchText(text)} 29 | /> 30 | 31 | 32 | 33 | 34 | 35 | ); 36 | }; 37 | 38 | const styles = StyleSheet.create({ 39 | container: { 40 | display: "flex", 41 | flex: 1, 42 | flexDirection: "row", 43 | alignItems: "center", 44 | paddingHorizontal: 15, 45 | }, 46 | inputBox: { 47 | borderWidth: 0.3, 48 | width: "100%", 49 | position: "absolute", 50 | left: 15, 51 | height: 40, 52 | color: "#000000", 53 | backgroundColor: "#ffffff", 54 | paddingLeft: 10, 55 | fontSize: 16, 56 | borderRadius: 5, 57 | }, 58 | searchBtn: { 59 | position: "absolute", 60 | left: "95%", 61 | }, 62 | icon: { 63 | color: "#000000", 64 | fontSize: 18, 65 | }, 66 | }); 67 | 68 | export default Header; 69 | -------------------------------------------------------------------------------- /client/components/Layout/Layout.js: -------------------------------------------------------------------------------- 1 | import { View, Text, StatusBar, StyleSheet } from "react-native"; 2 | import React from "react"; 3 | import Header from "./Header"; 4 | import Footer from "./Footer"; 5 | 6 | const Layout = ({ children }) => { 7 | return ( 8 | <> 9 | 10 | {children} 11 | 12 |