MERN eCommerce from Scratch

MERN eCommerce from Scratch

by Brad Traversy
Released June 2023
Publisher(s): Packt Publishing
ISBN: 9781801077545

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

Welcome to our comprehensive course, which will cover all the essential topics and techniques you need to know to create a robust and scalable eCommerce application. We will begin by exploring the fundamentals of React, focusing on functional components and hooks. We will cover topics such as component state, props, and lifecycle methods, allowing you to build dynamic and interactive user interfaces.

Next, we will dive into React Router, a popular routing library for React applications. You will learn how to handle navigation, create dynamic routes, and pass parameters between different components. To enhance the visual appeal and responsiveness of your application, we will introduce React-Bootstrap, a versatile UI library. Managing the global state of your application is a critical aspect of building complex projects. We will introduce you to Redux, a popular state management library, and guide you through the process of integrating it into your eCommerce platform. You will learn about actions, reducers, and the Redux store, enabling you to manage the application’s state efficiently.

You will learn how to handle routes, perform CRUD operations, and implement authentication and authorization mechanisms. You will integrate MongoDB, a popular NoSQL database, using the Mongoose Object Data Modeling (ODM) library. We will cover JWT authentication (JSON web tokens) with HTTP-Only cookies, providing a robust authentication mechanism to protect your users’ sensitive data.

By the end of this course, you will have gained a comprehensive understanding of building a full-stack eCommerce platform from scratch.

What You Will Learn

  • Explore the React-Bootstrap UI library
  • Learn to structure components
  • Manage global state with Redux (actions and reducers)
  • Create an extensive backend with Express
  • Learn JWT authentication HTTP-Only cookie
  • Create custom authentication middleware

Audience

This course is designed for full-stack web developers who are interested in learning the MERN stack (MongoDB, Express, React, and Node.js) by building a real-world application. Whether you are a beginner looking to gain hands-on experience or an experienced developer seeking to expand your skill set, this course will provide you with the knowledge and practical skills needed to build a robust and scalable web application.

About The Author

Brad Traversy: Brad Traversy has been programming for around 12 years and teaching for almost 5 years. He is the owner of Traversy Media, which is a successful web development YouTube channel and specializes in everything from HTML5 to front-end frameworks such as Angular as well as server-side technologies such as Node.js, PHP, and Python. Brad has mastered explaining overly complex topics in a simple manner that is understandable. Invest in your knowledge by watching Brad’s courses.

Table of contents

  1. Chapter 1 : Introduction
    1. Welcome to the Course
    2. Course Project Introduction
    3. Course Code Repo
    4. Getting Set Up
  2. Chapter 2 : Starting the Frontend
    1. React Setup and Git Initialize
    2. Header and Footer Components
    3. Custom Bootstrap Theme
    4. List Products
    5. Implement React Router
    6. Rating Component
    7. Product Details Page
  3. Chapter 3 : Serving and Fetching Data
    1. Full-Stack Workflow and Explanation
    2. Express Server and Initial Product Routes
    3. Nodemon and Concurrently
    4. Environment Variables
    5. Fetch Products
  4. Chapter 4 : Starting MongoDB and Mongoose
    1. MongoDB Atlas Setup
    2. MongoDB Compass Setup
    3. Connect with Mongoose
    4. Modeling Our Data
    5. Prepare Sample Data
    6. Seeding Sample Data
    7. Getting Started with Postman
    8. Get Products from Database
    9. Custom Error Middleware
    10. Product Controller
  5. Chapter 5 : Redux Toolkit Setup and State Management
    1. Redux and State Overview
    2. Redux Store and API Slice
    3. Products API Slice and Get Products Endpoint
    4. Get Product Details Endpoint Challenge
    5. Loader and Message Components
  6. Chapter 6 : Shopping Cart Functionality
    1. Cart Slice and Reducer
    2. Add to Cart Function
    3. Qty and Add to Cart Handler
    4. Cart Utils File
    5. Item Count In Header
    6. Cart Screen
    7. Remove from Cart
  7. Chapter 7 : Backend Authentication
    1. User Routes and Controller
    2. User Email and Password Validation
    3. How Do JSON Web Tokens Work?
    4. JWT HTTP-Only Cookie
    5. Auth Middleware and Endpoint
    6. Logout User and Clear Cookie
    7. User Register Endpoint and Encryption
    8. User Profile Endpoints
  8. Chapter 8 : Frontend Authentication
    1. Auth and User API Slice
    2. Login Screen
    3. Login Functionality
    4. User Logout
    5. User Registration
  9. Chapter 9 : Checkout Process - Part 1
    1. Shipping Screen
    2. Private Routes
    3. Checkout Steps Component
    4. Payment Method
    5. Order Routes and Controller
    6. Create and Get Orders
    7. Order API Slice and Start Order Screen
    8. Creating an Order
  10. Chapter 10 : Checkout Process - Part 2
    1. Order Page
    2. PayPal Setup and Order Paid
    3. React-PayPal Integration
    4. PayPal Buttons
    5. User Profile and Update
    6. Display Order History
  11. Chapter 11 : Admin Functionality
    1. Admin Route Component
    2. List Orders for Admin
    3. Deliver Order Status
    4. List Products for Admin
    5. Creating Products
    6. Edit Product
    7. Update Product Bug Fix
    8. Multer and Image Upload Endpoint
    9. Upload Product Image - Frontend
    10. Delete Products
    11. Backend User Routes
    12. List Users for Admin
    13. Delete Users
    14. Update Users
  12. Chapter 12 : Reviews, Search, and More
    1. Create Reviews - Backend
    2. Create Reviews - Frontend
    3. Paginate Products
    4. Paginate Component
    5. Search Products
    6. Search Box Component
    7. Product Carousel
    8. Page Titles
  13. Chapter 13 : Deploy to Production
    1. Prepare for Production
    2. Deploy to Render
    3. Add Server IP to MongoDB Atlas
    4. Adding a Custom Domain
    5. Wrap Up

Product information

  • Title: MERN eCommerce from Scratch
  • Author(s): Brad Traversy
  • Release date: June 2023
  • Publisher(s): Packt Publishing
  • ISBN: 9781801077545