Full-Stack E-Commerce Mobile App: React Native & Node.Js

Master mobile e-commerce with React Native, Node.js, user authentication, and admin panel.

What you'll learn

Construct a full-stack e-commerce mobile application using the powerful combination of React Native (frontend) and Node.js with Express & MongoDB (backend).

Implement robust and secure user authentication flows, covering user registration, login, and advanced role-based access control for admin functionalities.

Develop comprehensive administrative tools to efficiently manage products, including creation, detailed editing, and deletion capabilities.

Acquire essential debugging and problem-solving skills critical for real-world React Native and Node.js development.

Gain practical experience in API development and consumption, understanding the seamless data flow between a mobile client and a backend server.

Requirements

This course is designed for aspiring mobile and full-stack developers who are eager to build real-world applications. To get the most out of this course, a foundational understanding of JavaScript (ES6+) is highly recommended.

Familiarity with the following concepts will also be beneficial, though we'll reinforce them throughout the course: Basic React Concepts: Understanding components, props, and state in React will provide a solid base for React Native. HTTP Methods (GET, POST, etc.): A general idea of how web requests work will help in understanding API interactions

Don't worry if you're not an expert in all these areas! This course is built to guide you step-by-step through the process, providing clear explanations and hands-on guidance for every part of building our e-commerce application. A willingness to learn and a passion for building are your most important assets!

Description

Unlock the power of full-stack mobile development by building a complete, modern e-commerce application from the ground up! In this hands-on course, you'll master the essential technologies that drive today's top mobile experiences: React Native for a dynamic frontend, coupled with a robust Node.js, Express.js, and MongoDB backend. This isn't just about learning concepts; it's about building a tangible, production-ready project that you can proudly add to your portfolio.We'll start by setting up your optimal development environment, ensuring you're equipped with Node.js, VS Code, and ready to launch your apps seamlessly using Expo Go.The course then dives deep into both the frontend and backend. On the React Native side, you'll design and implement a user-friendly mobile interface, focusing on creating responsive layouts that look great on any device. You'll build core e-commerce functionalities, including:A comprehensive product listing page with detailed product views.Secure user authentication, covering user registration, login, and protected routes.An efficient admin panel for full product management (create, read, update, delete).Seamless product image upload directly from your mobile device, integrating with your backend.On the backend with Node.js, Express.js, and MongoDB, you'll architect powerful RESTful APIs. You'll learn to:Design and manage your database schema for users, products, and more.Implement secure authentication and authorization logic, including token-based security and role-based access control for administrative features.Develop robust API endpoints for all CRUD operations on products and other resources.Handle file uploads securely, preparing your application for real-world scenarios.By the end of this course, you won't just understand the MERN stack; you'll have built a fully functional React Native e-commerce mobile application that demonstrates your ability to create secure, scalable, and user-friendly mobile solutions. This project-based approach ensures you gain practical, in-demand skills, preparing you for a career in full-stack mobile development or empowering you to launch your own mobile store. Join us to transform your coding aspirations into a tangible, impressive mobile application!

Overview

Section 1: Introduction

Lecture 1 Promotional Video & Course Preview

Lecture 2 Setting Up Development Environment & Essential Prerequisites

Section 2: Building and Securing the Backend API

Lecture 3 Setting Up Our Express Backend

Lecture 4 Install Mongoose and Implement Product Model

Lecture 5 Building Our Product API - Controllers Part 1

Lecture 6 Building Our Product API - Controllers Part 2

Lecture 7 Building Our Product API - Controllers Part 3

Lecture 8 Connecting Products to Our API - Product Routes

Lecture 9 Setting Up Our Database - MongoDB Atlas & Connection

Lecture 10 Building Our User Data Model

Lecture 11 Secure User Sessions with JWTs - Generating Our Authentication Token

Lecture 12 Managing Users Controller Authentication, Registration, and Profiles Part 1

Lecture 13 Managing Users Controller Authentication, Registration, and Profiles Part 2

Lecture 14 Managing Users Controller Authentication, Registration, and Profiles Part 3

Lecture 15 Connecting Users to Our API - User Routes

Lecture 16 Implementing Authentication Middleware - Protecting Our Routes

Lecture 17 Securing Our API - Applying Authentication and Admin Middleware

Lecture 18 Enhancing Our Backend - CORS, Cookie Parsing

Lecture 19 Seeding Our Database - Importing Sample Data

Lecture 20 Fix Bugs

Section 3: Creating UI Components and Handling State with Redux

Lecture 21 Install Expo App And Run It

Lecture 22 Expo App Setup - Root Layout And Tab Layout

Lecture 23 Start With Redux Toolkit - Base API Slice

Lecture 24 Redux Toolkit - Products API Slice And Store Configuration

Lecture 25 Build Our First React Native Component - Rating

Lecture 26 Message Component

Lecture 27 Building the Product Component Part 1

Lecture 28 Building the Product Component Part 2

Lecture 29 Crafting the Dynamic Header Component Part 1

Lecture 30 Crafting the Dynamic Header Component Part 2

Lecture 31 Crafting the Dynamic Header Component Part 3

Lecture 32 Implementing the Home Screen Part 1

Lecture 33 Implementing the Home Screen Part 2

Lecture 34 Implementing the Home Screen Style

Lecture 35 Building the Product Details Screen Part 1

Lecture 36 Building the Product Details Screen Part 2

Lecture 37 Building the Product Details Screen Part 3 - Image Card Component

Lecture 38 Building the Product Details Screen Part 4 - Product Details Card Component

Lecture 39 Building the Product Details Screen Part 5 - Image Card Component

Lecture 40 Building the Product Details Screen Part 6 - Image Card Component Styles

Section 4: Advanced Features: Cart, Authentication, Reviews, and Checkout

Lecture 41 Advanced Cart Management - Redux Slice with AsyncStorage Persistence Part 1

Lecture 42 Advanced Cart Management - Redux Slice with AsyncStorage Persistence Part 2

Lecture 43 Integrating Cart Functionality into Header and Product Details

Lecture 44 Building the Cart Screen Part 1

Lecture 45 Building the Shopping Cart Screen Part 2

Lecture 46 Building the Shopping Cart Screen Part 3

Lecture 47 Building the Shopping Cart Screen Part 4

Lecture 48 Setting Up User Authentication (Auth Slice and API Endpoints)

Lecture 49 Persisting Our Redux Store - Integrating Redux-Persist for Auth and Cart

Lecture 50 Implementing the User Login Screen Part 1

Lecture 51 Implementing the User Login Screen And Form Container Component Part 2

Lecture 52 Implementing the User Login Screen Part 3

Lecture 53 Implementing the User Login Screen Part 4

Lecture 54 Implementing the User Login Screen Part 5

Lecture 55 Centralized Error Handling Middleware

Lecture 56 Building the User Registration Screen Part 1

Lecture 57 Building the User Registration Screen Part 2

Lecture 58 Integrating Product Reviews Section Part 1

Lecture 59 Integrating Product Reviews Section Part 2

Lecture 60 Implementing the Add Review Modal and Functionality Part 1

Lecture 61 Implementing the Add Review Modal and Functionality Part 2

Lecture 62 Implementing the Add Review Modal and Functionality Part 3

Lecture 63 Implementing the Shipping Screen Part 1

Lecture 64 Implementing the Shipping Screen Part 2

Lecture 65 Implementing the Shipping Screen Part 3

Lecture 66 Selecting the Payment Method Screen Part 1

Lecture 67 Selecting the Payment Method Part 2

Section 5: Backend Order Management and PayPal Integration

Lecture 68 Designing the Order Model (Mongoose Schema)

Lecture 69 Order API Controllers & Price Calculation Utilities Part 1

Lecture 70 Order API Controllers Part 2

Lecture 71 Order API Controller Part 3

Lecture 72 Order API Routes

Lecture 73 PayPal Client Configuration

Lecture 74 PayPal API Routes and Integration Part 1

Lecture 75 PayPal API Routes and Integration Part 2

Section 6: Frontend Orders, Payments, and User Account Screens

Lecture 76 Implementing Order API Slice with PayPal Integration

Lecture 77 Building the Place Order Screen Part 1

Lecture 78 Building the Place Order Screen Part 2

Lecture 79 Building the Place Order Screen Part 3

Lecture 80 Building the Place Order Screen Part 4

Lecture 81 Implementing the Order Screen and PayPal Integration Part 1

Lecture 82 Implementing the Order Screen and PayPal Integration Part 2

Lecture 83 Implementing the Order Screen and PayPal Integration Part 3

Lecture 84 Fix Message displaying in Order Screen and Disabled Add To Cart Button

Lecture 85 Fix Fragment Error

Lecture 86 Building My Orders Screen Part 1

Lecture 87 Building the My Orders Screen Part 2

Lecture 88 Implementing The Profile Screen Part 1

Lecture 89 Implementing The Profile Screen Part 2

Lecture 90 Implementing The Profile Screen Part 3

Lecture 91 Implementing The Account Information Screen Part 1

Lecture 92 Implementing The Account Information Screen Part 2

Lecture 93 Implementing The Account Information Screen Part 3

Section 7: Admin Dashboard: Managing Orders, Users, Products & Image Uploads

Lecture 94 Implement Orders List Screen Part 1

Lecture 95 Implement Orders List Screen Part 2

Lecture 96 Implementing The User List Screen Part 1

Lecture 97 Implementing The User List Screen Part 2

Lecture 98 Implementing The User List Screen Part 3

Lecture 99 Implementing User Details Screen Part 1

Lecture 100 Implementing User Details Screen Part 2

Lecture 101 Implementing User Details Screen Part 3

Lecture 102 Backend - Image Uploads Route with Multer

Lecture 103 Implementing The Product List Screen Part 1

Lecture 104 Implementing The Product List Screen Part 2

Lecture 105 Implementing The Product List Screen Part 3

Lecture 106 Implementing The Product Edit Screen Part 1

Lecture 107 Implementing The Product Edit Screen Part 2

Lecture 108 Implementing The Product Edit Screen Part 3

Lecture 109 Implementing The Product Edit Screen Part 4

Section 8: Final Improvements, Navigation Refactor, and Course Wrap-Up

Lecture 110 Replacing React Navigation with Expo Router in Our App

Lecture 111 Layout Screens Fix And Add Loaders in Product List Screen

Lecture 112 Outro & Resolving Expo SDK Incompatibility Issues

Aspiring Mobile Developers; who want to build their first complete, real-world e-commerce application using React Native and a robust backend.,Beginner to Intermediate Developers; looking to significantly enhance their portfolio with a tangible, full-stack mobile project.,Frontend Developers, (with web experience) eager to transition their skills into the exciting world of mobile app development with React Native.,Backend Developers, interested in understanding how to connect their Node.js/Express APIs to a dynamic and interactive mobile frontend.,Entrepreneurs or Small Business Owners; who wish to gain the technical skills to build and manage their own mobile online store.