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

Learn to build an e-commerce store with .Net, React & Redux, available at $94.99, has an average rating of 4.58, with 229 lectures, based on 1753 reviews, and has 11518 subscribers.

You will learn about Using .Net for the back end code Using React for the client app or front-end Using Redux for client side state management Using the Material UI styling framework for React Using the TypeScript language Using the C# language Using Entity Framework Using ASPNETCore Identity for authentication This course is ideal for individuals who are Beginner developers who would like to learn about .Net and React to build a real world project. It is particularly useful for Beginner developers who would like to learn about .Net and React to build a real world project.

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

Summary

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

Price: $94.99

Average Rating: 4.58

Number of Lectures: 229

Number of Published Lectures: 228

Number of Curriculum Items: 229

Number of Published Curriculum Objects: 228

Original Price: $199.99

Quality Status: approved

Status: Live

What You Will Learn

Using .Net for the back end code

Using React for the client app or front-end

Using Redux for client side state management

Using the Material UI styling framework for React

Using the TypeScript language

Using the C# language

Using Entity Framework

Using ASPNETCore Identity for authentication

Who Should Attend

Beginner developers who would like to learn about .Net and React to build a real world project.

Target Audiences

Beginner developers who would like to learn about .Net and React to build a real world project.

***The course has been refreshed in February 2023 to use .Net 7, React 18 and React Router 6***

Do you want to learn how to build a real world application using .Net, React and Redux?   In this course we start from nothing and build a proof of concept E-Commerce store using these frameworks/libraries.

In this course we build a complete application from start to finish and every line of code is demonstrated and explained.

Here are some of the things you will learn about in this course:

Setting up the developer environment

Creating a .Net WebAPI application using the dotnet CLI

Creating a client side front-end React single page application for the stores user interface

Using Entity Framework to write code that queries and updates the database

Using ASP.NET Identity for login and registration

Using React Router to navigate between routes on the client

Using Automapper.

Building a great looking UI using Material Design

Making reusable form components using React hook form

Paging, Sorting, Searching and Filtering

Creating orders from the shopping basket

Accepting payments via Stripe using the new EU standards for 3D secure

Publishing the application to Heroku

Many more things as well

Tools you need for this course

In this course all the lessons are demonstrated using Visual Studio Code, a free cross platform code editor.   You can of course use any IDE you like and any Operating system you like as long as it’s Windows, Linux or Mac.   

Is this course for you?

This course is very practical, about 90%+ of the lessons will involve you coding along with me on this project.  If you are the type of person who gets the most out of learning by doing, then this course is definitely for you.   

Important: This course is aimed at beginners but there is an expectation you have written some code before – it is not suitable for those who have never coded before.   

On this course we will build an example E-commerce store, completely from scratch using the DotNet CLI tool and the Create-React-App tool to help us get started.  All you will need to get started is a computer with your favourite operating system, and a passion for learning how to build an application using .Net and React.

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: Whats 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

Instructors

Neil Cummings
Professional freelance software developer

Rating Distribution

1 stars: 12 votes

2 stars: 20 votes

3 stars: 69 votes

4 stars: 432 votes

5 stars: 1220 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!