React Node Ecommerce

  1. Home
  2. Nodejs
  3. React Node Ecommerce

Tags: Node.Js

MERN Stack React Node MongoDB powered E-Commerce App with PayPal and Credit Card Payment along with Admin Dashboard

Last updated 2022-01-10 | 4.6

- Learn Node JS API (Backend) Development
- Learn React JS (Frontend) Web Development
- Learn to Write Functional Components with React Hooks

What you'll learn

Learn Node JS API (Backend) Development
Learn React JS (Frontend) Web Development
Learn to Write Functional Components with React Hooks
Learn the Fundamental Concepts of Building Ecommerce Application
Learn to Implement Payment Gateway using Credit Card and PayPal
Learn to Integrate Braintree (A PayPal Company) for Payment Processing
Learn to Implement Advance Searching/Filtering based on Categories
Learn to Implement Advance Searching/Filtering based on Price Range
Learn to Implement Standard Products Search System with Categories option/dropdown
Learn to Build Shopping Cart
Learn to Implement Authentication based on JWT
Learn to Build Scalable React App with Proper Layouts and Routes
Learn to build Admin and User Dashboard
Learn to Implement Flexible Private and Admin Routing System
Learn advance CRUD with Products and Categories
Learn to handle File Upload
Learn to use LocalStorage (CRUD) to Minimize Requests to Backend
Learn to Store Sold Products Record into the Database for Further Processing
User Profile and Update Ability
Learn to implement Order Management System by Admin
Learn to Deploy your app to Digital Ocean's Cloud Servers
Learn to add a Custom Domain name to your app
Learn to use Cloudflare's CDN to serve your app (for speed)
Learn to use Cloudflare's free SSL to secure your app

* Requirements

* Basic Understanding JavaScript or any other programming language
* Basic Understanding of React Js
* Basic Understanding of Node Js

Description

  • Learn Node JS API (Backend) Development
  • Learn React JS (Frontend) Web Development
  • Learn to Write Functional Components with React Hooks
  • Learn the Fundamental Concepts of Building Ecommerce Application
  • Learn to Implement Payment Gateway using Credit Card and PayPal
  • Learn to Integrate Braintree (A PayPal Company) for Payment Processing
  • Learn to Implement Advance Searching/Filtering based on Categories
  • Learn to Implement Advance Searching/Filtering based on Price Range
  • Learn to Implement Standard Products Search System with Categories option/dropdown
  • Learn to Build Shopping Cart
  • Learn to Implement Authentication based on JWT
  • Learn to Build Scalable React App with Proper Layouts and Routes
  • Learn to build Admin and User Dashboard
  • Learn to Implement Flexible Private and Admin Routing System
  • Learn advance CRUD with Products and Categories
  • Learn to handle File Upload
  • Learn to use LocalStorage (CRUD) to Minimize Requests to Backend
  • Learn to Store Sold Products Record into the Database for Further Processing
  • User Profile and Update Ability
  • Learn to implement Order Management System by Admin
  • Learn to Deploy your app to Digital Ocean's Cloud Servers
  • Learn to add a Custom Domain name to your app
  • Learn to use Cloudflare's CDN to serve your app (for speed)
  • Learn to use Cloudflare's free SSL to secure your app

Course content

22 sections • 160 lectures

Introduction 3 lectures

Course introduction Preview 01:59

Are you ready for this course? Preview 04:15

Course roadmap (optional) Preview 09:50

Node - Project Setup 8 lectures

Download source code for all the lectures from Github Preview 00:35

Express server Preview 09:03

Using MongoDB Atlas Preview 01:42

Signup with MongoDB Atlas Preview 02:31

Resources to install MongoDB and Robo3T (optional) Preview 00:15

Connecting to MongoDB Preview 03:21

Routes Preview 04:45

Controllers Preview 04:52

Node - User Signup and Signin 11 lectures

User schema Preview 05:41

Virtual fields and methods Preview 05:19

User signup Preview 05:59

Using Postman to signup user Preview 05:14

Error handler method and UUID solution Preview 00:34

Friendly error message Preview 04:43

Using the right version of express-validator for the next lecture Preview 00:24

Using express validator Preview 09:16

User signin using JWT Preview 10:07

Using Postman to signin user Preview 04:12

User signout Preview 02:02

Node - Auth and Admin Middlewares 5 lectures

Express JWT Error - Algorithms should be set (for next lecture) Preview 00:14

Require signin middleware Preview 03:16

Renaming from user to auth Preview 02:39

User by id middleware Preview 11:24

Auth and admin middlewares Preview 07:49

Node - Product and Categories 11 lectures

Category model route and controller Preview 06:07

Creating category using postman Preview 04:48

Product model Preview 06:17

Create product with file upload Preview 09:25

Creating product using postman Preview 06:59

Create product validation Preview 06:12

Product by id middleware and single product Preview 07:25

Product delete Preview 06:36

Product update Preview 07:09

Category by id and single category Preview 05:09

Category update delete and get all Preview 09:46

Node - Sending Products with Queries 9 lectures

Products by sell and arrival on request query params Preview 09:38

Fetch products based on request query using postman Preview 05:14

Related products Preview 07:31

List product categories Preview 03:21

Products by search source code Preview 00:37

List products by search Preview 07:32

Send product photo Preview 03:45

User profile read and update Preview 07:32

Installing CORS Preview 01:48

React - React Hooks (Optional) 11 lectures

Get up and running with React Hooks Preview 00:19

React hooks Preview 01:30

Why we used class components? Preview 00:50

Counter app using class Preview 05:44

useState hook Preview 03:48

useEffect hook Preview 06:00

News app using hooks Preview 06:38

Search news on input change Preview 05:55

Controlling useEffect's behaviour Preview 04:43

Loading Preview 03:10

Code Organization Preview 04:23

React - React App with Pages and Layouts 5 lectures

Create react app Preview 02:53

Routing pages Preview 08:37

Menu and active links Preview 09:27

Shared layout component Preview 07:41

Environment variables Preview 03:08

React - User Signup and Signin 8 lectures

Signup form handle change Preview 10:20

User signup Preview 10:04

User signup success and error Preview 09:16

Code refactoring - Signup Preview 03:08

User signin Preview 08:21

Save user and token in local storage Preview 05:11

User signout Preview 05:24

Show and hide signin signout links conditionally Preview 06:21

React - Private and Admin Route with User Dashboard 5 lectures

Private route for authenticated users only Preview 08:12

User dashboard Preview 07:41

Links on user dashboard Preview 05:13

Admin dashboard Preview 02:58

Private route for admin Preview 08:05

React - Categories and Products 11 lectures

Add category component Preview 10:26

Category create success and error Preview 09:54

Create product part one Preview 04:18

Create product part two Preview 19:13

Create product part three Preview 07:12

Create product with categories Preview 13:12

Products by arrival and sell Preview 10:04

Show products in card Preview 07:37

Show product image Preview 06:25

Jumbotron animation css source code Preview 00:22

Styling buttons and jumbotron Preview 04:33

React - Shop Page with Search Filter by Category and Price Range 12 lectures

Shop page Preview 03:29

Get categories in shop page Preview 03:09

Show categories in shop sidebar Preview 05:26

Handle categories toggle Preview 07:33

Passing categories filter to parent component Preview 04:29

Set filters with category Preview 04:48

Fixed price range Preview 04:41

Radio buttons for price range Preview 07:24

Filter with price range Preview 07:03

Show products by filter on shop page Preview 11:23

Pass products to card component Preview 05:02

Load more button Preview 06:23

React - Products Search 5 lectures

Search component Preview 06:11

Search form Preview 09:10

Implementing search Preview 09:54

Backend implementation of search Preview 11:37

Search message to users Preview 04:56

React - Product Page with Related Products 4 lectures

Single product component Preview 09:07

Reuse card for single product Preview 10:22

Product detail on single product page Preview 10:08

Show related products Preview 09:00

React - Cart CRUD with LocalStorage 8 lectures

Solution to potential error on the next lecture (Add to cart) Preview 04:50

Add to cart Preview 13:24

Cart items total in menu Preview 05:05

Show products in cart page Preview 10:00

Conditionally show hide add to cart Preview 02:56

Product quantity update in cart Preview 11:44

Remove product from cart Preview 07:13

Cart total Preview 09:09

Payment Gateway (Credit Card and PayPal) with Braintree 10 lectures

Braintree as payment gateway Preview 03:39

Signup to braintree Preview 03:59

Braintree setup backend Preview 09:55

Braintree setup frontend Preview 12:35

Handling payment frontend Preview 08:16

Processing payment backend Preview 03:44

Successful transaction Preview 10:37

Empty cart after successful purchase Preview 03:18

Activate paypal payment Preview 05:43

Steps to create paypal sandbox account Preview 05:36

Orders 14 lectures

Order routes and controller setup - Backend Preview 03:27

Create order - Frontend Preview 06:36

Order and CartItem model source code Preview 00:22

Save orders in the database Preview 11:13

Save delivery address of orders Preview 02:14

Push orders to user's purchase history Preview 07:32

Update sold products quantity Preview 06:55

List all orders for admin Preview 03:47

Fetch all orders for admin Preview 07:42

Loop through orders Preview 08:54

Show product details of each order Preview 05:19

enum status values of each order Preview 10:16

Find order by id and update order status Preview 06:19

Update order status by admin Preview 04:31

User Profile 6 lectures

User profile update methods Preview 09:40

Get user info for profile update Preview 08:23

User profile update Preview 10:42

User purchase history - Backend Preview 03:12

User Purchase history function source code Preview 00:14

User purchase history - Frontend Preview 11:12

Manage Orders and Products by Admin 5 lectures

Manage products for admin Preview 03:53

Product CRUD requests Preview 05:57

Products list and delete single product Preview 09:43

Get all products for admin CRUD Preview 03:43

Product Update Preview 15:56

Deployment, Domain, CDN and Free SSL 7 lectures

Code Snippets Preview 00:41

Deploy to Digital Ocean Part 1 Preview 07:20

Deploy to Digital Ocean Part 2 Preview 12:08

Update user role to Admin in production Preview 01:57

Fully functioning Ecommerce app in production Preview 03:03

Adding a Domain name Preview 03:02

Using Cloudflare's CDN and free SSL for our app Preview 02:48

Further Improvements 1 lectures

Email alert to admin and buyer Preview 01:41

BONUS LECTURES 1 lectures

10 Full Stack Course That Will Change Your Life Preview 00:28