Web Development


MERN Stack ECommerce App - React,Redux,Node,Express,Mongo DB

Build a Complete MERN Stack Ecommerce application from scratch and deploy to Heroku

4.38 (19 reviews)


15 hours


Apr 2021

Last Update
Regular Price

Blue Host
Fast, easy, and secure WordPress hosting in minutes + 1 free domain name
65%OFF : $2.95/month

What you will learn

How To Create a New React App

Working with Static JSON Data

Creating Node and Express Server

Mongo DB Atlas and Mongo DB Compass connection

Connecting Node JS and Mongo DB

Working with API End Points

Working with State Management

Working with Redux stores , reducers,actions

Working with Redux Thunk

Add to cart functionality

Updating and deleting items from cart

Checkout Functionality

Stripe payment gateway integration

Connecting stripe to react and node

Working with react-stripe-checkout module

Placing orders

Store orders in database

User Authentication

Working on User profile

Filtering Products by price , category

Products search functionality

Adding reviews to the products

Displaying reviews for the products

Admin panel implementation

Mange users , orders , products with admin panel

Deployment to HEROKU


Build a Complete MERN Stack Ecommerce App From Scratch

This course is not for any React beginners or Node Beginners. You must have some basic knowledge in React , Redux , Redux Thunk and Node JS.

In this course we will implement the following features in the Ecommerce Application.

  • Creating React App

  • Working with the static data

  • Working with API End Points

  • Mongo DB atlas and Compass

  • Redux States and Reducers

  • Redux Thunk as MiddelWare

  • Working with local storage and Redux store

  • Add to cart Feature

  • Update Quantity in cart

  • Delete Products from cart\

  • User Authentication

  • Stripe Payment Gateway

  • Placing orders with stripe

  • Placing Orders

  • Store orders in database

  • Retrieve Orders to user profile

  • User Dashboard

  • Admin Dashboard

  • Manage Users , Products , Orders in Admin Panel

  • Protected routes for admin panel

  • Deployment to Heroku.

  • By the end of the courses you will know how to work with redux states ,reducers, Middelwares including the payment gateway.

  • 24/7 Q/A Support.

MERN is one of several variations of the MEAN stack (MongoDB Express Angular Node), where the traditional Angular.js frontend framework is replaced with React.js. Other variants include MEVN (MongoDB, Express, Vue, Node), and really any frontend JavaScript framework can work.

Express and Node make up the middle (application) tier. Express.js is a server-side web framework, and Node.js the popular and powerful JavaScript server platform. Regardless of which variant you choose, ME(RVA)N is the ideal approach to working with JavaScript and JSON, all the way through.


MERN Stack ECommerce App - React,Redux,Node,Express,Mongo DB
MERN Stack ECommerce App - React,Redux,Node,Express,Mongo DB
MERN Stack ECommerce App - React,Redux,Node,Express,Mongo DB
MERN Stack ECommerce App - React,Redux,Node,Express,Mongo DB




User Panel - DEMO

Admin Pane - Demo

Front End Setup

Setup React Application

Creating Navbar

Display static data in home page

Adding routes

Product description page

Adding Rating bar

Backend Setup

Node JS Setup

Mongo DB Atlas setup

Node JS and Mongo DB Connection

Adding static JSON data in Mongo DB

Working with Dynamic data

Creating Product Model

Get all products - POSTMAN

Get all products to Homescreen

Redux , Actions and Reducers

Redux state implementation

Bring State to Homepage

Bring state to Product Description page

Bring state to Product Description page - part2

Add To Cart

Add to cart Button , Quantity Functionality

Add to cart - Navbar Update

Add to cart - Quantity Update

Add to cart with Local storage

Cart screen design

Update quantity from cart screen

Calcalating cart sub total


User Registration Design

User Registration Actions and Reducers

User Registration Backend

User Login

Adding current user to state

Updating navbar with after login

User logout

Success , Error , Loading components

Filtering Products

Filter Component Design

Filter Component Logic

Payment Gateway - Stripe

Stripe Payment Demo

Payment Screen design

Payment actions and reducers

Payment - Backend

Placing Orders

Order Model

Placing Order

Loading and Errors in while placing order

Orders Screen Design

Orders Screen Actions and Reducers

Orders Screen update table

Order Info Actions and Reducer

Order Info Design

Working on Reviews

Adding Review FrontEnd

Adding Review Backend

Displaying Reviews

Working On User Profile

Protected Routes User Side

User profile update - frontend

User Profile update - backend

Admin Panel

Admin panel home


Delete User

Products list

Delete Product

Add product - frontend

Add product- backend

Update product - design

Update product - logic

Products List

Final CSS


Deploying to Heroku


Tumma9 April 2021

The course is perfectly designed and topics were clearly explained along with the project, helped add project to my me resume.


5/26/2021100% OFFExpired


Udemy ID


Course created date


Course Indexed date
Course Submitted by