Udemy

Platform

English

Language

Web Development

Category

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

4.68 (498 reviews)

Students

43 hours

Content

Jan 2021

Last Update
Regular Price

SKILLSHARE
SkillShare
Unlimited access to 30 000 Premium SkillShare courses
30-DAY FREE TRIAL

What you will 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


Description

Course Highlights

  1. React Client (Frontend)

  2. Firebase Authentication and Redux

  3. Node MongoDB API (Backend)

  4. Firebase Auth Check (Server side)

  5. User Admin and Protected Routes

  6. Categories CRUD

  7. Sub Categories CRUD

  8. Creating Products with Categories and Sub Categories (Advance)

  9. Multiple Image Uploads with Client Side Resize

  10. Update and Delete Products (Advance)

  11. Displaying Products Pagination and Carousel

  12. Star Rating System

  13. Products based on Categories and Sub Categories

  14. Advance Searching and Filtering (9 Different Ways)

  15. Add to Cart

  16. Checkout

  17. Coupon

  18. Payment with Stripe

  19. Orders

  20. User Dashboard (Purchase History)

  21. PDF/Invoice Download

  22. Admin Dashboard (Order Management)

  23. Wishlist

  24. Cash On Delivery (Cashless order)

  25. Deployment to Digital Ocean Cloud


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


Screenshots

React Redux Ecommerce - Master MERN Stack Web Development
React Redux Ecommerce - Master MERN Stack Web Development
React Redux Ecommerce - Master MERN Stack Web Development
React Redux Ecommerce - Master MERN Stack Web Development

Content

Introduction

Live Demo - User and Cart

Live Demo - Rating and Admin Dashboard

Live Demo - Searching and Filtering

Are You Ready for this Course?

Building the App Visually

IMPORTANT - Download Source Code Bundle for Each Lectures

React Client (Frontend)

Create React Project

Routes and Pages

Ant Design Navigation

Ant Design Icons

React Router Link

Firebase Authentication and Redux

Firebase Setup

Register Form

Email Link to Signin

ENV and Toast Notifications

Complete Registration Page

Complete Registration

Setup Redux

User in Redux State

User Logout

Login Page

Signin with Email and Password

Login with Google

Conditional Rendering

Forgot Password

Redirect logged in user

Node MongoDB API (Backend)

Backend API with Node and MongoDB

NPM Packages to install

Mongo Atlas or Local Installation

Server Setup

Routes

Routes Autoloading

Controllers

User Schema

Firebase Auth Check (Server side)

Firebase Admin

Middleware

Auth Check Middleware

User Admin and Protected Routes

Create or Update User

API User Response

Current User Endpoint

Role Based Redirect

Protected User Route

Redirect Countdown

Sidebar Nav for User

Password Update

Admin Check Middleware

Admin Route

Warnings and Cleanup

What's Next?

Categories CRUD

Category Schema

Category Routes

Category Create

Category List Read Update Delete

Category CRUD Requests

Dynamic Dashboard Link

Admin Sidebar Nav

Category Create and List

Category Render and Delete

Category Update

What's Next?

Code Refactor - Reusable Component

Search Filter Categories

Code Refactor - Search Filter

Sub Categories CRUD

Sub Categories CRUD

Sub Categories Functions

Sub Category Create

Showing Sub Categories and Remove

Sub Category Update

What's Next?

Creating Products with Categories and Sub Categories (Advance)

Product Model

Product Create Backend

Create Product Page

Product Create Form

Create Product

Alert and Reload after Product Create

Product Create Error Message

GET Endpoint - Products

Code Refactor

Create Product with Category

Sub Categories Endpoint

List Sub Categories Based on Parent Category

Sub Categories Props

Multi Select Ant Design

Create Product with Sub Categories

Multiple Image Uploads

How Image Upload Will Work?

Cloudinary Upload Endpoints

File Upload Components

File Resize in React

Multiple Image Uploads

Image Preview

Product Create with Multiple Images

Update and Delete Products (Advance)

List All Products Endpoint

Fetch All Products in Admin Dashboard

Admin Products Card

Code Organization

Default Image Ant Icons and Product Description

Product Delete Endpoint

Delete A Product

Product Update Page

Product Slug from Router

Get Product on Update Page

Product Update Component

Pre Populate Shipping Color and Brand

Pre Populate Category

Pre Populate Sub Categories

Category and Sub Category Sync on Update

Image Uploads in Product Update

Product Update Endpoint

Update A Product

Displaying Products Pagination and Carousel

Fetch Products in Home Page

Product Card Component

Using Ant Design Card

Typewriter Effect

Loading Card

List Product with Sort Order and Limit

New Arrivals

Best Sellers

Get Total Products Count

List Products Endpoint with Pagination

New Arrivals Pagination

Best Sellers Pagination

View Products Page

Single Product Component

Image Carousel

Default Image

Product List Items Component

Tabs

Star Rating System

Star Rating System Backend

React Star Rating

Modal for Rating

Login to Leave Rating

Redirect to Intended Page

API Request with Rating

Show Users Existing Star Rating

Show Average Rating

Show Average Rating in Home Page

Related Products Backend

Show Related Products

Products based on Categories and Sub Categories

Categories List

Category Home Page

Category with Products Backend

Category Page with Products

Sub Categories with Products

Advance Searching and Filtering (8 Different Ways)

Introduction to Searching and Filtering

Search Filter Backend

Search Redux Setup

Shop Page

Search By Text

Filter By Price Range Backend

Filter By Price Range Frontend

Filter By Categories Backend

Filter By Categories Frontend

Filter By Star Rating Backend

Filter By Star Rating Frontend

Filter By Sub Category Backend

Filter By Sub Category Frontend

Filter By Shipping Color and Brand Backend

Filter By Brands Frontend

Filter By Colors Frontend

Filter By Shipping Frontend

Add to Cart

Introduction to Add To Cart

Add Product to Local Storage

Tooltip

Cart in Redux State

Dispatch Add To Cart

Cart Page Setup

Cart Page Order Summary

Redirect Back to Cart Page After Login

Cart Items in Table

React Modal Image

Pick A Color in Cart Page

Quantity Update in Cart

Remove Products From Cart

Side Drawer Component

Cart Items in Side Drawer

Checkout

Checkout Page Setup

Save Cart Request

Cart Model

Save Cart To Database

Get User Cart from Database

Get User Cart in Frontend

Final Order Summary in Checkout

Empty Cart

User Address on Checkout

Save Address on Checkout

Coupon

Coupon Schema

Coupon Routes and Controller Methods

Create Coupon Page

Create Coupon

Coupon List and Delete

Apply Coupon

Apply Discount Backend

Discount Price Response

Coupon Error and Success Message

Coupon in Redux

Payment with Stripe

Stripe Payment Integration - Official Docs

Stripe Setup Backend

Stripe Setup Frontend

Get Help

Stripe Payment Widget CSS

Stripe Checkout Component Style Variable

Stripe Checkout Component

Successful Payment

Charging Actual Cart Total

Charge With Coupon Discount

Show Discount and Coupon Applied in Frontend

What's Next After Successful Purchase?

Orders

Order Schema

Create Order Backend

Create Order and Empty Cart Frontend

Decrement Quantity Increment Sold

Show Out Of Stock

User Dashboard (Purchase History)

User Orders Backend

User Orders in Purchase History Page

Purchase Orders in Card

Showing Each Order's Products in Table

Show Payment Info

PDF/Invoice Download

Install from NPM

PDF View and Download Link

PDF Table Style CSS

Invoice Component

Download Invoice as PDF

Admin Dashboard (Order Management)

Orders Status Update for Admin Backend

Load All Orders in Admin Dashboard

Orders with Status Update

Products Table in Admin Dashboard

Wishlist

Wishlist Backend

Wishlist Functions Frontend

Wishlist Frontend

Cash On Delivery (Cashless order)

Cash On Delivery

Create Cash Order or Redirect to Payment Page

Create Cash Order Backend

Cash On Delivery System

Cash Order Success with Coupon and Status of Cash On Delivery

Deployment

Code Splitting with Lazy and Suspense

NPM Build using Code Splitting vs No Code Splitting

Heroku or Digital Ocean

Admin User Setup and Root Access

Push Project to Github

NGINX Configuration

Running API

MongoDB Setup

Running React Frontend

Resize Droplet with Bigger Memory

Making User Admin and Trying Deployed App


Reviews

J
Jens13 January 2021

It was a somewhat good course, but he made a lot of small mistakes and it was thus a little hard to keep your head straight. But he really knows what he's doing, and I would definitely buy another of his courses if the need arises.

J
John8 January 2021

I am taking this course to build a regular ecommerce site but I have already learned so much, firebase, ant design this is great

L
Layeh3 January 2021

1. The lectures are clear and easy to follow, and the course resources are very useful when it needed. The search features are expressive but it's still limited; it only accepts one filter per search. It would be very powerful if the related search options can be coordinated or combined. For example, If the search's able fetch products of Category: Microsoft --> Price: 1000 - 2000 --> Sub: Surface. 2. Seems the instructor's ignoring some questions or suggestions. Anyways this course is still a very good one.

U
Uwimana25 December 2020

This course is just amazing. The trainer demonstrates every aspect of the application with deep and relevant explanations. I imagine hard to not be able to write my own apps after practicing this one. How good is that!!! :)

A
Ajaypal23 December 2020

I have no complaints about the course. Each question you ask, is replied back to very quickly. Even though it says that you need to have a basic understanding of Node JS, I had none at all. All I knew was React. And I am very happy that all work was done using functional components. All in all, an awesome course.

J
Jah16 December 2020

Awesome course. Easy to follow and very good descriptions. He commits many small errors and shows you how to fix them along the way. Much more like a real dev process than other courses that are like a textbook.

D
Damien15 December 2020

I am half way through the course, some things I'm disappointed about so far: 1. Not everything is written according to best practices. Frontend code is a mess! 2. Weird registration process, uses passwordless sign in for registration idk why? 3. Error handling & validation not done properly just simply show toast message. However, on the plus side the project has a lot of features and Ryan tries his best to explain certain concepts. I will complete the remaining videos and update my review later

G
Ganesh8 December 2020

I love this course I'd never find such a course on udemy, well explained well structured, students who bought this course will definitely gain a massive experience on mern stack along with payment gateway, rating system, firebase, deployment, and much more. In one line sentence one should experience the topics covered for this course.

F
Frank7 December 2020

This course has helped me master the complicated design and development of an eCommerce app. The Instructor is very knowledgeable and the concepts are explained in a very clear way. I highly recommend this course for any student who wants to learn the MERN Stack.

T
Tesfaye5 November 2020

just started this course....have a feeling that the instructor did really work a lot to come with a lot of features for ecommerce app....will add my final comment at the end of all the lessons....thumb up for Ryan....

A
Aditya2 November 2020

Wow Wow Wow !!! Ryan Sir never disappoints with his teachings and stuff . I got my first job after completing his Ecommerce project of 16 hours and now this 43 hours course will make me reach to another level . Thanx a lot Ryan Sir for your efforts , it really means a lot to us . Guys dont wait buy this ....

K
Kaym31 October 2020

Very excited to take this course. Ryan is an amazing teacher. This is my third course with him as an instructor, and it's amazing to see how far I am now and how confident I feel when it comes to web development. One thing preventing me to give a five-star rating is the fact that there is no SEO covered. I would love to see Next.JS included later on as an update of the course. This doens't change the fact than Ryan is a rockstar.

R
Riki24 October 2020

the explanations clearly, i recommend for you already know react basic enroll this course and this course teach you how to build real project web app. it's worth it.

K
Kay22 October 2020

I've taken 3 courses from Ryan and got a job as JS developer. Ryan is a the Traversy Media of Udemy. HAND DOWN, he is the best if you want to learn JS from building practical real world projects.

H
Hemant9 October 2020

Thanks, Ryan for this masterpiece, I have been following Ryans courses for a long time and I can guarantee you can learn sufficient things as you need to become a full-stack developer. The most important thing as a developer is to write the scaleable code and in a well-organized manner, and I learned a lot from him and I love his coding manner! If you are new here, please go through his 1. Next JS Blogging App 2. E-Commerce in React + Node 3. Networking Site in Mern Stack 4. Graphql These courses are just enough to deal with and you can learn almost everything from Class Components to Functional Components, REST - Graphql, Javascript Methods, Callbacks promises and Asynchronous programming, Error Handling, Life cycle Methods and I lot of things I can't even mention! Thanks, a lot Ryan!


Coupons

DateDiscountStatus
11/16/202095% OFFExpired
12/14/202095% OFFExpired
12/22/202095% OFFExpired
12/29/202095% OFFExpired
3/8/202195% OFFExpired
3/27/202194% OFFExpired
4/25/202194% OFFExpired

3546864

Udemy ID

10/5/2020

Course created date

10/11/2020

Course Indexed date
Bot
Course Submitted by