English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 43 Hours | 20.1 GB
Build one of The Biggest Real World MERN Stack E-commerce Project using React Redux Node MongoDB and Ant Design
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 System
- Login with email/password and social login (Google)
- Admin dashboard and order management system
- Products CRUD with advance features including categories, sub-categories, multiple image uploads etc
- Plenty of advance searching and filtering options
- Star rating system
- Cart functionality with both backend/frontend implementation
- Checkout with stripe for credit card payments
- Checkout with cash on delivery (no online payment required)
- User dashboard with password update, purchase history, Invoice/PDF download etc
- Deployment to digital ocean cloud
- Please go through the curriculum to get better understanding of the project
This 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.
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
Table of Contents
Introduction
1 Live Demo – User and Cart
2 Live Demo – Rating and Admin Dashboard
3 Live Demo – Searching and Filtering
4 Are You Ready for this Course
5 Building the App Visually
6 IMPORTANT – Download Source Code Bundle for Each Lectures
React Client (Frontend)
7 Create React Project
8 Routes and Pages
9 Ant Design Navigation
10 Ant Design Icons
11 React Router Link
Firebase Authentication and Redux
12 Firebase Setup
13 Register Form
14 Email Link to Signin
15 ENV and Toast Notifications
16 Complete Registration Page
17 Complete Registration
18 Setup Redux
19 User in Redux State
20 User Logout
21 Login Page
22 Signin with Email and Password
23 Login with Google
24 Conditional Rendering
25 Forgot Password
26 Redirect logged in user
Node MongoDB API (Backend)
27 Backend API with Node and MongoDB
28 NPM Packages to install
29 Mongo Atlas or Local Installation
30 Server Setup
31 Routes
32 Routes Autoloading
33 Controllers
34 User Schema
Firebase Auth Check (Server side)
35 Firebase Admin
36 Middleware
37 Auth Check Middleware
User Admin and Protected Routes
38 Create or Update User
39 API User Response
40 Current User Endpoint
41 Role Based Redirect
42 Protected User Route
43 Redirect Countdown
44 Sidebar Nav for User
45 Password Update
46 Admin Check Middleware
47 Admin Route
48 Warnings and Cleanup
49 What’s Next
Categories CRUD
50 Category Schema
51 Category Routes
52 Category Create
53 Category List Read Update Delete
54 Category CRUD Requests
55 Dynamic Dashboard Link
56 Admin Sidebar Nav
57 Category Create and List
58 Category Render and Delete
59 Category Update
60 What’s Next
61 Code Refactor – Reusable Component
62 Search Filter Categories
63 Code Refactor – Search Filter
Sub Categories CRUD
64 Sub Categories CRUD
65 Sub Categories Functions
66 Sub Category Create
67 Showing Sub Categories and Remove
68 Sub Category Update
69 What’s Next
Creating Products with Categories and Sub Categories (Advance)
70 Product Model
71 Product Create Backend
72 Create Product Page
73 Product Create Form
74 Create Product
75 Alert and Reload after Product Create
76 Product Create Error Message
77 GET Endpoint – Products
78 Code Refactor
79 Create Product with Category
80 Sub Categories Endpoint
81 List Sub Categories Based on Parent Category
82 Sub Categories Props
83 Multi Select Ant Design
84 Create Product with Sub Categories
Multiple Image Uploads
85 How Image Upload Will Work
86 Cloudinary Upload Endpoints
87 File Upload Components
88 File Resize in React
89 Multiple Image Uploads
90 Image Preview
91 Product Create with Multiple Images
Update and Delete Products (Advance)
92 List All Products Endpoint
93 Fetch All Products in Admin Dashboard
94 Admin Products Card
95 Code Organization
96 Default Image Ant Icons and Product Description
97 Product Delete Endpoint
98 Delete A Product
99 Product Update Page
100 Product Slug from Router
101 Get Product on Update Page
102 Product Update Component
103 Pre Populate Shipping Color and Brand
104 Pre Populate Category
105 Pre Populate Sub Categories
106 Category and Sub Category Sync on Update
107 Image Uploads in Product Update
108 Product Update Endpoint
109 Update A Product
Displaying Products Pagination and Carousel
110 Fetch Products in Home Page
111 Product Card Component
112 Using Ant Design Card
113 Typewriter Effect
114 Loading Card
115 List Product with Sort Order and Limit
116 New Arrivals
117 Best Sellers
118 Get Total Products Count
119 List Products Endpoint with Pagination
120 New Arrivals Pagination
121 Best Sellers Pagination
122 View Products Page
123 Single Product Component
124 Image Carousel
125 Default Image
126 Product List Items Component
127 Tabs
Star Rating System
128 Star Rating System Backend
129 React Star Rating
130 Modal for Rating
131 Login to Leave Rating
132 Redirect to Intended Page
133 API Request with Rating
134 Show Users Existing Star Rating
135 Show Average Rating
136 Show Average Rating in Home Page
137 Related Products Backend
138 Show Related Products
Products based on Categories and Sub Categories
139 Categories List
140 Category Home Page
141 Category with Products Backend
142 Category Page with Products
143 Sub Categories with Products
Advance Searching and Filtering (8 Different Ways)
144 Introduction to Searching and Filtering
145 Search Filter Backend
146 Search Redux Setup
147 Shop Page
148 Search By Text
149 Filter By Price Range Backend
150 Filter By Price Range Frontend
151 Filter By Categories Backend
152 Filter By Categories Frontend
153 Filter By Star Rating Backend
154 Filter By Star Rating Frontend
155 Filter By Sub Category Backend
156 Filter By Sub Category Frontend
157 Filter By Shipping Color and Brand Backend
158 Filter By Brands Frontend
159 Filter By Colors Frontend
160 Filter By Shipping Frontend
Add to Cart
161 Introduction to Add To Cart
162 Add Product to Local Storage
163 Tooltip
164 Cart in Redux State
165 Dispatch Add To Cart
166 Cart Page Setup
167 Cart Page Order Summary
168 Redirect Back to Cart Page After Login
169 Cart Items in Table
170 React Modal Image
171 Pick A Color in Cart Page
172 Quantity Update in Cart
173 Remove Products From Cart
174 Side Drawer Component
175 Cart Items in Side Drawer
Checkout
176 Checkout Page Setup
177 Save Cart Request
178 Cart Model
179 Save Cart To Database
180 Get User Cart from Database
181 Get User Cart in Frontend
182 Final Order Summary in Checkout
183 Empty Cart
184 User Address on Checkout
185 Save Address on Checkout
Coupon
186 Coupon Schema
187 Coupon Routes and Controller Methods
188 Create Coupon Page
189 Create Coupon
190 Coupon List and Delete
191 Apply Coupon
192 Apply Discount Backend
193 Discount Price Response
194 Coupon Error and Success Message
195 Coupon in Redux
Payment with Stripe
196 Stripe Payment Integration – Official Docs
197 Stripe Setup Backend
198 Stripe Setup Frontend
199 Get Help
200 Stripe Payment Widget CSS
201 Stripe Checkout Component Style Variable
202 Stripe Checkout Component
203 Successful Payment
204 Charging Actual Cart Total
205 Charge With Coupon Discount
206 Show Discount and Coupon Applied in Frontend
207 What’s Next After Successful Purchase
Orders
208 Order Schema
209 Create Order Backend
210 Create Order and Empty Cart Frontend
211 Decrement Quantity Increment Sold
212 Show Out Of Stock
User Dashboard (Purchase History)
213 User Orders Backend
214 User Orders in Purchase History Page
215 Purchase Orders in Card
216 Showing Each Order’s Products in Table
217 Show Payment Info
PDFInvoice Download
218 Install from NPM
219 PDF View and Download Link
220 PDF Table Style CSS
221 Invoice Component
222 Download Invoice as PDF
Admin Dashboard (Order Management)
223 Orders Status Update for Admin Backend
224 Load All Orders in Admin Dashboard
225 Orders with Status Update
226 Products Table in Admin Dashboard
Wishlist
227 Wishlist Backend
228 Wishlist Functions Frontend
229 Wishlist Frontend
Cash On Delivery (Cashless order)
230 Cash On Delivery
231 Create Cash Order or Redirect to Payment Page
232 Create Cash Order Backend
233 Cash On Delivery System
234 Cash Order Success with Coupon and Status of Cash On Delivery
Deployment
235 Code Splitting with Lazy and Suspense
236 NPM Build using Code Splitting vs No Code Splitting
237 Heroku or Digital Ocean
238 Admin User Setup and Root Access
239 Push Project to Github
240 NGINX Configuration
241 Running API
242 MongoDB Setup
243 Running React Frontend
244 Resize Droplet with Bigger Memory
245 Making User Admin and Trying Deployed App
Resolve the captcha to access the links!