React Redux Ecommerce - Master MERN Stack Web Development

43h 9m 35s
English
Paid

Course description

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:

Read more about the course

  • 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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 236 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online React Redux Ecommerce - Master MERN Stack Web Development

0:00
/
#1: Live Demo - User and Cart

All Course Lessons (236)

#Lesson TitleDurationAccess
1
Live Demo - User and Cart Demo
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

Unlock unlimited learning

Get instant access to all 235 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

MERN STACK 2022 - Build Ultimate CMS (WordPress Clone)

MERN STACK 2022 - Build Ultimate CMS (WordPress Clone)

Sources: udemy
Learn to build FullStack JavaScript Web Apps using MERN (MongoDB ExpressJs ReactJs NodeJS) Stack If you love learning new skills and building real world apps wi
34 hours 4 minutes 17 seconds
The interactive way to master modern React - react.gg (FULL COURSE)

The interactive way to master modern React - react.gg (FULL COURSE)

Sources: ui.dev (ex. Tyler McGinnis)
OPTIMIZED FOR AHA! We’re obsessed with helping you reach your aha! moments. Our text sections help you master the “why” behind React concepts and include fun, i
7 hours 53 minutes 34 seconds
The Modern React 18 Bootcamp - A Complete Developer Guide

The Modern React 18 Bootcamp - A Complete Developer Guide

Sources: udemy
In this course we will take you from a React 18 novice to a job ready engineer. This course is loaded with practical projects and examples so that you can truly
20 hours 35 minutes 57 seconds
React - The full course

React - The full course

Sources: fireship.io
React - The Full Course is unlike any other React course on the Internet. It provides a fast-paced introduction to essential concepts, then puts them into practice by building m...
1 hour 20 minutes 10 seconds
React Chrome Extension boilerplate | Shipped

React Chrome Extension boilerplate | Shipped

Sources: Luca Restagno (shipped.club)
Launch your Chrome Extension in hours, not weeks. The boilerplate for busy makers, to launch your React Chrome Extensions fast. ou don't need to reinvent the wheel and code ever...