React Redux Ecommerce - Master MERN Stack Web Development
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:
More
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.
Watch Online React Redux Ecommerce - Master MERN Stack Web Development
# | Title | Duration |
---|---|---|
1 | Live Demo - User and Cart | 11:40 |
2 | Live Demo - Searching and Filtering | 06:11 |
3 | Live Demo - Rating and Admin Dashboard | 10:47 |
4 | Are You Ready for this Course? | 11:45 |
5 | Building the App Visually | 06:16 |
6 | Create React Project | 09:01 |
7 | Routes and Pages | 13:53 |
8 | Ant Design Navigation | 13:46 |
9 | Ant Design Icons | 10:12 |
10 | React Router Link | 03:21 |
11 | Firebase Setup | 05:24 |
12 | Register Form | 12:23 |
13 | Email Link to Signin | 15:09 |
14 | ENV and Toast Notifications | 06:37 |
15 | Complete Registration Page | 11:45 |
16 | Complete Registration | 22:31 |
17 | Setup Redux | 15:42 |
18 | User in Redux State | 11:01 |
19 | User Logout | 08:19 |
20 | Login Page | 12:03 |
21 | Signin with Email and Password | 09:13 |
22 | Login with Google | 08:33 |
23 | Conditional Rendering | 09:18 |
24 | Forgot Password | 21:51 |
25 | Redirect logged in user | 06:25 |
26 | Backend API with Node and MongoDB | 02:01 |
27 | NPM Packages to install | 05:50 |
28 | Mongo Atlas or Local Installation | 06:27 |
29 | Server Setup | 21:43 |
30 | Routes | 07:03 |
31 | Routes Autoloading | 06:19 |
32 | Controllers | 06:39 |
33 | User Schema | 08:31 |
34 | Firebase Admin | 05:38 |
35 | Middleware | 09:05 |
36 | Auth Check Middleware | 12:54 |
37 | Create or Update User | 15:44 |
38 | API User Response | 15:42 |
39 | Current User Endpoint | 10:18 |
40 | Role Based Redirect | 05:18 |
41 | Protected User Route | 14:22 |
42 | Redirect Countdown | 09:48 |
43 | Sidebar Nav for User | 08:06 |
44 | Password Update | 18:18 |
45 | Admin Check Middleware | 08:32 |
46 | Admin Route | 17:15 |
47 | Warnings and Cleanup | 04:06 |
48 | What's Next? | 01:29 |
49 | Category Schema | 06:53 |
50 | Category Routes | 06:03 |
51 | Category Create | 15:42 |
52 | Category List Read Update Delete | 14:59 |
53 | Category CRUD Requests | 06:53 |
54 | Dynamic Dashboard Link | 04:28 |
55 | Admin Sidebar Nav | 10:21 |
56 | Category Create and List | 21:40 |
57 | Category Render and Delete | 15:56 |
58 | Category Update | 21:48 |
59 | What's Next? | 02:58 |
60 | Code Refactor - Reusable Component | 07:11 |
61 | Search Filter Categories | 09:16 |
62 | Code Refactor - Search Filter | 08:36 |
63 | Sub Categories CRUD | 09:23 |
64 | Sub Categories Functions | 06:16 |
65 | Sub Category Create | 19:23 |
66 | Showing Sub Categories and Remove | 06:43 |
67 | Sub Category Update | 15:30 |
68 | What's Next? | 03:43 |
69 | Product Model | 14:21 |
70 | Product Create Backend | 07:19 |
71 | Create Product Page | 08:17 |
72 | Product Create Form | 18:47 |
73 | Create Product | 11:09 |
74 | Alert and Reload after Product Create | 06:44 |
75 | Product Create Error Message | 06:41 |
76 | GET Endpoint - Products | 04:19 |
77 | Code Refactor | 06:45 |
78 | Create Product with Category | 12:58 |
79 | Sub Categories Endpoint | 06:28 |
80 | List Sub Categories Based on Parent Category | 09:50 |
81 | Sub Categories Props | 06:26 |
82 | Multi Select Ant Design | 11:03 |
83 | Create Product with Sub Categories | 09:56 |
84 | How Image Upload Will Work? | 02:28 |
85 | Cloudinary Upload Endpoints | 17:10 |
86 | File Upload Components | 10:53 |
87 | File Resize in React | 11:42 |
88 | Multiple Image Uploads | 12:07 |
89 | Image Preview | 06:26 |
90 | Product Create with Multiple Images | 17:56 |
91 | List All Products Endpoint | 10:59 |
92 | Fetch All Products in Admin Dashboard | 09:18 |
93 | Admin Products Card | 13:18 |
94 | Code Organization | 06:38 |
95 | Default Image Ant Icons and Product Description | 08:32 |
96 | Product Delete Endpoint | 03:52 |
97 | Delete A Product | 13:54 |
98 | Product Update Page | 08:45 |
99 | Product Slug from Router | 08:01 |
100 | Get Product on Update Page | 08:31 |
101 | Product Update Component | 08:18 |
102 | Pre Populate Shipping Color and Brand | 06:13 |
103 | Pre Populate Category | 15:05 |
104 | Pre Populate Sub Categories | 19:51 |
105 | Category and Sub Category Sync on Update | 23:25 |
106 | Image Uploads in Product Update | 08:16 |
107 | Product Update Endpoint | 08:33 |
108 | Update A Product | 11:54 |
109 | Fetch Products in Home Page | 06:05 |
110 | Product Card Component | 08:21 |
111 | Using Ant Design Card | 09:21 |
112 | Typewriter Effect | 12:00 |
113 | Loading Card | 16:16 |
114 | List Product with Sort Order and Limit | 08:06 |
115 | New Arrivals | 12:45 |
116 | Best Sellers | 05:31 |
117 | Get Total Products Count | 07:03 |
118 | List Products Endpoint with Pagination | 06:10 |
119 | New Arrivals Pagination | 20:09 |
120 | Best Sellers Pagination | 03:56 |
121 | View Products Page | 11:29 |
122 | Single Product Component | 13:43 |
123 | Image Carousel | 07:45 |
124 | Default Image | 05:16 |
125 | Product List Items Component | 18:04 |
126 | Tabs | 07:41 |
127 | Star Rating System Backend | 27:32 |
128 | React Star Rating | 08:56 |
129 | Modal for Rating | 14:54 |
130 | Login to Leave Rating | 03:52 |
131 | Redirect to Intended Page | 11:05 |
132 | API Request with Rating | 18:10 |
133 | Show Users Existing Star Rating | 08:27 |
134 | Show Average Rating | 15:24 |
135 | Show Average Rating in Home Page | 09:03 |
136 | Related Products Backend | 11:14 |
137 | Show Related Products | 16:02 |
138 | Categories List | 13:48 |
139 | Category Home Page | 16:12 |
140 | Category with Products Backend | 16:12 |
141 | Category Page with Products | 12:47 |
142 | Sub Categories with Products | 15:25 |
143 | Introduction to Searching and Filtering | 05:00 |
144 | Search Filter Backend | 10:23 |
145 | Search Redux Setup | 17:24 |
146 | Shop Page | 14:27 |
147 | Search By Text | 18:13 |
148 | Filter By Price Range Backend | 07:16 |
149 | Filter By Price Range Frontend | 29:04 |
150 | Filter By Categories Backend | 03:47 |
151 | Filter By Categories Frontend | 34:23 |
152 | Filter By Star Rating Backend | 16:02 |
153 | Filter By Star Rating Frontend | 19:00 |
154 | Filter By Sub Category Backend | 03:00 |
155 | Filter By Sub Category Frontend | 15:14 |
156 | Filter By Shipping Color and Brand Backend | 05:30 |
157 | Filter By Brands Frontend | 14:07 |
158 | Filter By Colors Frontend | 06:29 |
159 | Filter By Shipping Frontend | 09:47 |
160 | Introduction to Add To Cart | 06:51 |
161 | Add Product to Local Storage | 15:09 |
162 | Tooltip | 05:55 |
163 | Cart in Redux State | 06:49 |
164 | Dispatch Add To Cart | 16:07 |
165 | Cart Page Setup | 05:49 |
166 | Cart Page Order Summary | 13:19 |
167 | Redirect Back to Cart Page After Login | 06:39 |
168 | Cart Items in Table | 13:42 |
169 | React Modal Image | 06:37 |
170 | Pick A Color in Cart Page | 17:25 |
171 | Quantity Update in Cart | 12:22 |
172 | Remove Products From Cart | 09:47 |
173 | Side Drawer Component | 13:48 |
174 | Cart Items in Side Drawer | 19:17 |
175 | Checkout Page Setup | 11:45 |
176 | Save Cart Request | 06:55 |
177 | Cart Model | 05:33 |
178 | Save Cart To Database | 21:26 |
179 | Get User Cart from Database | 11:32 |
180 | Get User Cart in Frontend | 07:04 |
181 | Final Order Summary in Checkout | 05:43 |
182 | Empty Cart | 15:46 |
183 | User Address on Checkout | 12:43 |
184 | Save Address on Checkout | 08:35 |
185 | Coupon Schema | 05:06 |
186 | Coupon Routes and Controller Methods | 07:14 |
187 | Create Coupon Page | 12:05 |
188 | Create Coupon | 14:28 |
189 | Coupon List and Delete | 13:17 |
190 | Apply Coupon | 09:05 |
191 | Apply Discount Backend | 14:00 |
192 | Discount Price Response | 09:36 |
193 | Coupon Error and Success Message | 07:50 |
194 | Coupon in Redux | 10:51 |
195 | Stripe Setup Backend | 14:56 |
196 | Stripe Setup Frontend | 06:48 |
197 | Stripe Checkout Component | 19:04 |
198 | Successful Payment | 13:53 |
199 | Charging Actual Cart Total | 09:51 |
200 | Charge With Coupon Discount | 21:31 |
201 | Show Discount and Coupon Applied in Frontend | 15:11 |
202 | What's Next After Successful Purchase? | 04:26 |
203 | Order Schema | 07:27 |
204 | Create Order Backend | 06:55 |
205 | Create Order and Empty Cart Frontend | 15:49 |
206 | Decrement Quantity Increment Sold | 11:06 |
207 | Show Out Of Stock | 08:23 |
208 | User Orders Backend | 03:46 |
209 | User Orders in Purchase History Page | 08:20 |
210 | Purchase Orders in Card | 06:16 |
211 | Showing Each Order's Products in Table | 08:33 |
212 | Show Payment Info | 11:05 |
213 | PDF View and Download Link | 11:40 |
214 | Invoice Component | 09:08 |
215 | Download Invoice as PDF | 13:58 |
216 | Orders Status Update for Admin Backend | 07:10 |
217 | Load All Orders in Admin Dashboard | 13:18 |
218 | Orders with Status Update | 22:06 |
219 | Products Table in Admin Dashboard | 03:30 |
220 | Wishlist Backend | 12:56 |
221 | Wishlist Functions Frontend | 06:55 |
222 | Wishlist Frontend | 19:30 |
223 | Cash On Delivery | 11:23 |
224 | Create Cash Order or Redirect to Payment Page | 12:49 |
225 | Create Cash Order Backend | 17:59 |
226 | Cash Order Success with Coupon and Status of Cash On Delivery | 22:50 |
227 | Code Splitting with Lazy and Suspense | 10:58 |
228 | Heroku or Digital Ocean | 06:47 |
229 | Admin User Setup and Root Access | 12:30 |
230 | Push Project to Github | 05:00 |
231 | NGINX Configuration | 09:47 |
232 | Running API | 06:04 |
233 | MongoDB Setup | 04:26 |
234 | Running React Frontend | 07:14 |
235 | Resize Droplet with Bigger Memory | 05:43 |
236 | Making User Admin and Trying Deployed App | 13:30 |