MERN Stack React Node Ecommerce from Scratch to Deployment
MERN Stack React Node Ecommerce from Scratch to Deployment

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

Created by Ryan Dhungel
Language English

MERN Stack React Node Ecommerce from Scratch to Deployment

MERN Stack React Node Ecommerce from Scratch to Deployment
MERN Stack React Node Ecommerce from Scratch to Deployment

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

Created by Ryan Dhungel
Language English
1. Introduction
  • 1. Course introduction 00:01:59
  • 2. Are you ready for this course 00:04:15
  • 3. Course roadmap (optional) 00:09:50
2. Node - Project Setup
  • 1. Download source code for all the lectures from Github .html
  • 2. Express server 00:09:03
  • 3. Using MongoDB Atlas 00:01:42
  • 4. Signup with MongoDB Atlas .html
  • 5. Resources to install MongoDB and Robo3T (optional) .html
  • 6. Connecting to MongoDB 00:03:21
  • 7. Routes 00:04:45
  • 8. Controllers 00:04:52
3. Node - User Signup and Signin
  • 1. User schema 00:05:41
  • 2. Virtual fields and methods 00:05:19
  • 3. User signup 00:05:59
  • 4. Using Postman to signup user 00:05:14
  • 5. Error handler method and UUID solution .html
  • 6. Friendly error message 00:04:43
  • 7. Using the right version of express-validator for the next lecture .html
  • 8. Using express validator 00:09:16
  • 9. User signin using JWT 00:10:07
  • 10. Using Postman to signin user 00:04:12
  • 11. User signout 00:02:02
4. Node - Auth and Admin Middlewares
  • 1. Express JWT Error - Algorithms should be set (for next lecture) .html
  • 2. Require signin middleware 00:03:16
  • 3. Renaming from user to auth 00:02:39
  • 4. User by id middleware 00:11:24
  • 5. Auth and admin middlewares 00:07:49
5. Node - Product and Categories
  • 1. Category model route and controller 00:06:07
  • 2. Creating category using postman 00:04:48
  • 3. Product model 00:06:17
  • 4. Create product with file upload 00:09:25
  • 5. Creating product using postman 00:06:59
  • 6. Create product validation 00:06:12
  • 7. Product by id middleware and single product 00:07:25
  • 8. Product delete 00:06:36
  • 9. Product update 00:07:09
  • 10. Category by id and single category 00:05:09
  • 11. Category update delete and get all 00:09:46
6. Node - Sending Products with Queries
  • 1. Products by sell and arrival on request query params 00:09:38
  • 2. Fetch products based on request query using postman 00:05:14
  • 3. Related products 00:07:31
  • 4. List product categories 00:03:21
  • 5. Products by search source code .html
  • 6. List products by search 00:07:32
  • 7. Send product photo 00:03:45
  • 8. User profile read and update 00:07:32
  • 9. Installing CORS 00:01:48
7. React - React Hooks (Optional)
  • 1. Get up and running with React Hooks .html
  • 2. React hooks 00:01:30
  • 3. Why we used class components 00:00:50
  • 4. Counter app using class 00:05:44
  • 5. useState hook 00:03:48
  • 6. useEffect hook 00:06:00
  • 7. News app using hooks 00:06:38
  • 8. Search news on input change 00:05:55
  • 9. Controlling useEffects behaviour 00:04:43
  • 10. Loading 00:03:10
  • 11. Code Organization 00:04:23
8. React - React App with Pages and Layouts
  • 1. Create react app 00:02:53
  • 2. Routing pages 00:08:37
  • 3. Menu and active links 00:09:27
  • 4. Shared layout component 00:07:41
  • 5. Environment variables 00:03:08
9. React - User Signup and Signin
  • 1. Signup form handle change 00:10:20
  • 2. User signup 00:10:04
  • 3. User signup success and error 00:09:16
  • 4. Code refactoring - Signup 00:03:08
  • 5. User signin 00:08:21
  • 6. Save user and token in local storage 00:05:11
  • 7. User signout 00:05:24
  • 8. Show and hide signin signout links conditionally 00:06:21
10. React - Private and Admin Route with User Dashboard
  • 1. Private route for authenticated users only 00:08:12
  • 2. User dashboard 00:07:41
  • 3. Links on user dashboard 00:05:13
  • 4. Admin dashboard 00:02:58
  • 5. Private route for admin 00:08:05
11. React - Categories and Products
  • 1. Add category component 00:10:26
  • 2. Category create success and error 00:09:54
  • 3. Create product part one 00:04:18
  • 4. Create product part two 00:19:13
  • 5. Create product part three 00:07:12
  • 6. Create product with categories 00:13:12
  • 7. Products by arrival and sell 00:10:04
  • 8. Show products in card 00:07:37
  • 9. Show product image 00:06:25
  • 10. Jumbotron animation css source code .html
  • 11. Styling buttons and jumbotron 00:04:33
12. React - Shop Page with Search Filter by Category and Price Range
  • 1. Shop page 00:03:29
  • 2. Get categories in shop page 00:03:09
  • 3. Show categories in shop sidebar 00:05:26
  • 4. Handle categories toggle 00:07:33
  • 5. Passing categories filter to parent component 00:04:29
  • 6. Set filters with category 00:04:48
  • 7. Fixed price range 00:04:41
  • 8. Radio buttons for price range 00:07:24
  • 9. Filter with price range 00:07:03
  • 10. Show products by filter on shop page 00:11:23
  • 11. Pass products to card component 00:05:02
  • 12. Load more button 00:06:23
13. React - Products Search
  • 1. Search component 00:06:11
  • 2. Search form 00:09:10
  • 3. Implementing search 00:09:54
  • 4. Backend implementation of search 00:11:37
  • 5. Search message to users 00:04:56
14. React - Product Page with Related Products
  • 1. Single product component 00:09:07
  • 2. Reuse card for single product 00:10:22
  • 3. Product detail on single product page 00:10:08
  • 4. Show related products 00:09:00
15. React - Cart CRUD with LocalStorage
  • 1. Solution to potential error on the next lecture (Add to cart) .html
  • 2. Add to cart 00:13:24
  • 3. Cart items total in menu 00:05:05
  • 4. Show products in cart page 00:10:00
  • 5. Conditionally show hide add to cart 00:02:56
  • 6. Product quantity update in cart 00:11:44
  • 7. Remove product from cart 00:07:13
  • 8. Cart total 00:09:09
16. Payment Gateway (Credit Card and PayPal) with Braintree
  • 1. Braintree as payment gateway 00:03:39
  • 2. Signup to braintree 00:03:59
  • 3. Braintree setup backend 00:09:55
  • 4. Braintree setup frontend 00:12:35
  • 5. Handling payment frontend 00:08:16
  • 6. Processing payment backend 00:03:44
  • 7. Successful transaction 00:10:37
  • 8. Empty cart after successful purchase 00:03:18
  • 9. Activate paypal payment 00:05:43
  • 10. Steps to create paypal sandbox account 00:05:36
17. Orders
  • 1. Order routes and controller setup - Backend 00:03:27
  • 2. Create order - Frontend 00:06:36
  • 3. Order and CartItem model source code .html
  • 4. Save orders in the database 00:11:13
  • 5. Save delivery address of orders 00:02:14
  • 6. Push orders to users purchase history 00:07:32
  • 7. Update sold products quantity 00:06:55
  • 8. List all orders for admin 00:03:47
  • 9. Fetch all orders for admin 00:07:42
  • 10. Loop through orders 00:08:54
  • 11. Show product details of each order 00:05:19
  • 12. enum status values of each order 00:10:16
  • 13. Find order by id and update order status 00:06:19
  • 14. Update order status by admin 00:04:31
18. User Profile
  • 1. User profile update methods 00:09:40
  • 2. Get user info for profile update 00:08:23
  • 3. User profile update 00:10:42
  • 4. User purchase history - Backend 00:03:12
  • 5. User Purchase history function source code .html
  • 6. User purchase history - Frontend 00:11:12
19. Manage Orders and Products by Admin
  • 1. Manage products for admin 00:03:53
  • 2. Product CRUD requests 00:05:57
  • 3. Products list and delete single product 00:09:43
  • 4. Get all products for admin CRUD 00:03:43
  • 5. Product Update 00:15:56
20. Deployment Domain CDN and Free SSL
  • 1. Code Snippets .html
  • 2. Deploy to Digital Ocean Part 1 00:07:20
  • 3. Deploy to Digital Ocean Part 2 00:12:08
  • 4. Update user role to Admin in production 00:01:57
  • 5. Fully functioning Ecommerce app in production 00:03:03
  • 6. Adding a Domain name 00:03:02
  • 7. Using Cloudflares CDN and free SSL for our app 00:02:48
21. Further Improvements
  • 1. Email alert to admin and buyer .html
22. BONUS LECTURES
  • 1. REFERAL LINKS .html
  • 2. MERN Stack - React Node from Scratch with Social Network Project 00:01:48
  • 3. MERN Stack - React Node NextJs SEO Multi User Blogging Platform 00:03:35
  • 4. MERN Stack - React Node Web Development with Ultimate Authentication 00:05:20