MERN E-commerce from Scratch

MERN E-commerce from Scratch

by Brad Traversy
Released December 2020
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

Grasp the concepts of React, Redux, Express, and MongoDB, and learn to build an e-commerce application from scratch

About This Video

  • Get to grips with React components and libraries
  • Learn how to connect your application to a secure database
  • Apply your learnings to build a fully functional e-commerce application

In Detail

Do you want to build your own e-commerce applications, such as eBay, Amazon, and Etsy, but not sure where to start? Do not worry, this course will help you to get started and teach you how to build a fully functional e-commerce application with the MERN stack.

The course starts by highlighting the learning objectives and explaining the setup process of React. Next, you will become familiar with the concepts such as functional components, hooks, and routers that will help you to build the application's user interface. Once the front-end is ready, you will learn how to serve and fetch data from the Express and connect your application to a MongoDB database and implement Redux for state management. Moving along, you will learn to add a shopping cart to the application by integrating PayPal API and create a custom authentication middleware to authenticate the users. Next, you will learn to build a system for rating and searching the products and learn how to create a carousel for displaying the products. Toward the end, you will learn how to deploy the application to Heroku.

By the end of this course, you will have developed all the key skills needed to build a real-world e-commerce platform using React, Redux, Express, and MongoDB.

Who this book is for

If you are a full-stack web developer or a software engineer, who wants to learn MERN (MongoDB, Express, React, and Node) to build powerful and real-world e-commerce applications, this course is for you.

Publisher resources

Download Example Code

Table of contents

  1. Chapter 1 : Introduction
    1. Welcome to the Course
    2. ProShop Project Demo
    3. Resources and Environment
  2. Chapter 2 : Starting the Front-end
    1. Setting up React and Initializing Git
    2. React-Bootstrap Setup, Header and Footer Components
    3. HomeScreen Product Listing
    4. Rating Component
    5. Implementing React Router
    6. Product Details Screen
  3. Chapter 3 : Serving and Fetching Data from an Express
    1. Front-end/Back-end Workflow and Explanation
    2. Serving Products - Back-end Routes
    3. Fetching Products from React (useEffect)
    4. Nodemon and Concurrently Setup
    5. Environment Variables
    6. ECMAScript (ES) Modules in Node.js
  4. Chapter 4 : Getting Started with MongoDB
    1. MongoDB Atlas and Compass Setup
    2. Connecting to the Database
    3. Adding Colors to the Console (Optional)
    4. Modeling our Data
    5. Preparing Sample Data
    6. Data Seed Script
    7. Fetching Products from the Database
    8. Getting Started with Postman
    9. Custom Error Handling
  5. Chapter 5 : Implementing Redux for State Management
    1. An Overview of Redux
    2. Creating a Redux Store
    3. Product List Reducer and Action
    4. Bringing Redux State into HomeScreen - useDispatch and useSelector
    5. Message and Loader Components
    6. Product Details Reducer and Action
  6. Chapter 6 : Adding the Shopping Cart
    1. Quantity Select and Add to Cart Button
    2. Cart Reducer and Add to Cart Action
    3. Add to Cart Functionality
    4. Cart Screen
    5. Remove Items from the Cart
  7. Chapter 7 : Back-end User Authentication
    1. Clean up using Controllers
    2. User Authentication Endpoint
    3. JASON Web Token (JWT)
    4. Generate a JSON Web Token (JWT)
    5. Custom Authentication Middleware
    6. Saving the Token in Postman
    7. User Registration and Password Encryption
  8. Chapter 8 : Front-end User Authentication and Profile
    1. User Login Reducer and Action
    2. User Login Screen and Functionality
    3. Show the User in Navbar and Logout
    4. User Register Reducer, Action, and Screen
    5. Update Profile Endpoint
    6. Profile Screen and Getting User Details
    7. Updating User Profile
  9. Chapter 9 : Checkout Process - Part 1
    1. Shipping Screen and Save Address
    2. Checkout Steps Component
    3. Payment Screen and Save Payment Method
    4. Place Order Screen
    5. Order Controller and Route
    6. Creating an Order
  10. Chapter 10 : Checkout Process - Part 2
    1. Getting an Order by ID Endpoint
    2. Order Details Reducer and Action
    3. Order Screen
    4. Updating the Paid Endpoint
    5. Order Pay Reducer and Action
    6. Adding PayPal Payments
    7. Showing Orders on the Profile
    8. User Details and Orders Reset
  11. Chapter 11 : Admin Screens - Part 1
    1. Admin Middleware and Getting Users Endpoint
    2. Admin User List
    3. Admin Screen Access Security
    4. Deleting the Admin User
    5. Getting a User by ID and Updating User Endpoints
    6. User Edit Screen and Getting User Details
    7. Updating the User Functionality
  12. Chapter 12 : Date Admin Screens - Part 2
    1. Admin Product List
    2. Deleting Admin Products
    3. Creating and Updating Product Endpoints
    4. Creating an Admin Product
    5. Editing the Product Screen
    6. Updating an Admin Product
    7. Image Upload Config and Endpoint
    8. Front-end Image Upload
    9. Admin Order List
    10. Marking an Order as Delivered
  13. Chapter 13 : Product Reviews, Search, and More
    1. Morgan and Creating Review Endpoint
    2. Front-end Product Reviews
    3. Product Search
    4. Product Pagination
    5. Creating a Products Carousel
    6. Custom Page Titles and Meta
  14. Chapter 14 : Application Deployment
    1. Preparing for Deployment
    2. Deploying to Heroku
  15. Chapter 15 : Bug Fixes
    1. Bug Fix: Updating the Navbar Name

Product information

  • Title: MERN E-commerce from Scratch
  • Author(s): Brad Traversy
  • Release date: December 2020
  • Publisher(s): Packt Publishing
  • ISBN: 9781801077545