Mô tả

Course Highlights


  1. React Client (Frontend)

  2. Firebase Authentication and Redux

  3. Node MongoDB API (Backend)

  4. Firebase Auth Check (Server side)

  5. User Admin and Protected Routes

  6. Categories CRUD

  7. Sub Categories CRUD

  8. Creating Products with Categories and Sub Categories (Advance)

  9. Multiple Image Uploads with Client Side Resize

  10. Update and Delete Products (Advance)

  11. Displaying Products Pagination and Carousel

  12. Star Rating System

  13. Products based on Categories and Sub Categories

  14. Advance Searching and Filtering (9 Different Ways)

  15. Add to Cart

  16. Checkout

  17. Coupon

  18. Payment with Stripe

  19. Orders

  20. User Dashboard (Purchase History)

  21. PDF/Invoice Download

  22. Admin Dashboard (Order Management)

  23. Wishlist

  24. Cash On Delivery (Cashless order)

  25. Deployment to Digital Ocean Cloud


Project Overview

Master MERN Stack Web Development building Ultimate E-commerce app with React Redux Ant Design Firebase NodeJs and MongoDB. This project will have almost all the features you want to add in any E-commerce app including:

  • Login Registration System

  • Login with email/password and social login (Google)

  • Admin dashboard and order management system

  • Products CRUD with advance features including categories, sub-categories, multiple image uploads etc

  • Plenty of advance searching and filtering options

  • Star rating system

  • Cart functionality with both backend/frontend implementation

  • Checkout with stripe for credit card payments

  • Checkout with cash on delivery (no online payment required)

  • User dashboard with password update, purchase history, Invoice/PDF download etc

  • Deployment to digital ocean cloud

  • Please go through the curriculum to get better understanding of the project

This course project is probably the biggest and most exciting project you have build so far. It is packed with hundreds of tips and tricks that can help you build almost any type of full stack app (not limited to ecommerce).

Master the art of building FullStack/MERN Stack apps by enrolling into this course and never look back. What you are now and what you will become after completing this course is going to be a ground breaking step in your web development career.

You can build the biggest and most complex apps of your dream or as required at your job. Master the stack of all stacks and become the most productive and innovative developer of your team. I welcome you to be a part of this incredible journey.

Bạn sẽ học được gì

Learn to build one of the biggest ecommerce app ever

Hundreds of tips and tricks to build full stack app

Gain the skill for building any type of app (not limited to ecommerce)

Master the art of building frontend app with react and redux

Master the art of building backend api with nodejs

Master the art of building lightning fast full stack / mern stack apps

Integrate firebase for handling authentication

Learn to perform simple to complex mongodb queries using mongoose

Learn ant design (the most popular react UI library)

Stunning layout with bootstrap material css

Complete authentication with social login

Password forgot/reset, confirmation email on signup etc

Integrate redux for global state management

Role based access control for users and admin

Advance CRUD (create read update delete) for products, categories and sub categories

Multiple Image Uploads with Client Side Resize

Pagination

Advance searching and filtering (9 different ways)

Star rating system

Add to cart

Discount coupon code

Credit card payment with stripe

Cash on delivery (no online payment required)

Order management system for admin

Admin dashboard to manage and run ecommerce platform

Add to wishlist

Code splitting

Deployment

Yêu cầu

  • Good understanding of javascript
  • Previous experience of building apps using react and node

Nội dung khoá học

27 sections

Introduction

8 lectures
Live Demo - User and Cart
11:39
Live Demo - Searching and Filtering
06:10
Live Demo - Rating and Admin Dashboard
10:45
Are You Ready for this Course?
11:44
Live demo URL changed
00:11
Building the App Visually
06:15
Are you new to JavaScript React and NodeJs?
00:33
IMPORTANT - Download Source Code Bundle for Each Lectures
00:25

React Client (Frontend)

7 lectures
IMPORTANT - Do this to resolve future errors
01:21
Create React Project
09:00
React router version
00:29
Routes and Pages
13:52
Ant Design Navigation
13:45
Ant Design Icons
10:11
React Router Link
03:20

Firebase Authentication and Redux

16 lectures
Firebase version 9 upgrade guide
01:27
Firebase Setup
05:23
Register Form
12:22
Email Link to Signin
15:08
ENV and Toast Notifications
06:36
Complete Registration Page
11:44
Complete Registration
22:30
Setup Redux
15:40
User in Redux State
11:00
User Logout
08:18
Login Page
12:02
Signin with Email and Password
09:12
Login with Google
08:32
Conditional Rendering
09:17
Forgot Password
21:50
Redirect logged in user
06:24

Node MongoDB API (Backend)

10 lectures
Backend API with Node and MongoDB
01:59
NPM Packages to install
05:49
IMPORTANT - Do this to resolve errors in future
01:00
Mongoose version
00:11
Mongo Atlas or Local Installation
06:26
Server Setup
21:42
Routes
07:02
Routes Autoloading
06:18
Controllers
06:38
User Schema
08:30

Firebase Auth Check (Server side)

3 lectures
Firebase Admin
05:36
Middleware
09:04
Auth Check Middleware
12:53

User Admin and Protected Routes

12 lectures
Create or Update User
15:43
API User Response
15:41
Current User Endpoint
10:17
Role Based Redirect
05:17
Protected User Route
14:21
Redirect Countdown
09:47
Sidebar Nav for User
08:05
Password Update
18:17
Admin Check Middleware
08:31
Admin Route
17:14
Warnings and Cleanup
04:05
What's Next?
01:28

Categories CRUD

14 lectures
Category Schema
06:52
Category Routes
06:02
Category Create
15:41
Category List Read Update Delete
14:58
Category CRUD Requests
06:51
Dynamic Dashboard Link
04:27
Admin Sidebar Nav
10:20
Category Create and List
21:39
Category Render and Delete
15:55
Category Update
21:47
What's Next?
02:57
Code Refactor - Reusable Component
07:09
Search Filter Categories
09:15
Code Refactor - Search Filter
08:35

Sub Categories CRUD

6 lectures
Sub Categories CRUD
09:22
Sub Categories Functions
06:15
Sub Category Create
19:22
Showing Sub Categories and Remove
06:41
Sub Category Update
15:29
What's Next?
03:42

Creating Products with Categories and Sub Categories (Advance)

15 lectures
Product Model
14:20
Product Create Backend
07:18
Create Product Page
08:16
Product Create Form
18:46
Create Product
11:08
Alert and Reload after Product Create
06:42
Product Create Error Message
06:40
GET Endpoint - Products
04:18
Code Refactor
06:44
Create Product with Category
12:57
Sub Categories Endpoint
06:27
List Sub Categories Based on Parent Category
09:49
Sub Categories Props
06:25
Multi Select Ant Design
11:02
Create Product with Sub Categories
09:55

Multiple Image Uploads

7 lectures
How Image Upload Will Work?
02:27
Cloudinary Upload Endpoints
17:09
File Upload Components
10:52
File Resize in React
11:41
Multiple Image Uploads
12:06
Image Preview
06:25
Product Create with Multiple Images
17:55

Update and Delete Products (Advance)

18 lectures
List All Products Endpoint
10:58
Fetch All Products in Admin Dashboard
09:17
Admin Products Card
13:17
Code Organization
06:36
Default Image Ant Icons and Product Description
08:31
Product Delete Endpoint
03:50
Delete A Product
13:52
Product Update Page
08:44
Product Slug from Router
08:00
Get Product on Update Page
08:30
Product Update Component
08:17
Pre Populate Shipping Color and Brand
06:11
Pre Populate Category
15:04
Pre Populate Sub Categories
19:50
Category and Sub Category Sync on Update
23:24
Image Uploads in Product Update
08:15
Product Update Endpoint
08:32
Update A Product
11:52

Displaying Products Pagination and Carousel

18 lectures
Fetch Products in Home Page
06:03
Product Card Component
08:20
Using Ant Design Card
09:20
Typewriter Effect
11:59
Loading Card
16:15
List Product with Sort Order and Limit
08:05
New Arrivals
12:44
Best Sellers
05:30
Get Total Products Count
07:02
List Products Endpoint with Pagination
06:09
New Arrivals Pagination
20:08
Best Sellers Pagination
03:55
View Products Page
11:28
Single Product Component
13:41
Image Carousel
07:44
Default Image
05:15
Product List Items Component
18:03
Tabs
07:40

Star Rating System

11 lectures
Star Rating System Backend
27:31
React Star Rating
08:55
Modal for Rating
14:53
Login to Leave Rating
03:51
Redirect to Intended Page
11:04
API Request with Rating
18:09
Show Users Existing Star Rating
08:25
Show Average Rating
15:23
Show Average Rating in Home Page
09:02
Related Products Backend
11:13
Show Related Products
16:01

Products based on Categories and Sub Categories

5 lectures
Categories List
13:47
Category Home Page
16:11
Category with Products Backend
16:11
Category Page with Products
12:46
Sub Categories with Products
15:24

Advance Searching and Filtering (8 Different Ways)

17 lectures
Introduction to Searching and Filtering
04:59
Search Filter Backend
10:22
Search Redux Setup
17:23
Shop Page
14:26
Search By Text
18:12
Filter By Price Range Backend
07:15
Filter By Price Range Frontend
29:03
Filter By Categories Backend
03:46
Filter By Categories Frontend
34:22
Filter By Star Rating Backend
16:00
Filter By Star Rating Frontend
18:59
Filter By Sub Category Backend
02:59
Filter By Sub Category Frontend
15:13
Filter By Shipping Color and Brand Backend
05:29
Filter By Brands Frontend
14:06
Filter By Colors Frontend
06:28
Filter By Shipping Frontend
09:46

Add to Cart

15 lectures
Introduction to Add To Cart
06:50
Add Product to Local Storage
15:08
Tooltip
05:53
Cart in Redux State
06:48
Dispatch Add To Cart
16:06
Cart Page Setup
05:48
Cart Page Order Summary
13:18
Redirect Back to Cart Page After Login
06:38
Cart Items in Table
13:41
React Modal Image
06:36
Pick A Color in Cart Page
17:24
Quantity Update in Cart
12:21
Remove Products From Cart
09:46
Side Drawer Component
13:47
Cart Items in Side Drawer
19:16

Checkout

10 lectures
Checkout Page Setup
11:44
Save Cart Request
06:54
Cart Model
05:32
Save Cart To Database
21:24
Get User Cart from Database
11:31
Get User Cart in Frontend
07:03
Final Order Summary in Checkout
05:42
Empty Cart
15:45
User Address on Checkout
12:42
Save Address on Checkout
08:34

Coupon

10 lectures
Coupon Schema
05:04
Coupon Routes and Controller Methods
07:13
Create Coupon Page
12:04
Create Coupon
14:27
Coupon List and Delete
13:16
Apply Coupon
09:04
Apply Discount Backend
13:59
Discount Price Response
09:35
Coupon Error and Success Message
07:48
Coupon in Redux
10:50

Payment with Stripe

12 lectures
Stripe Payment Integration - Official Docs
00:06
Stripe Setup Backend
14:55
Stripe Setup Frontend
06:47
Get Help
00:20
Stripe Payment Widget CSS
01:21
Stripe Checkout Component Style Variable
00:10
Stripe Checkout Component
19:03
Successful Payment
13:52
Charging Actual Cart Total
09:50
Charge With Coupon Discount
21:30
Show Discount and Coupon Applied in Frontend
15:10
What's Next After Successful Purchase?
04:25

Orders

5 lectures
Order Schema
07:26
Create Order Backend
06:54
Create Order and Empty Cart Frontend
15:48
Decrement Quantity Increment Sold
11:05
Show Out Of Stock
08:22

User Dashboard (Purchase History)

5 lectures
User Orders Backend
03:45
User Orders in Purchase History Page
08:19
Purchase Orders in Card
06:15
Showing Each Order's Products in Table
08:32
Show Payment Info
11:04

PDF/Invoice Download

5 lectures
Install from NPM
00:05
PDF View and Download Link
11:39
PDF Table Style CSS
00:25
Invoice Component
09:07
Download Invoice as PDF
13:57

Admin Dashboard (Order Management)

4 lectures
Orders Status Update for Admin Backend
07:09
Load All Orders in Admin Dashboard
13:17
Orders with Status Update
22:05
Products Table in Admin Dashboard
03:28

Wishlist

3 lectures
Wishlist Backend
12:55
Wishlist Functions Frontend
06:54
Wishlist Frontend
19:29

Cash On Delivery (Cashless order)

5 lectures
Cash On Delivery
11:22
Create Cash Order or Redirect to Payment Page
12:48
Create Cash Order Backend
17:58
Cash On Delivery System
00:34
Cash Order Success with Coupon and Status of Cash On Delivery
22:49

Deployment

12 lectures
Code Splitting with Lazy and Suspense
10:57
NPM Build using Code Splitting vs No Code Splitting
00:27
Deployment tutorial link (updated)
00:10
Heroku or Digital Ocean
06:46
Admin User Setup and Root Access
12:29
Push Project to Github
04:59
NGINX Configuration
09:46
Running API
06:03
MongoDB Setup
04:25
Running React Frontend
07:13
Resize Droplet with Bigger Memory
05:42
Making User Admin and Trying Deployed App
13:29

Bonus

1 lectures
Other courses you may like
01:00

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.