MERN eCommerce From Scratch

MERN eCommerce From Scratch

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 15 Hours | 6.34 GB


Build an eCommerce platform from the ground up with React, Redux, Express & MongoDB

There are a lot of “eCommerce” courses out there, but most use some kind of prebuilt plugin or platform. In this course, we will build a completely customized eCommerce / shopping cart application from scratch with the MERN stack with the following functionality…

  • Full featured shopping cart
  • Product reviews and ratings
  • Top products carousel
  • Product pagination
  • Product search feature
  • User profile with orders
  • Admin product management
  • Admin user managemen
  • Admin Order details page
  • Mark orders as delivered option
  • Checkout process (shipping, payment method, etc)
  • PayPal / credit card integration
  • Custom database seeder script

This is not a documentation-type course. This is a jump in and get your hands dirty course where by the end, you have an actual real-world project to use and put on your portfolio. You will learn the following by completing this course..

  • React with Functional Components & Hooks
  • React router
  • React-Bootstrap UI library
  • How to structure components
  • Component level state & props
  • Managing global state with Redux (Actions & Reducers)
  • Using Redux state in components (useDispatch & useSelector)
  • Creating an extensive back end with Express
  • Working with a MongoDB database and the Mongoose ODM
  • JWT authentication (JSON web tokens)
  • Creating custom authentication middleware
  • Custom error handler
  • Integrating the PayPal API
  • Environment variables
  • Project deployment
  • Much more!

What you’ll learn

  • Build a custom eCommerce platform with React, Redux, Node, Express & MongoDB
  • An actual real-world project built in a linear and progressive manner
  • Full featured shopping cart with PayPal & credit/debit payments
  • Admin area to manage customers, products & orders
  • Product rating & review system
  • Product search, carousel, pagination & more


+ Table of Contents

Introduction
1 Welcome To The Course
2 ProShop Project Demo
3 Resources & Environment

Starting The Front End
4 React Setup & Git Initialize
5 React-Bootstrap Setup, Header & Footer Components
6 HomeScreen Product Listing
7 Rating Component
8 Implementing React Router
9 Product Details Screen

Serving & Fetching Data From Express
10 Front End Back End Workflow & Explanation
11 Serving Products – Back End Routes
12 Fetching Products From React (useEffect)
13 Nodemon & Concurrently Setup
14 Environment Variables
15 ES Modules In Node.js

Getting Started With MongoDB
16 MongoDB Atlas & Compass Setup
17 Connecting To The Database
18 Adding Colors To The Console (Optional)
19 Modeling Our Data
20 Preparing Sample Data
21 Data Seeder Script
22 Fetching Products From The Database
23 Getting Started With Postman
24 Custom Error Handling

Implementing Redux For State Management
25 An Overview Of Redux
26 Create a Redux Store
27 Product List Reducer & Action
28 Bringing Redux State Into HomeScreen – useDispatch & useSelector
29 Message & Loader Components
30 Product Details Reducer & Action

Adding The Shopping Cart
31 Qty Select & Add To Cart Button
32 Cart Reducer & Add To Cart Action
33 Add To Cart Functionality
34 Cart Screen
35 Remove Items From Cart

Back End User Authentication
36 Clean Up By Using Controllers
37 User Authentication Endpoint
38 Brief Explanation of JWT (JSON Web Tokens)
39 Generate a JSON Web Token
40 Custom Authentication Middleware
41 Saving The Token In Postman
42 User Registration & Password Encryption

Front End User Authentication & Profile
43 User Login Reducer & Action
44 User Login Screen & Functionality
45 Show User In Navbar & Logout
46 User Register Reducer, Action & Screen
47 Update Profile Endpoint
48 Profile Screen & Get User Details
49 Update User Profile

Checkout Process – Part 1
50 Shipping Screen & Save Address
51 Checkout Steps Component
52 Payment Screen & Save Payment Method
53 Place Order Screen
54 Order Controller & Route
55 Create Order

Checkout Process – Part 2
56 Get Order by ID Endpoint
57 Order Details Reducer & Action
58 Order Screen
59 Update To Paid Endpoint
60 Order Pay Reducer & Action
61 Adding PayPal Payments
62 Show Orders On Profile
63 User Details & Orders Reset

Admin Screens – Part 1
64 Admin Middleware & Get Users Endpoint
65 Admin User List
66 Admin Screen Access Security
67 Admin User Delete
68 Get User By ID & Update User Endpoints
69 User Edit Screen & Get User Details
70 Update User Functionality

Admin Screens – Part 2
71 Admin Product List
72 Admin Delete Products
73 Create & Update Product Endpoints
74 Admin Create Product
75 Edit Product Screen
76 Admin Update Product
77 Image Upload Config & Endpoint
78 Front End Image Upload
79 Admin Order List
80 Mark Order As Delivered

Product Reviews, Search & More
81 Morgan & Create Review Endpoint
82 Front End Product Reviews
83 Product Search
84 Product Pagination
85 Top Products Carousel
86 Custom Page Titles & Meta

App Deployment
87 Prepare For Deployment
88 Deploy To Heroku