Learn to build an e-commerce app with .Net Core and Angular

36h 40m 51s
English
Paid
October 27, 2023

Have you learnt the basics of ASP.NET Core and Angular?  Not sure where to go next?  This course should be able to help with that.  In this course we start from nothing and build a proof of concept E-Commerce store using these frameworks.

More

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 multi project .net core application using the dotnet CLI

  • Creating a client side front-end Angular UI for the store using the Angular CLI

  • Learn how to use the Repository, Unit of Work and specification pattern in .net core

  • Using multiple DbContext as context boundaries

  • Using ASP.NET Identity for login and registration

  • Using the angular modules to create lazy loaded routes.

  • Using Automapper in ASP.NET Core

  • Building a great looking UI using Bootstrap

  • Making reusable form components using Angular Reactive forms

  • Paging, Sorting, Searching and Filtering

  • Using Redis to store the shopping basket

  • Creating orders from the shopping basket

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

  • Publishing the application to Linux

  • 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: If you have never coded before and you want to learn .Net and Angular you would be better starting with my other .Net Core and Angular course before this one.

On this course we will build an example E-commerce store, completely from scratch using the DotNet CLI and the Angular CLI 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 ASP.NET Core and Angular.  

Requirements:
  • 3-6 Months prior coding experience
Who this course is for:
  • Beginner and intermediate developers who want to enhance their knowledge of .Net and Angular who have some coding experience
  • Beginner and intermediate developers who wish to learn how to build an e-commerce style of site

What you'll learn:

  • .Net Core
  • Angular
  • C# Generics
  • Repository and Unit of Work Pattern
  • Specification Pattern
  • Caching
  • Angular Lazy loading
  • Angular Routing
  • Angular Reactive Forms
  • Angular Creating a MultiStep form wizard
  • Accepting payments using Stripe
  • Angular Re-usable form components
  • Angular validation and async validation

Watch Online Learn to build an e-commerce app with .Net Core and Angular

Join premium to watch
Go to premium
# Title Duration
1 Introduction 06:11
2 Setting up the developer environment 04:41
3 Setting up VS Code for C# development 07:47
4 Where to get the source code and course assets 01:39
5 Introduction 04:45
6 Creating the Web API project 05:27
7 Running the API using the DotNet CLI 09:22
8 .Net 6 Project changes 08:25
9 Reviewing the Web API startup files 07:29
10 Adding our first API Controller 06:05
11 Adding a C# Entity class 03:02
12 Setting up Entity Framework 10:55
13 Adding a connection string 06:37
14 Adding an Entity Framework migration 09:03
15 Updating the database 04:17
16 Reading the data from the Database in the API 10:10
17 Postman Collections 03:52
18 Creating the additional projects 11:57
19 Saving our project into source control using Git and GitHub 09:59
20 Summary of section 2 04:22
21 Introduction 03:16
22 The Repository Pattern 06:28
23 Adding a Repository and Interface 08:09
24 Adding the repository methods 05:30
25 Extending the products entity and creating related entities 05:20
26 Creating a new migration for the entities 05:11
27 Configuring the migrations 11:37
28 Applying the migrations and creating the Database at app startup 07:29
29 Adding Seed data 12:32
30 Adding the code to get the product brands and types 08:39
31 Eager loading of navigation properties 05:50
32 Summary of section 3 02:31
33 Introduction 08:06
34 Creating a Generic repository and interface 06:01
35 Implementing the methods in the Generic repository 09:11
36 Introduction to the specification pattern 06:05
37 Creating a specification class 11:34
38 Creating a specification evaluator 06:56
39 Implementing the repository with specification methods 06:32
40 Using the specification methods in the controller 08:07
41 Using the Debugger to view the spec pattern in action 08:44
42 Shaping the data to return with DTOs 08:32
43 Adding AutoMapper to the API project 08:07
44 Configuring AutoMapper profiles 06:29
45 Adding a Custom Value Resolver for AutoMapper 05:59
46 Serving static content from the API 08:19
47 Summary of section 4 05:40
48 Introduction 02:36
49 Creating a test controller for errors 04:03
50 Creating a consistent error response from the API 10:28
51 Adding a not found endpoint error handler 06:21
52 Creating Exception handler middleware 04:37
53 Improving the validation error responses 12:57
54 Adding Swagger for documenting our API 08:57
55 Improving the swagger documentation 05:50
56 Cleaning up the Startup class 05:45
57 Summary of section 5 08:53
58 Introduction 01:02
59 Adding a sorting specification class 05:13
60 Adding a sorting specification part 2 05:16
61 Working around the decimal problem in Sqlite 05:19
62 Adding filtering functionality 06:14
63 Adding Pagination Part 1 05:34
64 Adding Pagination Part 2 04:22
65 Adding Pagination Part 3 10:41
66 Adding the search functionality 09:54
67 Adding CORS Support to the API 05:11
68 Summary of section 6 05:05
69 Introduction 01:03
70 Setting up the developer environment for Angular 05:42
71 Creating the Angular project 08:12
72 Reviewing the Angular project files in the template 03:06
73 Setting up Angular to use HTTPS 07:20
74 Adding bootstrap and font-awesome 05:32
75 Adding VS Code extensions for Angular 15:09
76 Introduction 03:04
77 Adding a Nav Bar component 02:12
78 Adding the NavBar HTML code 07:18
79 Styling the nav bar 06:26
80 Intro to the Http Client Module 08:07
81 Observables 13:16
82 Intro to Typescript 06:50
83 Typescript Demo 07:59
84 Creating a products interface 11:48
85 Summary of section 8 07:25
86 Introduction 03:21
87 Organising our files and folders 05:10
88 Intro to Angular services 09:57
89 Consuming services in the component 04:14
90 Designing the shop page 06:36
91 Adding a child component for the product items 11:18
92 Passing down data to child components 04:32
93 Adding the product filters 08:43
94 Adding the filter functionality 08:22
95 Hooking up the filter to the HTML 11:04
96 Adding the sort functionality 05:25
97 Adding the pagination functionality 06:45
98 Adding the pagination functionality part 2 06:19
99 Adding the pagination functionality part 3 07:39
100 Adding a pagination header 05:11
101 Making the pagination component a shared component 10:58
102 Pagination and Output properties 06:41
103 Adding the search functionality 09:38
104 Resolving the Bug! 09:02
105 Summary of section 9 06:49
106 Introduction 01:25
107 Creating additional components to route to 02:37
108 Creating the routes 02:44
109 Setting up the nav links 05:12
110 Making the links active 04:59
111 Getting an individual product 06:14
112 Adding the product detail page 06:54
113 Lazy loading angular modules 06:35
114 Summary of section 10 08:43
115 Introduction 00:48
116 Creating an error component for testing the error responses 01:49
117 Creating additional error components 12:07
118 Using the Http Interceptor to catch errors 03:34
119 Adding toast notifications 10:00
120 Handling validation errrors 06:11
121 Improving the internal server error component 04:20
122 Summary of section 11 14:20
123 Introduction 01:29
124 Adding a section header 01:12
125 Adding breadcrumbs 06:30
126 Using the breadcrumb service 05:38
127 Setting the section header title from the breadcrumb service 05:33
128 Styling the product items 11:25
129 Changing the bootstrap theme 07:50
130 Adding loading indicators 05:10
131 Cleaning up loading issues 12:29
132 Adding the home page content 06:51
133 Summary of section 12 07:42
134 Introduction 01:48
135 Setting up Redis 07:08
136 Setting up the basket class 04:30
137 Creating a basket repository interface 03:52
138 Implementing the basket repository 03:23
139 Adding the basket controller 08:25
140 Installing Redis with Docker 06:15
141 Installing Redis on a Mac 07:04
142 Installing Redis on Windows 04:13
143 Testing the basket functionality 06:09
144 Summary of section 13 09:36
145 Introduction 01:05
146 Creating the basket module 01:13
147 Creating the basket types 05:41
148 Basket service methods 03:41
149 Adding an item to the basket service method 06:56
150 Adding the add item to basket in the component method 10:46
151 Persisting the basket on startup 06:17
152 Displaying the basket item count in the nav bar 04:21
153 Styling the basket page 06:50
154 Adding the basket totals to the service 13:33
155 Creating the order summary component 07:27
156 Adding the increment and decrement functionality 11:33
157 Adding the basket component functions 07:22
158 Hooking up the product detail component to the basket 03:53
159 Adding the checkout module 05:30
160 Summary of section 14 07:57
161 Introduction 00:40
162 Setting up the identity packages 02:38
163 Setting up the identity classes 05:28
164 Adding the IdentityDbContext 06:31
165 Adding a new migration 04:52
166 Seeding identity data 05:00
167 Adding the Startup services for identity 04:47
168 Adding identity to program class 05:16
169 Adding an Account controller 04:42
170 Registering a user 11:53
171 Adding a token generation service 06:31
172 Setting up identity to use the token 10:04
173 Testing the token 07:51
174 Troubleshooting auth issues 08:32
175 Adding additional account methods 11:22
176 Adding user manager extension methods 09:34
177 Adding another Dto for the user 12:50
178 Summary of section 15 09:37
179 Introduction 00:45
180 .Net core error responses 01:04
181 Model validation 04:52
182 Checking for duplicate email addresses 04:43
183 Validating the basket 08:25
184 Updating swagger config for identity 08:59
185 Summary of section 16 00:56
186 Introduction 02:35
187 Creating the account module 07:36
188 Creating the account service methods 06:44
189 Creating the login form 06:08
190 Angular forms introduction 03:51
191 Using reactive forms in Angular 06:22
192 Submitting data to the server 04:53
193 Updating the nav bar for the logged in user 05:04
194 Persisting the login 06:24
195 Adding a dropdown to the navbar 10:26
196 Form Validation in Angular 11:05
197 Displaying validation errors 05:44
198 Creating a reusable text input 11:50
199 Reusable text input template 10:34
200 Creating a register form 08:14
201 Dealing with modelstate errors 04:13
202 Async validation 09:01
203 Improving the async validator 07:40
204 Creating an auth guard 09:10
205 Using the replay subject 08:20
206 Summary of section 17 01:53
207 Introduction 01:40
208 Creating the order aggregate part 1 08:54
209 Creating the order aggregate part 2 07:19
210 Configuring the order entities 06:35
211 Store context update and seeding delivery methods 03:29
212 Creating the order migration 05:19
213 Creating an order service 05:16
214 Implementing the create order method 10:39
215 Creating the order controller 10:26
216 Debugging the order method 10:35
217 Introducing the Unit of work 05:40
218 Implementing the Unit of work 09:38
219 Updating the generic repository 04:39
220 Refactoring the Order service to use the Unit of work 06:05
221 Using the debugger to view the order creation 04:36
222 Implementing the Order get methods 07:34
223 Order controller get methods 04:15
224 Testing the order controller get methods 08:18
225 Shaping the order data 09:07
226 AutoMapper config for orders 03:05
227 Another AutoMapper value resolver 05:15
228 Summary of section 18 01:34
229 Introduction 01:48
230 Checkout page layout 03:27
231 Creating a stepper component 04:19
232 Setting up the stepper component 11:53
233 Creating the checkout components 03:55
234 Adding the checkout form 04:54
235 Creating the address form 07:19
236 Creating the delivery form 06:04
237 Delivery method template 06:23
238 Using the Http interceptor to send the token 05:21
239 Making the basket summary shared 11:04
240 Checkout review component 07:06
241 Adding the forward back buttons for the stepper 07:07
242 Using the form status to mark the step complete 02:54
243 Populating the address form from API 04:24
244 Letting the user save the address 05:39
245 Updating the shipping price 04:45
246 Creating the order interface 02:45
247 Order submission 11:34
248 Problem solution and redirect to success 03:21
249 Checkout success page 08:23
250 Summary of section 19 01:07
251 Introduction 02:33
252 Demo of finished solution 05:17
253 Solution to orders exercise 05:26
254 Solution to orders exercise stretch challenge 12:26
255 Introduction 03:16
256 PCI DSS 04:57
257 Strong Customer Authentication 07:15
258 Setting up stripe 05:29
259 Creating the payment service and interface 05:33
260 Implementing the payment intent 13:56
261 Creating the payment controller 09:54
262 Updating the client basket 05:05
263 Adding the payment intent function 08:27
264 Persisting the shipping price 04:59
265 Implementing stripe elements 06:42
266 Adding stripe elements to the components 08:55
267 Displaying card validation errors 07:34
268 Using the app stepper as an input property 03:12
269 Submitting the payment 09:22
270 Testing card failures 08:44
271 Tying the payment intent to the order 09:49
272 Making the submission a better experience 09:33
273 Loading indicators 05:55
274 Enabling linear mode 09:11
275 Stripe validation 09:28
276 Webhooks 11:29
277 Updating the payments service 07:57
278 Testing our webhooks with the stripe CLI 12:46
279 Summary of section 21 03:15
280 Introduction 02:01
281 Setting up caching on the API 08:56
282 Creating a cache attribute class 11:28
283 Testing the caching 06:23
284 Caching on the client part 1 08:04
285 Caching on the client part 2 10:57
286 Caching on the client part 3 14:04
287 Pre-publishing adjustments 06:26
288 Summary of section 22 01:53
289 Introduction 01:59
290 Angular build configuration 04:27
291 Angular config changes 11:38
292 Building the angular app and running from Kestrel 04:49
293 Angular Ahead of Time compilation build 05:15
294 Installing PostgreSQL 06:27
295 Switching DB Servers 06:03
296 Switching to the production database 07:42
297 Pre deployment work 09:42
298 Deploying app to Linux server part 1 14:17
299 Deploying app to Linux part 2 16:09
300 Getting an HTTPS certificate from Lets encrypt 13:05
301 End of course summary 06:57
302 Updating .Net project from .Net Core 3.1 to .Net 5.0 09:07
303 Updating Angular project from Angular v9 to Angular v11 12:39
304 Updating .Net project from .Net 5 to .Net 6 14:09
305 .Net 6 Project changes and new features 17:22
306 Updating from Angular 11 to Angular 12 09:00
307 Updating from Bootstrap 4 to Bootstrap 5 12:45
308 Installing MySQL - Legacy 04:24
309 Switching DB Servers - Legacy 10:28
310 Switching to the production database - Legacy 14:40
311 Pre deployment work - Legacy 13:33
312 Setting up a linux server part 1 - Legacy 16:16
313 Setting up a linux server part 2 - Legacy 17:38
314 Getting an HTTPS certificate from Lets Encrypt - Legacy 08:15

Similar courses to Learn to build an e-commerce app with .Net Core and Angular

Building Your First App with Spring Boot and Angular

Building Your First App with Spring Boot and Angular

Duration 2 hours 22 minutes 15 seconds
Accelerating Through Angular 2

Accelerating Through Angular 2

Duration 1 hour 4 minutes 35 seconds
Angular Architecture. How to Build Scalable Web Applications
100 Angular Challenge

100 Angular Challenge

Duration 12 hours 23 minutes 17 seconds
Reactive Angular Course (with RxJs)

Reactive Angular Course (with RxJs)

Duration 5 hours 33 minutes 49 seconds
PROFESSIONAL Full Stack Developer

PROFESSIONAL Full Stack Developer

Duration 54 hours 23 minutes 35 seconds
Angular 2 Fundamentals

Angular 2 Fundamentals

Duration 5 hours 6 minutes 53 seconds