Mern Stack Ecommerce App - React,Redux,Node,Express,Mongo Db

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

What you'll 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

Requirements

Javascript Basics

React Basics

Redux and Redux Thunk

Node and Express

Description

Build a Complete MERN Stack Ecommerce App From ScratchThis 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 AppWorking with the static dataWorking with API End PointsMongo DB atlas and CompassRedux States and ReducersRedux Thunk as MiddelWareWorking with local storage and Redux storeAdd to cart FeatureUpdate Quantity in cart Delete Products from cart\User AuthenticationStripe Payment GatewayPlacing orders with stripePlacing OrdersStore orders in databaseRetrieve Orders to user profileUser DashboardAdmin DashboardManage Users , Products , Orders in Admin PanelProtected 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.

Overview

Section 1: Introduction

Lecture 1 Promo / Github

Lecture 2 User Panel - DEMO

Lecture 3 Admin Pane - Demo

Section 2: Front End Setup

Lecture 4 Setup React Application

Lecture 5 Creating Navbar

Lecture 6 Display static data in home page

Lecture 7 Adding routes

Lecture 8 Product description page

Lecture 9 Adding Rating bar

Section 3: Backend Setup

Lecture 10 Node JS Setup

Lecture 11 Mongo DB Atlas setup

Lecture 12 Node JS and Mongo DB Connection

Lecture 13 Adding static JSON data in Mongo DB

Section 4: Working with Dynamic data

Lecture 14 Creating Product Model

Lecture 15 Get all products - POSTMAN

Lecture 16 Get all products to Homescreen

Section 5: Redux , Actions and Reducers

Lecture 17 Redux state implementation

Lecture 18 Bring State to Homepage

Lecture 19 Bring state to Product Description page

Lecture 20 Bring state to Product Description page - part2

Section 6: Add To Cart

Lecture 21 Add to cart Button , Quantity Functionality

Lecture 22 Add to cart - Navbar Update

Lecture 23 Add to cart - Quantity Update

Lecture 24 Add to cart with Local storage

Lecture 25 Cart screen design

Lecture 26 Update quantity from cart screen

Lecture 27 Calcalating cart sub total

Section 7: Authentication

Lecture 28 User Registration Design

Lecture 29 User Registration Actions and Reducers

Lecture 30 User Registration Backend

Lecture 31 User Login

Lecture 32 Adding current user to state

Lecture 33 Updating navbar with after login

Lecture 34 User logout

Lecture 35 Success , Error , Loading components

Section 8: Filtering Products

Lecture 36 Filter Component Design

Lecture 37 Filter Component Logic

Section 9: Payment Gateway - Stripe

Lecture 38 Stripe Payment Demo

Lecture 39 Payment Screen design

Lecture 40 Payment actions and reducers

Lecture 41 Payment - Backend

Section 10: Placing Orders

Lecture 42 Order Model

Lecture 43 Placing Order

Lecture 44 Loading and Errors in while placing order

Lecture 45 Orders Screen Design

Lecture 46 Orders Screen Actions and Reducers

Lecture 47 Orders Screen update table

Lecture 48 Order Info Actions and Reducer

Lecture 49 Order Info Design

Section 11: Working on Reviews

Lecture 50 Adding Review FrontEnd

Lecture 51 Adding Review Backend

Lecture 52 Displaying Reviews

Section 12: Working On User Profile

Lecture 53 Protected Routes User Side

Lecture 54 User profile update - frontend

Lecture 55 User Profile update - backend

Section 13: Admin Panel

Lecture 56 Admin panel home

Lecture 57 Userslist

Lecture 58 Delete User

Lecture 59 Products list

Lecture 60 Delete Product

Lecture 61 Add product - frontend

Lecture 62 Add product- backend

Lecture 63 Update product - design

Lecture 64 Update product - logic

Lecture 65 Products List

Lecture 66 Final CSS

Section 14: Deployment

Lecture 67 Deploying to Heroku

React Developers,Node Developers,MERN Developers,Any one interested in building complex MERN apps from Scratch,Any one interested in building complex Ecommerce Application,Any one interested in building and learning new things :)