React – Build a Complete E-Commerce Application Step by Step

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: E-commerce application demo

Lecture 3: About React

Lecture 4: Source Code

Chapter 2: React Basics

Lecture 1: Create React Application

Lecture 2: Function Components and Class Components

Lecture 3: Include Bootstrap CSS, JS and Icons

Lecture 4: Convert HTML to JSX

Lecture 5: Default Export-Import

Lecture 6: Named Export-Import

Lecture 7: Use CSS with JSX

Lecture 8: JavaScript Arrays

Lecture 9: JavaScript Objects

Lecture 10: Component parameters – props

Lecture 11: List elements

Lecture 12: Component State and useState Hook

Lecture 13: Controlled Components

Lecture 14: Delete Components from a List

Lecture 15: Uncontrolled Forms

Lecture 16: Controlled Forms

Lecture 17: Store Data in the Browser – Local Storage

Lecture 18: React Hooks – useEffect Function

Lecture 19: React Hooks – useContext Function

Chapter 3: Demo Projects

Lecture 1: TODO List – Introduction and Setup

Lecture 2: TODO List – Create Form

Lecture 3: TODO List – Create and Render Tasks

Lecture 4: TODO List – Update and Delete Tasks

Lecture 5: TODO List – Save the Tasks in the Browser (Local Storage)

Lecture 6: TODO List – Source Code

Lecture 7: Weather App

Lecture 8: Weather App – Source Code

Chapter 4: E-Commerce Application Setup

Lecture 1: React App and Bootstrap Setup

Lecture 2: Application layout – Navbar and Footer

Lecture 3: React Router – Add BrowserRouter

Lecture 4: React Router – Add Links

Chapter 5: Perform CRUD Operations on Products

Lecture 1: Introduction

Lecture 2: Setup Backend Server

Lecture 3: [IMPORTANT] Required Version of JSON Server

Lecture 4: Read Products – Create the ProductList Component

Lecture 5: Read Products – Fill the Product Table

Lecture 6: Configure Backend Server for File Upload and Data Validation

Lecture 7: Create Products – Create the Form

Lecture 8: Create Products – Submit the Form

Lecture 9: Create Products – Show Server-Side Validation Errors

Lecture 10: Update Products – Create the EditProduct Component

Lecture 11: Update Products – Fill and Submit the Form

Lecture 12: Delete Products

Lecture 13: Read Products – Add Pagination

Lecture 14: Read Products – Add Search Functionality

Lecture 15: Read Products – Add Sort Functionality

Lecture 16: Read Products – Add Sort Arrow

Lecture 17: Home Component – Add Hero Section

Lecture 18: Home Component – Show Products

Lecture 19: Home Component – Add Pagination

Lecture 20: Home Component – Add Filter Functionality

Lecture 21: Home Component – Add Sort Functionality

Lecture 22: ProductDetails Component – Create the Layout

Lecture 23: ProductDetails Component – Read and Render Product Details

Chapter 6: Authentication and Authorization

Lecture 1: Introduction

Lecture 2: Setup JWT Authentication Server

Lecture 3: Create Register and Login Routes

Lecture 4: Create the Register Component

Lecture 5: Create the Login Component

Lecture 6: Store User Credentials in the Application Memory

Lecture 7: Store User Credentials in the Browser (Local Storage)

Lecture 8: User Logout

Lecture 9: Update the Navbar based on user Authentication and Role

Lecture 10: Route Protection Components

Lecture 11: Configure JWT Authentication Server – Enable Authorization

Lecture 12: Send JWT to Create and Update Products

Lecture 13: Send JWT in Delete Requests

Lecture 14: UserProfile – Route Setup

Lecture 15: UserProfile – Create Skeleton

Lecture 16: UserProfile – Show Profile Details

Lecture 17: UserProfile – Update Profile

Lecture 18: UserProfile – Update Password

Lecture 19: UserList – Create the UserList Component

Lecture 20: UserList – Show the List of Users

Lecture 21: UserList – Add Pagination

Lecture 22: UserDetails – Create the UserDetails Component

Lecture 23: UserDetails – Show the User Details