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

36h 40m 51s
English
Paid

Course description

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.

Read more about the course

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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 314 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

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

0:00
/
#1: Introduction

All Course Lessons (314)

#Lesson TitleDurationAccess
1
Introduction Demo
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

Unlock unlimited learning

Get instant access to all 313 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Demystifying Reactivity with Angular Signals

Demystifying Reactivity with Angular Signals

Sources: fullstack.io
Welcome to an insightful journey into building modern Angular applications with signals. This article aims to shed light on the relatively untapped potential of signals in Angul...
1 hour 44 minutes 15 seconds
Desktop apps with Angular, Firestore and Electron

Desktop apps with Angular, Firestore and Electron

Sources: udemy
This course takes you on a developer journey where you'll be building a complete desktop application that runs on any platform (Windows, Mac, Linux) using your favorite Web Tech...
11 hours 28 minutes 39 seconds
Complete Angular 2 JS

Complete Angular 2 JS

Sources: udemy
This Angular 2 video course is probably the most complete on the Internet to date and this means that it is time to seriously start studying the second Angular.
18 hours 50 minutes 51 seconds
Angular 2 Fundamentals

Angular 2 Fundamentals

Sources: ultimatecourses.com
This course teaches you to make informed decisions by diving deep into real concepts, architecture, and unidirectional dataflow. We then weave our way through t
5 hours 6 minutes 53 seconds
Build an app with ASPNET Core and Angular from scratch

Build an app with ASPNET Core and Angular from scratch

Sources: udemy
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 incr...
29 hours 51 minutes 36 seconds