MERN STACK NODE API REACT ECommerce with 116 HowTos

MERN STACK NODE API REACT ECommerce with 116 HowTos

What you’ll learn

React Web App Development
NodeJs API Development
Understand E-commerce Fundamentals
Implement User Cart on Your Own
Write Functional React Components
Payment Integration (Credit Card, PayPal) using Braintree – A PayPal Company
Authentication, Authorization and Protecting Routes (Back to Front)
Dedicated Shop Page for Advance Search based on Category and Price Range
Products and Category CRUD (Create, Read, Update, Delete)
Image Preview and Upload
Products Search Feature in Navigation Menu
Using React Context as Global State
Using Local Storage to Persist Data
Admin and User Dashboard
Load More Pagination Feature
Products Quantity and Sold Quantity Update on Each Sale
Order Management by Admin
Email Notification to Users
Deployment to Heroku Cloud

Requirements

Basic Understanding of JavaScript
Basic Understanding of React
Basic Understanding of NodeJs

Description

A FullStack E-commerce App is one of the most popular project for most developers. Everything you learn building an E-commerce project will help you build many other full stack projects because they all share the same concept. Plus, you learn to implement Payment System which is vital to E-commerce apps any many other apps that has some type of monetization system in place. This is one of the main reason why E-commerce based courses are some of the most popular courses here on Udemy.Why would you want to enroll into this course?In this course, I have proved that E-commerce apps do not have to be overly complicated. You will be surprised how easy it is to build such rich app. With just the basic knowledge of React and Node, you will be able to build incredible apps of any kind. What you need is an effective way of learning complex topics in easy, practical way which I have provided in this course.Why yet another E-commerce course?I already have two E-commerce courses here on Udemy. So why create another one? First of all those existing E-commerce apps are very different in terms of functionalities and extra features. Another reason is the timing. The technology changes at rapid speed. The packages uses last year to create apps are no longer the same this year. That makes it very hard for new students to follow along. Besides E-commerce is one of the most popular project based course here in Udemy. So I had to make another one to make it easier for new developers. There is a lot of improvements in this course, the steps are much easier and straight forward. The code is cleaner and easier to understand.Is this course suitable for you?Yes, If you already know the basics of JavaScript, React and NodeJs. If not, then do not worry. Checkout the first few videos of this course for detailed instructions on how to make yourself ready to take on this project. Once you know the basics, you need more and more practice and I can not think of any other project than building E-commerce app from absolute scratch. The amount of knowledge you will gain in this course will be amazing. You will be able to start and successfully build any type of full stack app on your own after completing this course.What will you learn in this course?There is so much to learn. In short, you will learn to build React Web App that interacts with NodeJs API. Your app will be fully protected with the Authentication, Authorization and Protected Routes. With hundreds of how-to solutions, you will be amazed at how much you learn in one single course. Each line of code is explained and the clarity of code makes it an absolute joy to build this project.What makes this course special?This is the only course where you will learn well over hundreds of how-to solutions. All that in one single course, in one single project. With the beautiful workflow of building an entire E-commerce app from absolute scratch, adding features one after another, the understanding will flow into your brain in a natural way. With hundreds of how-to concepts covered throughout the building process, you will naturally get better at each exercise and implementation makes a lot of sense without any confusion.What are some of the course highlights?There are so many exciting features covered in this one course, you will be blown away by excitement and joy. Here are some of the exciting features you will learn to add to your web development skill set:Creating, reading, updating and deleting products and categoriesUploading imagesUsing custom product card components to display productsAdvance searching and filtering of productsProducts based on categoriesSorting products by created date and sold quantityProduct in-stock/out-of-stock, sold quantity update etcView product with relative products (suggestive selling)User cart and orders history Admin and user dashboardsOrder management by adminEmail notification to users on order status changeProtected routes for logged-in and admin usersBraintree Payment System (Credit Card and PayPal)Role based accessDeployment to heroku cloud116 How-to’s solutionsand lots more…Join this incredible full stack course that guides you on how to build a real E-commerce app from absolute scratch with each line of code explained for you.Experience the best learning experience with me Ryan while we build this beautiful project from the very beginning to live running live in Heroku cloud servers.

Overview

Section 1: Project Overview and prerequisite

Lecture 1 Project overview by user

Lecture 2 Project overview by admin

Lecture 3 Are you ready for this course

Lecture 4 Download Source Code

Section 2: NodeJs – API Setup

Lecture 5 How to initialize your project with NPM

Lecture 6 How to create express server?

Lecture 7 How to continuously run express server using nodemon

Lecture 8 How to use import export in NodeJs

Lecture 9 How to use ENV and gitignore files in NodeJs

Section 3: NodeJs – Connect to MongoDB

Lecture 10 How to connect to MongoDB locally

Lecture 11 How to use mongo atlas as database in the cloud

Section 4: NodeJs – Route, Controller and Modal

Lecture 12 Routes and middlewares concept explained

Lecture 13 How to use controller functions

Lecture 14 How to create mongoose model using schema

Section 5: NodeJs – User Authentication

Lecture 15 How to use bcrypt to hash and compare password

Lecture 16 How to use morgan as a middleware to log request endpoints

Lecture 17 How to use Postman to test NodeJs API

Lecture 18 How to save data in MongoDB

Lecture 19 How to register user with validation and error responses

Lecture 20 How to generate JWT (json web token)

Lecture 21 How to login user using compare password

Section 6: NodeJs – User Authorization and Route Protection

Lecture 22 How to send authorization token in HTTP request headers

Lecture 23 How to protect routes using JWT verify

Lecture 24 How to protect routes for admin users only using isAdmin middleware

Section 7: NodeJS – Category CRUD and Postman

Lecture 25 How to create category model

Lecture 26 How to make a POST request with JWT token in request headers and body

Lecture 27 How to create a category and save in MongoDB

Lecture 28 Creating category CRUD routes

Lecture 29 How to do CRUD with NodeJs and MongoDB

Lecture 30 How to test CRUD API endpoints using Postman

Section 8: NodeJs – Product CRUD and Image Upload with FormData

Lecture 31 How to write product schema to create product model

Lecture 32 Creating product using JSON data vs form data

Lecture 33 How to handle form data with image upload and apply validation

Lecture 34 How to save a product in MongoDB

Lecture 35 How to send a list of products as JSON response

Lecture 36 How to fetch single product from MongoDB

Lecture 37 How to send photo for each product

Lecture 38 How to delete a product from MongoDB

Lecture 39 How to update product in MongoDB

Section 9: React – Project Setup, Pages, Routing and Styling with Bootstrap

Lecture 40 How to create a new React project

Lecture 41 How to create pages in React

Lecture 42 How to add routing system to React app

Lecture 43 How to use Bootstrap CSS in React app

Lecture 44 How to create navigation menu using Bootstrap 5

Lecture 45 How to create a Jumbotron in Bootstrap 5

Section 10: React – React Components, Hooks, Forms, Axios and Toast Notifications

Lecture 46 How to make reusable components in React using props

Lecture 47 How to use useState hook in React to store user input

Lecture 48 How to create a user registration form in React

Lecture 49 Making API request using Axios

Lecture 50 How to inspect API request error messages in React

Lecture 51 How to resolve CORS issue and show error messages using Toast notifications

Lecture 52 How to create a working login page in React

Section 11: React – Context and Local Storage

Lecture 53 How to create context and access it’s value in React

Lecture 54 Saving user login response in context

Lecture 55 Preserve the state on page reload using local storage

Section 12: React – Redirects, Private Route and Protecting Pages

Lecture 56 How to redirect user in React

Lecture 57 How to conditionally show and hide navigation links

Lecture 58 User dashboard page

Lecture 59 How to protect pages using private route in React using react router 6

Lecture 60 How to delay the redirect using setInterval

Lecture 61 How to show loading indicator

Lecture 62 How to protect routes based on server response

Section 13: React – Axios Configuration and Role Based Rediercts

Lecture 63 How to configure Axios with base url and token

Lecture 64 How to create 404 page not found in React

Lecture 65 How to take user to intended page after login

Lecture 66 How to create role based routing with dropdown option

Section 14: React – Admin Dashboard, Sidebar and Access Control

Lecture 67 Create admin dashboard page

Lecture 68 How to restrict access to admin user only

Lecture 69 How to create admin sidebar menu

Lecture 70 Admin pages with shared sidebar menu

Lecture 71 User pages with shared sidebar menu

Section 15: React – Categories CRUD

Lecture 72 How to make Axios POST request to create category from React app

Lecture 73 How to display all categories in React

Lecture 74 How to move code to components for reusability

Lecture 75 How to use Ant design Modal to update category

Lecture 76 How to make Axios PUT request to update category

Lecture 77 How to make Axios DELETE request from React app

Section 16: React – Image Upload and Searchable Dropdown

Lecture 78 How to use searchable Select dropdown to show categories list

Lecture 79 How to select image files to upload in React

Lecture 80 How to show image preview of uploading file in React

Section 17: React – Products CRUD

Lecture 81 How to build a form to create a product

Lecture 82 How to post form data to create product with image

Lecture 83 How to show list of products for admin

Lecture 84 How to render list of products in Bootstrap cards

Lecture 85 How to pre-populate product data in product update form

Lecture 86 How to make Axios PUT request to update product

Lecture 87 Fixing update product issues related to photo and shipping fields

Lecture 88 How to make Axios DELETE request from React

Lecture 89 Error handling: Cannot set headers after they are sent to client

Section 18: React – Sorting Products, Responsive Layout, Product Card and Jumbotron

Lecture 90 How to sort products based on created date and sold

Lecture 91 How to create 2 column responsive layout using Bootstrap

Lecture 92 How to use reusable product card component and display responsive image

Lecture 93 How to add buttons and hover effects to product card

Lecture 94 How to use ribbons to display product info in cards

Lecture 95 How to format product price based on local currency

Lecture 96 Jumbotron color animation CSS

Lecture 97 How to create animated background color for Jumbotron

Section 19: Shop Page based on Categories and Price Range

Lecture 98 Shop page with the list of products

Lecture 99 How to show filter by categories option in checkbox

Lecture 100 How to show filter by price range option as radio buttons

Lecture 101 How to find products based on categories and price range filtering options

Lecture 102 How to render products based on filtering options in react

Lecture 103 How to add reset filtering options in react

Section 20: Load More Pagination

Lecture 104 How to create paginated products endpoint in server

Lecture 105 How to add load more feature in React

Section 21: Search and Display Products

Lecture 106 How to put search form in navigation menu

Lecture 107 How to create search component with state to make API request

Lecture 108 How to create MongoDB to get search results based on multiple properties

Lecture 109 How to replace local state with context in React

Lecture 110 How to display search results with search input in navigation menu

Section 22: Single Product View

Lecture 111 How to create single product view page

Lecture 112 Display product in a single product view page

Lecture 113 How to use React icons

Lecture 114 Showing additional product information

Lecture 115 How to display related products in React E-commerce

Lecture 116 Display related products in product card

Section 23: Categories View, Custom Hook and Products Based on Category

Lecture 117 How to create your own custom hook to fetch data

Lecture 118 How to show categories list in dropdown menu

Lecture 119 How to show list of categories on a page

Lecture 120 Create single category view page

Lecture 121 How to display products by category

Section 24: Cart Context, Add to Cart and Manage Cart Items

Lecture 122 How to create cart context

Lecture 123 How to implement add to cart feature

Lecture 124 How to make sticky top menu

Lecture 125 Create cart page

Lecture 126 How to display products in the cart page

Lecture 127 How to remove items from the cart

Lecture 128 Persist cart on page reload

Lecture 129 How to show cart total

Section 25: User Profile Update, Delivery Address and Intended Page Redirect

Lecture 130 How to create a user profile update page in React

Lecture 131 How to implement user profile update including address

Lecture 132 Conditional rendering for delivery address

Lecture 133 Redirect user to cart page after login

Section 26: Payment Integration (Credit Cart, PayPal) Back to Front

Lecture 134 Signup to Braintree payment

Lecture 135 Braintree functions to generate token and process payment

Lecture 136 Move code from cart page to components

Lecture 137 Show Braintree Web Drop In UI in React

Lecture 138 Creating PayPal sandbox account

Lecture 139 Get payment method nonce on buy button click

Lecture 140 How to process payment with Braintree

Lecture 141 How to charge exact amount based on cart total

Lecture 142 Create a new order on successful payment

Lecture 143 How to add loading state to disable buy button

Section 27: User Orders

Lecture 144 How to get logged-in user’s all orders

Lecture 145 Display order status in a table

Lecture 146 How to display user order’s each product

Lecture 147 How to decrement stock each time a product is sold

Section 28: Order Management by Admin

Lecture 148 Display list of orders for admin

Lecture 149 How to use Ant design’s Select component

Lecture 150 How to update order status by admin

Section 29: Email Notifications

Lecture 151 Sign in to Sendgrid to get API keys for sending emails

Lecture 152 How to send email on order status change

Lecture 153 Receive order status update email

Section 30: Deployment

Lecture 154 Deploy NodeJs API to Heroku Part 1

Lecture 155 Deploy NodeJs API to Heroku Part 2

Lecture 156 Deploy React Web App to Heroku

Lecture 157 Deploy to Digital Ocean Cloud Servers

Section 31: Bonus

Lecture 158 Other courses you may like

Lecture 159 Join my Discord server

JavaScript Developers learning to Build Real Apps with React,JavaScript Developers learning to Build NodeJs API,JavaScript Developers learning to Build E-commerce App with Advance CRUD, Authentication, Authorization, Searching and Filtering

Course Information:

Udemy | English | 22h 33m | 13.34 GB
Created by: Ryan Dhungel

You Can See More Courses in the Developer >> Greetings from CourseDown.com