CF

React Redux Ecommerce - Master MERN Stack Web Development

43h 9m 35s
English
Paid

React Redux Ecommerce - Master MERN Stack Web Development is a 236-lesson 43 hours 9 minutes self-paced course by Udemy. Master MERN Stack Web Development building Ultimate E-commerce app with React Redux Ant Design Firebase NodeJs and MongoDB.

Course facts

Lessons
236
Duration
43 hours 9 minutes
Level
All levels
Language
English
Updated
Instructor
Udemy
Price
Premium

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.

Who teaches React Redux Ecommerce - Master MERN Stack Web Development? Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

What lessons are included in React Redux Ecommerce - Master MERN Stack Web Development?

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
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

What courses are similar to React Redux Ecommerce - Master MERN Stack Web Development?

More courses by Udemy

Frequently asked questions

What are the prerequisites for enrolling in this course?
This course assumes that students have a fundamental understanding of JavaScript and basic web development concepts. Familiarity with React is beneficial but not required, as the course begins with creating a React project and setting up React Router for navigation.
What project will I build during this course?
Participants will build a fully functional e-commerce application using the MERN stack. The project will include features such as user authentication with Firebase, state management with Redux, and a backend API using Node.js and MongoDB. You will also learn to implement searching, filtering, and an admin dashboard.
Who is the target audience for this course?
This course is designed for web developers looking to master full-stack development using the MERN stack. It is suitable for those who want to build e-commerce applications and gain hands-on experience with technologies like React, Redux, Ant Design, Firebase, Node.js, and MongoDB.
How does this course compare in depth and scope to other web development courses?
With a total of 236 lessons, this course offers a comprehensive exploration of the MERN stack. It covers not just frontend and backend development but also integrates tools like Firebase for authentication and Ant Design for UI components. This depth provides a solid foundation for building complex, production-ready applications.
What specific tools and platforms are covered in this course?
The course covers a range of tools and platforms integral to the MERN stack. These include React for building the frontend, Redux for state management, Ant Design for UI components, Firebase for authentication, Node.js for server-side logic, and MongoDB for database management.
What topics are not covered in this course?
This course does not cover non-MERN stack technologies or frameworks such as Angular or Vue.js. Additionally, it doesn’t delve into advanced topics like serverless architecture or microservices, focusing instead on building a full-stack application using the specified stack.
What is the expected time commitment for completing this course?
Although the total runtime is not specified, the course comprises 236 lessons, suggesting a substantial time commitment. Students should be prepared to dedicate significant time to complete lessons, follow along with coding exercises, and implement the projects thoroughly.