React Redux Ecommerce - Master Mern Stack Web Development

Build one of The Biggest Real World MERN Stack E-commerce Project using React Redux Node MongoDB and Ant Design

What you'll learn
Learn to build one of the biggest ecommerce app ever
Hundreds of tips and tricks to build full stack app
Gain the skill for building any type of app (not limited to ecommerce)
Master the art of building frontend app with react and redux
Master the art of building backend api with nodejs
Master the art of building lightning fast full stack / mern stack apps
Integrate firebase for handling authentication
Learn to perform simple to complex mongodb queries using mongoose
Learn ant design (the most popular react UI library)
Stunning layout with bootstrap material css
Complete authentication with social login
Password forgot/reset, confirmation email on signup etc
Integrate redux for global state management
Role based access control for users and admin
Advance CRUD (create read update delete) for products, categories and sub categories
Multiple Image Uploads with Client Side Resize
Pagination
Advance searching and filtering (9 different ways)
Star rating system
Add to cart
Discount coupon code
Credit card payment with stripe
Cash on delivery (no online payment required)
Order management system for admin
Admin dashboard to manage and run ecommerce platform
Add to wishlist
Code splitting
Deployment
Requirements
Good understanding of javascript
Previous experience of building apps using react and node
Description
Course HighlightsReact Client (Frontend)Firebase Authentication and ReduxNode MongoDB API (Backend)Firebase Auth Check (Server side)User Admin and Protected RoutesCategories CRUDSub Categories CRUDCreating Products with Categories and Sub Categories (Advance)Multiple Image Uploads with Client Side ResizeUpdate and Delete Products (Advance)Displaying Products Pagination and CarouselStar Rating SystemProducts based on Categories and Sub CategoriesAdvance Searching and Filtering (9 Different Ways)Add to CartCheckoutCouponPayment with StripeOrdersUser Dashboard (Purchase History)PDF/Invoice DownloadAdmin Dashboard (Order Management)WishlistCash On Delivery (Cashless order)Deployment to Digital Ocean CloudProject Overview Master MERN Stack Web Development building Ultimate E-commerce app with React Redux Ant Design Firebase NodeJs and MongoDB. This project will have almost all the features you want to add in any E-commerce app including:Login Registration SystemLogin with email/password and social login (Google)Admin dashboard and order management systemProducts CRUD with advance features including categories, sub-categories, multiple image uploads etcPlenty of advance searching and filtering optionsStar rating systemCart functionality with both backend/frontend implementationCheckout with stripe for credit card paymentsCheckout with cash on delivery (no online payment required)User dashboard with password update, purchase history, Invoice/PDF download etcDeployment to digital ocean cloudPlease go through the curriculum to get better understanding of the projectThis course project is probably the biggest and most exciting project you have build so far. It is packed with hundreds of tips and tricks that can help you build almost any type of full stack app (not limited to ecommerce).Master the art of building FullStack/MERN Stack apps by enrolling into this course and never look back. What you are now and what you will become after completing this course is going to be a ground breaking step in your web development career.You can build the biggest and most complex apps of your dream or as required at your job. Master the stack of all stacks and become the most productive and innovative developer of your team. I welcome you to be a part of this incredible journey.

Overview

Section 1: Introduction

Lecture 1 Live Demo - User and Cart

Lecture 2 Live Demo - Searching and Filtering

Lecture 3 Live Demo - Rating and Admin Dashboard

Lecture 4 Are You Ready for this Course?

Lecture 5 Live demo URL changed

Lecture 6 Building the App Visually

Lecture 7 Are you new to JavaScript React and NodeJs?

Lecture 8 IMPORTANT - Download Source Code Bundle for Each Lectures

Section 2: React Client (Frontend)

Lecture 9 Create React Project

Lecture 10 React router version

Lecture 11 Routes and Pages

Lecture 12 Ant Design Navigation

Lecture 13 Ant Design Icons

Lecture 14 React Router Link

Section 3: Firebase Authentication and Redux

Lecture 15 Firebase version 9 upgrade guide

Lecture 16 Firebase Setup

Lecture 17 Register Form

Lecture 18 Email Link to Signin

Lecture 19 ENV and Toast Notifications

Lecture 20 Complete Registration Page

Lecture 21 Complete Registration

Lecture 22 Setup Redux

Lecture 23 User in Redux State

Lecture 24 User Logout

Lecture 25 Login Page

Lecture 26 Signin with Email and Password

Lecture 27 Login with Google

Lecture 28 Conditional Rendering

Lecture 29 Forgot Password

Lecture 30 Redirect logged in user

Section 4: Node MongoDB API (Backend)

Lecture 31 Backend API with Node and MongoDB

Lecture 32 NPM Packages to install

Lecture 33 Mongoose version

Lecture 34 Mongo Atlas or Local Installation

Lecture 35 Server Setup

Lecture 36 Routes

Lecture 37 Routes Autoloading

Lecture 38 Controllers

Lecture 39 User Schema

Section 5: Firebase Auth Check (Server side)

Lecture 40 Firebase Admin

Lecture 41 Middleware

Lecture 42 Auth Check Middleware

Section 6: User Admin and Protected Routes

Lecture 43 Create or Update User

Lecture 44 API User Response

Lecture 45 Current User Endpoint

Lecture 46 Role Based Redirect

Lecture 47 Protected User Route

Lecture 48 Redirect Countdown

Lecture 49 Sidebar Nav for User

Lecture 50 Password Update

Lecture 51 Admin Check Middleware

Lecture 52 Admin Route

Lecture 53 Warnings and Cleanup

Lecture 54 What's Next?

Section 7: Categories CRUD

Lecture 55 Category Schema

Lecture 56 Category Routes

Lecture 57 Category Create

Lecture 58 Category List Read Update Delete

Lecture 59 Category CRUD Requests

Lecture 60 Dynamic Dashboard Link

Lecture 61 Admin Sidebar Nav

Lecture 62 Category Create and List

Lecture 63 Category Render and Delete

Lecture 64 Category Update

Lecture 65 What's Next?

Lecture 66 Code Refactor - Reusable Component

Lecture 67 Search Filter Categories

Lecture 68 Code Refactor - Search Filter

Section 8: Sub Categories CRUD

Lecture 69 Sub Categories CRUD

Lecture 70 Sub Categories Functions

Lecture 71 Sub Category Create

Lecture 72 Showing Sub Categories and Remove

Lecture 73 Sub Category Update

Lecture 74 What's Next?

Section 9: Creating Products with Categories and Sub Categories (Advance)

Lecture 75 Product Model

Lecture 76 Product Create Backend

Lecture 77 Create Product Page

Lecture 78 Product Create Form

Lecture 79 Create Product

Lecture 80 Alert and Reload after Product Create

Lecture 81 Product Create Error Message

Lecture 82 GET Endpoint - Products

Lecture 83 Code Refactor

Lecture 84 Create Product with Category

Lecture 85 Sub Categories Endpoint

Lecture 86 List Sub Categories Based on Parent Category

Lecture 87 Sub Categories Props

Lecture 88 Multi Select Ant Design

Lecture 89 Create Product with Sub Categories

Section 10: Multiple Image Uploads

Lecture 90 How Image Upload Will Work?

Lecture 91 Cloudinary Upload Endpoints

Lecture 92 File Upload Components

Lecture 93 File Resize in React

Lecture 94 Multiple Image Uploads

Lecture 95 Image Preview

Lecture 96 Product Create with Multiple Images

Section 11: Update and Delete Products (Advance)

Lecture 97 List All Products Endpoint

Lecture 98 Fetch All Products in Admin Dashboard

Lecture 99 Admin Products Card

Lecture 100 Code Organization

Lecture 101 Default Image Ant Icons and Product Description

Lecture 102 Product Delete Endpoint

Lecture 103 Delete A Product

Lecture 104 Product Update Page

Lecture 105 Product Slug from Router

Lecture 106 Get Product on Update Page

Lecture 107 Product Update Component

Lecture 108 Pre Populate Shipping Color and Brand

Lecture 109 Pre Populate Category

Lecture 110 Pre Populate Sub Categories

Lecture 111 Category and Sub Category Sync on Update

Lecture 112 Image Uploads in Product Update

Lecture 113 Product Update Endpoint

Lecture 114 Update A Product

Section 12: Displaying Products Pagination and Carousel

Lecture 115 Fetch Products in Home Page

Lecture 116 Product Card Component

Lecture 117 Using Ant Design Card

Lecture 118 Typewriter Effect

Lecture 119 Loading Card

Lecture 120 List Product with Sort Order and Limit

Lecture 121 New Arrivals

Lecture 122 Best Sellers

Lecture 123 Get Total Products Count

Lecture 124 List Products Endpoint with Pagination

Lecture 125 New Arrivals Pagination

Lecture 126 Best Sellers Pagination

Lecture 127 View Products Page

Lecture 128 Single Product Component

Lecture 129 Image Carousel

Lecture 130 Default Image

Lecture 131 Product List Items Component

Lecture 132 Tabs

Section 13: Star Rating System

Lecture 133 Star Rating System Backend

Lecture 134 React Star Rating

Lecture 135 Modal for Rating

Lecture 136 Login to Leave Rating

Lecture 137 Redirect to Intended Page

Lecture 138 API Request with Rating

Lecture 139 Show Users Existing Star Rating

Lecture 140 Show Average Rating

Lecture 141 Show Average Rating in Home Page

Lecture 142 Related Products Backend

Lecture 143 Show Related Products

Section 14: Products based on Categories and Sub Categories

Lecture 144 Categories List

Lecture 145 Category Home Page

Lecture 146 Category with Products Backend

Lecture 147 Category Page with Products

Lecture 148 Sub Categories with Products

Section 15: Advance Searching and Filtering (8 Different Ways)

Lecture 149 Introduction to Searching and Filtering

Lecture 150 Search Filter Backend

Lecture 151 Search Redux Setup

Lecture 152 Shop Page

Lecture 153 Search By Text

Lecture 154 Filter By Price Range Backend

Lecture 155 Filter By Price Range Frontend

Lecture 156 Filter By Categories Backend

Lecture 157 Filter By Categories Frontend

Lecture 158 Filter By Star Rating Backend

Lecture 159 Filter By Star Rating Frontend

Lecture 160 Filter By Sub Category Backend

Lecture 161 Filter By Sub Category Frontend

Lecture 162 Filter By Shipping Color and Brand Backend

Lecture 163 Filter By Brands Frontend

Lecture 164 Filter By Colors Frontend

Lecture 165 Filter By Shipping Frontend

Section 16: Add to Cart

Lecture 166 Introduction to Add To Cart

Lecture 167 Add Product to Local Storage

Lecture 168 Tooltip

Lecture 169 Cart in Redux State

Lecture 170 Dispatch Add To Cart

Lecture 171 Cart Page Setup

Lecture 172 Cart Page Order Summary

Lecture 173 Redirect Back to Cart Page After Login

Lecture 174 Cart Items in Table

Lecture 175 React Modal Image

Lecture 176 Pick A Color in Cart Page

Lecture 177 Quantity Update in Cart

Lecture 178 Remove Products From Cart

Lecture 179 Side Drawer Component

Lecture 180 Cart Items in Side Drawer

Section 17: Checkout

Lecture 181 Checkout Page Setup

Lecture 182 Save Cart Request

Lecture 183 Cart Model

Lecture 184 Save Cart To Database

Lecture 185 Get User Cart from Database

Lecture 186 Get User Cart in Frontend

Lecture 187 Final Order Summary in Checkout

Lecture 188 Empty Cart

Lecture 189 User Address on Checkout

Lecture 190 Save Address on Checkout

Section 18: Coupon

Lecture 191 Coupon Schema

Lecture 192 Coupon Routes and Controller Methods

Lecture 193 Create Coupon Page

Lecture 194 Create Coupon

Lecture 195 Coupon List and Delete

Lecture 196 Apply Coupon

Lecture 197 Apply Discount Backend

Lecture 198 Discount Price Response

Lecture 199 Coupon Error and Success Message

Lecture 200 Coupon in Redux

Section 19: Payment with Stripe

Lecture 201 Stripe Payment Integration - Official Docs

Lecture 202 Stripe Setup Backend

Lecture 203 Stripe Setup Frontend

Lecture 204 Get Help

Lecture 205 Stripe Payment Widget CSS

Lecture 206 Stripe Checkout Component Style Variable

Lecture 207 Stripe Checkout Component

Lecture 208 Successful Payment

Lecture 209 Charging Actual Cart Total

Lecture 210 Charge With Coupon Discount

Lecture 211 Show Discount and Coupon Applied in Frontend

Lecture 212 What's Next After Successful Purchase?

Section 20: Orders

Lecture 213 Order Schema

Lecture 214 Create Order Backend

Lecture 215 Create Order and Empty Cart Frontend

Lecture 216 Decrement Quantity Increment Sold

Lecture 217 Show Out Of Stock

Section 21: User Dashboard (Purchase History)

Lecture 218 User Orders Backend

Lecture 219 User Orders in Purchase History Page

Lecture 220 Purchase Orders in Card

Lecture 221 Showing Each Order's Products in Table

Lecture 222 Show Payment Info

Section 22: PDF/Invoice Download

Lecture 223 Install from NPM

Lecture 224 PDF View and Download Link

Lecture 225 PDF Table Style CSS

Lecture 226 Invoice Component

Lecture 227 Download Invoice as PDF

Section 23: Admin Dashboard (Order Management)

Lecture 228 Orders Status Update for Admin Backend

Lecture 229 Load All Orders in Admin Dashboard

Lecture 230 Orders with Status Update

Lecture 231 Products Table in Admin Dashboard

Section 24: Wishlist

Lecture 232 Wishlist Backend

Lecture 233 Wishlist Functions Frontend

Lecture 234 Wishlist Frontend

Section 25: Cash On Delivery (Cashless order)

Lecture 235 Cash On Delivery

Lecture 236 Create Cash Order or Redirect to Payment Page

Lecture 237 Create Cash Order Backend

Lecture 238 Cash On Delivery System

Lecture 239 Cash Order Success with Coupon and Status of Cash On Delivery

Section 26: Deployment

Lecture 240 Code Splitting with Lazy and Suspense

Lecture 241 NPM Build using Code Splitting vs No Code Splitting

Lecture 242 Deployment tutorial link (updated)

Lecture 243 Heroku or Digital Ocean

Lecture 244 Admin User Setup and Root Access

Lecture 245 Push Project to Github

Lecture 246 NGINX Configuration

Lecture 247 Running API

Lecture 248 MongoDB Setup

Lecture 249 Running React Frontend

Lecture 250 Resize Droplet with Bigger Memory

Lecture 251 Making User Admin and Trying Deployed App

Section 27: Bonus

Lecture 252 Other courses you may like

Javascript developers of all level,Anyone interested in building real world ecommerce app,Anyone interested in learning full stack / mern stack development,Anyone who enjoys learning by building meaningful real projects (not toy projects),Anyone interested in learning hundred's of tips and tricks, all within one course,Anyone with ambition to build the next big thing by mastering full stack development,Anyone who likes to write code that is clean and easy to understand (even for complex features),Anyone who is up for a challenge