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

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

4.50 (64 reviews)
Udemy
platform
English
language
Web Development
category
3,020
students
15 hours
content
Mar 2022
last update
$59.99
regular price

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

Description

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.




Content

Introduction

Promo
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

Authentication

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
Userslist
Delete User
Products list
Delete Product
Add product - frontend
Add product- backend
Update product - design
Update product - logic
Products List
Final CSS

Deployment

Deploying to Heroku

Screenshots

MERN Stack ECommerce App - React,Redux,Node,Express,Mongo DB - Screenshot_01MERN Stack ECommerce App - React,Redux,Node,Express,Mongo DB - Screenshot_02MERN Stack ECommerce App - React,Redux,Node,Express,Mongo DB - Screenshot_03MERN Stack ECommerce App - React,Redux,Node,Express,Mongo DB - Screenshot_04

Reviews

Anand
November 26, 2021
Some of package have Updations, like raect router and have Huge changes in the code. its very difficult for a beginer to understand. Better you must post the package.JSON and a Git Repository of all codes for comparing errors.
Kenneth
September 28, 2021
This is a great course for people new to react and redux. I wish it was a bit more in depth though, such as teaching people how to send e-mails to users after an order was placed, how to implement uploading pictures instead of just copying and pasting the URL, and how to protect passwords in the database instead of simply storing them. It's a good start though.
Tumma
April 9, 2021
The course is perfectly designed and topics were clearly explained along with the project, helped add project to my me resume.

Coupons

DateDiscountStatus
5/26/2021100% OFF
expired

Charts

Price

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

Rating

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

Enrollment distribution

MERN Stack ECommerce App - React,Redux,Node,Express,Mongo DB - Distribution chart
3961070
udemy ID
4/5/2021
course created date
4/10/2021
course indexed date
Bot
course submited by