Learn to build an e-commerce store with .Net, React & Redux

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: Setting up the dev environment

Lecture 3: Course assets and source code

Lecture 4: Getting help

Chapter 2: API Basics

Lecture 1: Section 2 Introduction

Lecture 2: Creating the .Net solution and API project

Lecture 3: Adding VS Code extensions

Lecture 4: What’s in the Web API template

Lecture 5: Creating a new C# class for the Product

Lecture 6: What is Entity Framework

Lecture 7: Adding the DbContext class

Lecture 8: Creating an Entity Framework Migration

Lecture 9: Creating a class to seed data into the database

Lecture 10: Using the Program.cs class to migrate and seed the data on app startup

Lecture 11: Creating an API controller to return a list of products

Lecture 12: Using async methods when querying a database.

Lecture 13: Saving our code into source control

Lecture 14: Summary of section 2

Chapter 3: React Basics

Lecture 1: Section 3 Introduction

Lecture 2: Creating the react application

Lecture 3: What's in the React template

Lecture 4: React component basics

Lecture 5: Using react hooks – useState

Lecture 6: Using react hooks – useEffect

Lecture 7: Adding CORS configuration to the API

Lecture 8: Typescript vs javascript in React

Lecture 9: Adding a Typescript interface for the product

Lecture 10: File and folder organisation

Lecture 11: Adding React components

Lecture 12: Adding the Material UI styling framework

Lecture 13: Adding components for the ProductList and Card

Lecture 14: Installing and using React dev tools

Lecture 15: Adding an AppBar

Lecture 16: Adding cards for our individual products

Lecture 17: Styling the product card

Lecture 18: Using Material UI Theme

Lecture 19: Challenge solution and setting bg color

Lecture 20: Section 3 Summary

Chapter 4: React Router

Lecture 1: Section 4 Introduction

Lecture 2: Setting up React Router

Lecture 3: Adding Nav Links to the AppBar

Lecture 4: Stying the nav bar

Lecture 5: Fetching a product on component load

Lecture 6: Adding the product detail page content

Lecture 7: Summary of section 4

Chapter 5: Error handling

Lecture 1: Section 5 Introduction

Lecture 2: Setting up an error controller

Lecture 3: Adding exception handling middleware

Lecture 4: Centralising the axios requests

Lecture 5: Creating a react component to test the error responses

Lecture 6: Using Axios interceptors

Lecture 7: Adding toast notifications

Lecture 8: Handling validation errors

Lecture 9: Creating a server error component

Lecture 10: Creating a not found component

Lecture 11: Adding a delay and loading indicators to the app

Lecture 12: Using the dotnet debugging tool

Lecture 13: Using the react debugger

Lecture 14: Setting up linting

Lecture 15: Section 5 summary

Chapter 6: Adding the shopping cart feature

Lecture 1: Section 6 introduction

Lecture 2: Creating the basket entity

Lecture 3: EF Relationships

Lecture 4: Create a basket controller

Lecture 5: Add basket item endpoint logic

Lecture 6: Using the debugger to check the add item logic

Lecture 7: Shaping the data to return

Lecture 8: Removing an item from the basket

Lecture 9: Using CreatedAtRoute

Lecture 10: Adding the axios methods for the basket

Lecture 11: Creating a basket component

Lecture 12: Styling the basket page with a table

Lecture 13: Using React context to centralise state

Lecture 14: App initialisation – fetching the basket on app start

Lecture 15: Updating the header with the basket item count

Lecture 16: Adding the remove item functionality

Lecture 17: Adding specific loading indicators for the buttons

Lecture 18: Challenge – Basket Summary

Lecture 19: Challenge – Solution

Lecture 20: Updating the product detail component to add items to cart part 1

Lecture 21: Updating the product detail component to add items to cart part 2

Lecture 22: Adding a checkout page

Lecture 23: Section 6 Summary

Chapter 7: Redux

Lecture 1: Section 7 Introduction

Lecture 2: Installing and using Redux

Lecture 3: Redux actions

Lecture 4: Action Creators

Lecture 5: Using Redux Toolkit

Lecture 6: Using redux dev tools

Lecture 7: Creating a basket slice

Lecture 8: Refactoring the app to use the redux store

Lecture 9: Using async functions in redux part 1

Lecture 10: Using async functions in redux part 2