Danh mục
Development
Web Development Data Storage Git Automation Database Design Web Scraping
Business
Business Analysis Communication Project Management Sales Forecasting Business Strategy Operations Management Human Resources Oil and Gas Industry
Finance & Accounting
IT & Software
Office Productivity
SAP Word Excel PowerPoint Excel VBA SharePoint
Personal Development
Persuasion Notion Workspace Mind Mapping
Design
Design Sketching Typography Game Design Digital Art zBrush 3D Animation
Marketing
SEO Marketing Strategy YouTube Marketing Digital Marketing Facebook Marketing Growth Hacking Twitter Marketing Instagram Marketing
Lifestyle
Beer Brewing Beauty Home Repair Energy Healing Bartending Leather Crafting Makeup Artistry Hypnotherapy
Music
Piano Guitar Singing Music Production Acoustic Guitar Fingerstyle Guitar Music Theory Bass Guitar
Duocmmo Tedu Tin học văn phòng Khoá học miễn phí Tất cả khoá học
Get link khoá học
Trang chủ
Development
Web Development
React JS
Learn to build an e-commerce store with .Net, React & Redux

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

Loại khoá học: Web Development

How to build a real world application using some of the most popular and in demand frameworks, React and .Net

image
50.000 VND
90 VND
Đầy Đủ Bài Giảng
Học Online Tiện Lợi
Kích Hoạt Nhanh 2-5 Phút
Thanh toán tự động
Được phép tải xuống

Tổng quan

Nội dung khoá học

Đánh giá

Mô tả

***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.

Bạn sẽ học được gì

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

Yêu cầu

  • Some programming experience required, but there is some pre-work you can do to get to the stage you need to be if never coded before

Nội dung khoá học

16 sections

Introduction

4 lectures
Introduction
04:15
Setting up the dev environment
06:43
Course assets and source code
02:23
Getting help
06:29

API Basics

14 lectures
Section 2 Introduction
10:02
Creating the .Net solution and API project
07:58
Adding VS Code extensions
08:34
What’s in the Web API template
14:56
Creating a new C# class for the Product
07:04
What is Entity Framework
05:50
Adding the DbContext class
14:45
Creating an Entity Framework Migration
08:59
Creating a class to seed data into the database
06:46
Using the Program.cs class to migrate and seed the data on app startup
10:45
Creating an API controller to return a list of products
07:50
Using async methods when querying a database.
08:04
Saving our code into source control
08:22
Summary of section 2
02:31

React Basics

20 lectures
Section 3 Introduction
09:29
Creating the react application
07:30
What's in the React template
08:34
React component basics
13:47
Using react hooks - useState
07:38
Using react hooks - useEffect
05:59
Adding CORS configuration to the API
07:56
Typescript vs javascript in React
07:57
Adding a Typescript interface for the product
09:53
File and folder organisation
07:12
Adding React components
12:55
Adding the Material UI styling framework
11:29
Adding components for the ProductList and Card
05:36
Installing and using React dev tools
04:01
Adding an AppBar
05:28
Adding cards for our individual products
08:18
Styling the product card
09:41
Using Material UI Theme
08:16
Challenge solution and setting bg color
07:08
Section 3 Summary
00:58

React Router

7 lectures
Section 4 Introduction
04:40
Setting up React Router
09:25
Adding Nav Links to the AppBar
10:10
Stying the nav bar
09:32
Fetching a product on component load
13:21
Adding the product detail page content
06:57
Summary of section 4
00:56

Error handling

15 lectures
Section 5 Introduction
10:12
Setting up an error controller
12:41
Adding exception handling middleware
10:26
Centralising the axios requests
11:08
Creating a react component to test the error responses
08:20
Using Axios interceptors
06:31
Adding toast notifications
05:07
Handling validation errors
08:21
Creating a server error component
08:10
Creating a not found component
05:11
Adding a delay and loading indicators to the app
10:35
Using the dotnet debugging tool
09:14
Using the react debugger
08:02
Setting up linting
06:55
Section 5 summary
02:39

Adding the shopping cart feature

23 lectures
Section 6 introduction
07:36
Creating the basket entity
10:20
EF Relationships
09:43
Create a basket controller
07:20
Add basket item endpoint logic
11:30
Using the debugger to check the add item logic
07:08
Shaping the data to return
08:06
Removing an item from the basket
03:25
Using CreatedAtRoute
06:46
Adding the axios methods for the basket
11:59
Creating a basket component
06:27
Styling the basket page with a table
06:01
Using React context to centralise state
15:13
App initialisation - fetching the basket on app start
08:34
Updating the header with the basket item count
07:26
Adding the remove item functionality
10:49
Adding specific loading indicators for the buttons
05:27
Challenge - Basket Summary
05:09
Challenge - Solution
06:20
Updating the product detail component to add items to cart part 1
09:11
Updating the product detail component to add items to cart part 2
17:55
Adding a checkout page
04:00
Section 6 Summary
03:00

Redux

18 lectures
Section 7 Introduction
07:13
Installing and using Redux
09:47
Redux actions
07:58
Action Creators
06:44
Using Redux Toolkit
13:09
Using redux dev tools
04:17
Creating a basket slice
08:46
Refactoring the app to use the redux store
09:58
Using async functions in redux part 1
11:05
Using async functions in redux part 2
06:56
Using async functions in redux part 3
14:54
Challenge - Solution
13:17
Using Entity Adapters
10:48
Using entity adapter selectors
05:28
Fetching a single product
10:58
Error handling in the reducers
10:46
Error handling in the basket slice
07:59
Section 7 summary
01:34

Paging, Sorting, Filtering

20 lectures
Section 8 Introduction
05:59
Adding sorting to the API
10:52
Adding search functionality to the API
03:48
Adding filters to the API
06:18
Adding a pagination helper classes
06:49
Creating a class that extends our List into a PagedList
12:55
Testing our pagination in swagger
09:29
Getting the unique brands and filters as lists from the API
03:41
Getting the filter lists from the API and storing in Redux state
09:43
Catalog page design
12:13
Adding the product params to redux state
07:02
Setting up the axios get request to use our params
09:08
Adding the search functionality to the client
09:44
Adding sort to the client
06:16
Adding filtering to the client
10:42
Setting up pagination on the client
12:06
Adding a pagination component
11:21
Challenge solution
08:40
Cleaning up the loading indicators in the catalog
07:16
Section 8 Summary
01:00

Identity

26 lectures
Section 9 Introduction
08:20
Setting up identity
06:37
Adding the entity configuration and migration
11:20
Adding an account controller
08:42
Testing the login and register methods
05:39
JWT Tokens
06:49
Creating a token service
09:05
Using the token service
10:48
Validating the token on the server
07:59
Configuring swagger to send the auth token
09:30
Creating Login and Register components
03:33
Create a login form
06:05
Using controlled component
08:04
Adding React hook form
09:24
Using React hook form validators
08:11
Adding an account slice
11:07
Creating a dropdown menu
09:24
Persisting the login
14:43
Cleaning up the app init code
09:24
Adding a register form
06:41
Adding the registration validators
13:04
Transfer the basket to logged in user
14:47
Client side testing and code for basket transfer
10:24
Challenge solution
10:54
Adding a private route component
07:15
Section 9 Summary
02:17

Adding the checkout feature

20 lectures
Section 10 Introduction
03:32
Creating the order entities
09:11
Refactoring identity to use an int
14:53
Creating an orders controller
04:15
Adding the create order method
15:30
Testing the order creation
06:40
Shaping the order data
10:25
Creating the checkout component
05:12
Adding a custom text input
10:04
Using react hook form context
05:27
Creating a reusable check box
03:42
Adding a validation library
07:38
Updating the review component
08:29
Updating the payment form
06:37
Submitting the order
09:40
Fetching a saved address for the form
13:08
Creating the orders page
10:35
Challenge - Order detail
05:24
Challenge - Solution
05:32
Section 10 Summary
01:19

Payments

15 lectures
Section 11 Introduction
13:38
Setting up stripe
09:06
Creating a payment service
08:51
Creating a payments controller
08:47
Testing the payment intents using swagger
03:21
Adding stripe to the client
06:47
Using stripe payment inputs
11:14
Validating the stripe inputs part 1
08:34
Validating the stripe inputs part 2
07:01
Adding the payment intent function
05:47
Adding the submit payment function
13:13
Testing card payments
06:01
Adding a webhook
14:32
User secrets
09:57
Section 11 Summary
01:33

Publishing

16 lectures
Section 12 Introduction
03:53
Home page design
09:06
Creating a react production build
11:12
Serving the client app from the API
07:37
Switching to a production DB Server
15:18
Deployment - Dockerising our app
10:55
Deployment - connecting to the postgres in docker
06:33
Deployment - Creating fly io launch config
08:14
Deployment - Adding the fly io secrets
11:10
Deployment - Adding a github action
12:49
Deployment - Automated deployment with github action and fly io
14:09
Heroku no longer providing a free service
00:20
Setting up heroku
07:59
Deploying to Heroku
13:50
Heroku troubleshooting
08:22
Section 12 Summary
03:48

Roles and CRUD operations

22 lectures
Section 13 Introduction
04:22
Connecting Github to Heroku
05:16
Adding a create product endpoint
10:11
Adding automapper
08:25
Editing a product
07:08
Adding a delete endpoint
03:19
Adding an image service
11:09
Using the image service
10:09
Updating and deleting images
07:59
Adding an inventory page
13:57
Adding a product form
08:22
Creating a reusable select list
06:35
Reusable textarea and number inputs
02:40
Adding a drop zone
10:55
Styling the drop zone
09:04
Validating the product form
07:50
Submitting the form data
15:15
Deleting a product from the list
07:20
Extracting the roles from the token
07:11
Using roles in the client app
06:25
Publishing changes to FlyIO
08:47
End of course summary
04:52

Updating to .Net 6

2 lectures
Update the project from .Net 5 to .Net 6
09:10
.Net 6 new project features
21:29

Updating to .Net 7, React 18 and React Router 6

4 lectures
Updating to .Net 7
11:20
Updating the .Net project to use the minimal hosting model
06:53
Updating to React Router v6
22:28
Updating to React 18
10:17

Migrate to Vite from Create React App

2 lectures
Migrate from CRA to Vite
13:12
Resolving linting issues
14:02

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Khoá học liên quan

Laravel 10 - Build News Portal and Magazine Website (2024)

Laravel 10 - Build News Portal and Magazine Website (2024)

105 VND
50.000 VND
Shopify Theme Development: Create Shopify Themes [2023]

Shopify Theme Development: Create Shopify Themes [2023]

649.000 VND
50.000 VND
100 Days of Code: The Complete Python Pro Bootcamp

100 Days of Code: The Complete Python Pro Bootcamp

170 VND
50.000 VND
Master NestJS a Node.js Framework 2024

Master NestJS a Node.js Framework 2024

1.399.000 VND
50.000 VND
Spring Framework 5: Beginner to Guru

Spring Framework 5: Beginner to Guru

1.999.000 VND
50.000 VND
Ultimate Unity Overview (70+ Tools and Features Explained!)

Ultimate Unity Overview (70+ Tools and Features Explained!)

95 VND
50.000 VND
The Git & Github Bootcamp

The Git & Github Bootcamp

120 VND
50.000 VND
Clean Code

Clean Code

170 VND
50.000 VND
The Complete Oracle SQL Bootcamp (2024)

The Complete Oracle SQL Bootcamp (2024)

120 VND
50.000 VND
Khóa học Xử lý Dữ liệu cho Data Warehouse (Phần Cơ Bản)

Khóa học Xử lý Dữ liệu cho Data Warehouse (Phần Cơ Bản)

185 VND
50.000 VND
Framework Python với Selenium 3.x

Framework Python với Selenium 3.x

1.099.000 VND
50.000 VND
Html Css 21 Ngày: Tạo giao diện website chuyên nghiệp từ đầu

Html Css 21 Ngày: Tạo giao diện website chuyên nghiệp từ đầu

65 VND
50.000 VND
The Complete Java Development Bootcamp

The Complete Java Development Bootcamp

125 VND
50.000 VND
Trở thành Quality Control (QC) / Tester (kiểm thử phần mềm)

Trở thành Quality Control (QC) / Tester (kiểm thử phần mềm)

25 VND
50.000 VND
The Complete 2024 Web Development Bootcamp

The Complete 2024 Web Development Bootcamp

185 VND
50.000 VND
Build a Backend REST API with Python & Django - Advanced

Build a Backend REST API with Python & Django - Advanced

120 VND
50.000 VND
image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi