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

30h 29m 57s
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 250 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: 1.1. Introduction to the course

All Course Lessons (250)

#Lesson TitleDurationAccess
1
1.1. Introduction to the course Demo
07:51
2
1.2. Setting up the developer environment
05:00
3
1.3. Setting up VS Code for C# development
06:10
4
1.4. Course assets and source code location
03:21
5
2.1. Introduction
05:15
6
2.2. Creating the .Net projects
08:44
7
2.3. Reviewing the projects in VS Code
13:47
8
2.4. Creating the Product Entity
09:17
9
2.5. Setting up entity framework
06:28
10
2.6. Setting up Sql Server
09:25
11
2.7. Connecting to the Sql Server from the app
08:24
12
2.8. Configuring the entities for the migration
10:16
13
2.9. Creating a products controller
10:00
14
2.10. Using postman to test our new API Endpoints
06:31
15
2.11. Adding the update and delete endpoints
07:33
16
2.12. Saving our code into source control
08:02
17
2.13. Summary
07:04
18
3.1. Introduction
03:49
19
3.2. Introduction to the repository pattern
04:18
20
3.3. Creating the repository interface and implementation class
08:36
21
3.4. Implementing the repository methods
03:33
22
3.5. Using the repository in the controller
09:07
23
3.6. Seeding data
11:46
24
3.7. Getting the brands and types
05:04
25
3.8. Filtering the products by brand
05:12
26
3.9. Sorting the products
05:49
27
3.10. Summary
02:02
28
4.1. Introduction
07:24
29
4.2. Creating a generic repository
06:26
30
4.3. Implementing the generic repository methods
03:47
31
4.4. Using the generic repository in the controller
05:24
32
4.5. Introduction to the specification pattern
07:47
33
4.6. Setting up the specification classes
08:00
34
4.7. Updating the repository to use the specification
05:16
35
4.8. Using the specification pattern
08:51
36
4.9. Adding sorting to the specification
09:16
37
4.10. Using the debugger
12:30
38
4.11. Adding projection to the spec part 1
08:40
39
4.12. Adding projection to the spec part 2
05:39
40
4.13. Adding projection to the spec part 3
09:24
41
4.14. Summary
02:26
42
5.1. Introduction
04:11
43
5.2. Creating product spec parameters
10:10
44
5.3. Adding pagination part 1
04:19
45
5.4. Adding pagination part 2
07:16
46
5.5. Adding pagination part 3
06:41
47
5.6. Creating a Base API controller
05:46
48
5.7. Adding the search functionality
04:36
49
5.8. Summary
00:45
50
6.1. Introduction
05:47
51
6.2. Adding a test controller for error handling
06:14
52
6.3. Exception handling middleware
11:28
53
6.4. Validation error responses
07:59
54
6.5. Adding CORS support on the API
07:01
55
6.6. Summary
00:39
56
7.1. Introduction
06:30
57
7.2. Creating the angular project
10:25
58
7.3. Reviewing the Angular project files
08:42
59
7.4. Using HTTPS with the Angular project
07:11
60
7.5. Adding Angular Material and Tailwind CSS
09:53
61
7.6. Adding VS Code extensions for Angular and Tailwind
05:45
62
7.7. Summary
02:17
63
8.1. Introduction
02:31
64
8.2. Setting up the folder structure and creating components
10:35
65
8.3. Adding a Header component
10:19
66
8.4. Improving the header component
11:17
67
8.5. Making http requests in Angular
13:59
68
8.6. Introduction to observables
05:45
69
8.7. Introduction to TypeScript
05:39
70
8.8. Typescript demo
13:15
71
8.9. Using Types in our Project
06:41
72
8.10. Summary
03:10
73
9.1. Introduction
02:38
74
9.2. Introduction to Angular services
06:43
75
9.3. Designing the shop page
07:27
76
9.4. Adding a product item component
08:52
77
9.5. Getting the types and brands lists
04:35
78
9.6. Adding the filtering functionality using Material Dialog
07:23
79
9.7. Adding the filtering functionality using Material Dialog part 2
10:05
80
9.8. Hooking up the filters to the service
10:19
81
9.9. Adding the sorting functionality
09:06
82
9.10. Using a class to supply the parameters for the API request
07:42
83
9.11. Adding pagination to the client using Material
09:46
84
9.12. Adding the search functionality to the client
11:56
85
9.13. Summary
01:47
86
10.1. Introduction
01:29
87
10.2. Creating components and routes
05:40
88
10.3. Setting up the links in the app
07:00
89
10.4. Getting an individual product using Route params
08:03
90
10.5. Designing the product details page
09:32
91
10.6. Summary
02:06
92
11.1. Introduction
01:36
93
11.2. Creating a test error component
09:34
94
11.3. Creating a NotFound and Server Error component
03:02
95
11.4. Creating an HTTP Interceptor for handling API errors
09:56
96
11.5. Adding toast (snackbar) notifications
07:31
97
11.6. Handling validation errors from the API
06:11
98
11.7. Configuring the server error page
10:04
99
11.8. Configuring the Not found page
04:54
100
11.9. Adding an HTTP Interceptor for loading
05:19
101
11.10. Adding a progress bar to indicate loading
02:31
102
11.11. Making the header fixed to the top
02:55
103
11.12. Summary
01:55
104
12.1. Introduction
07:22
105
12.2. Creating a Redis instance to use in our app
06:23
106
12.3. Using Redis with .Net
05:09
107
12.4. Creating the Cart classes
04:12
108
12.5. Creating a Cart service
08:20
109
12.6. Creating the Cart controller
05:14
110
12.7. Testing the Cart in Postman
06:15
111
12.8. Summary
00:58
112
13.1. Introduction
01:51
113
13.2. Creating the cart components
06:45
114
13.3. Introduction to Angular Signals
05:50
115
13.4. Adding the Cart service methods
07:24
116
13.5. Adding an item to the cart
09:59
117
13.6. Using the add item functionality in the product item
05:53
118
13.7. Persisting the cart
13:13
119
13.8. Updating the nav bar with the cart item count
04:40
120
13.9. Styling the cart
13:27
121
13.10. Creating the order summary component
06:38
122
13.11. Creating the order summary component part 2
05:13
123
13.12. Creating the order totals
06:01
124
13.13. Adding additional functions to the service
05:25
125
13.14. Adding these functions to the cart
06:12
126
13.15. Adding the update cart functionality to the product details
11:11
127
13.16. Creating the checkout components
03:20
128
13.17. Summary
00:36
129
14.1. Introduction
07:21
130
14.2. Setting up identity
08:45
131
14.3. Updating the DB and testing the endpoints
06:35
132
14.4. Adding a custom register endpoint
09:49
133
14.5. Testing the authentication
05:16
134
14.6. Creating additional user endpoints
10:16
135
14.7. Creating extension methods
08:16
136
14.8. Validation errors
04:47
137
14.9. Adding a user address class
05:14
138
14.10. Adding an endpoint to update the user address
11:35
139
14.11. Updating the user address part 2
04:45
140
14.12. Summary
01:33
141
15.1. Introduction
01:20
142
15.2. Creating the account components
07:23
143
15.3. Introduction to Angular forms
03:49
144
15.4. Creating the login form
10:45
145
15.5. Updating the header component
04:06
146
15.6. Persisting the login
05:02
147
15.7. Adding an auth interceptor
03:50
148
15.8. Adding an Angular Material Menu
05:13
149
15.9. Adding the register form
07:28
150
15.10. Form validation part 1
03:37
151
15.11. Form validation part 2
05:14
152
15.12. Creating a re-usable text input
11:05
153
15.13. Creating an auth guard
09:44
154
15.14. Updating the auth guard to use observables
07:40
155
15.15. Challenge - empty cart guard
01:53
156
15.16. Challenge solution
01:53
157
15.17. Adding an empty state component
07:03
158
15.18. Summary
02:27
159
16.1. Introduction
08:33
160
16.2. Creating the delivery methods in the API
06:52
161
16.3. Setting up Stripe
08:37
162
16.4. Implementing the payment intent
12:15
163
16.5. Creating a payment controller
10:49
164
16.6. Checkout page layout
07:56
165
16.7. Adding client side Stripe
15:31
166
16.8. Creating the address element
09:15
167
16.9. Populating the address in the address form
09:22
168
16.10. Save the address as default address
14:41
169
16.11. Creating the delivery component part 1
06:31
170
16.12. Creating the delivery component part 2
05:25
171
16.13. Creating the delivery component part 3
09:47
172
16.14. Creating the payment element
10:49
173
16.15. Creating the review component
07:58
174
16.16. Stripe address auto complete functionality
05:30
175
16.17. Validating step completion part 1
11:19
176
16.18. Validating step completion part 2
05:17
177
16.19. Creating a Stripe confirmation token
08:15
178
16.20. Updating the review component with the token information
09:01
179
16.21. Confirming the payment
11:06
180
16.22. Loading and error notifications
08:50
181
16.23. Checkout success page
07:06
182
16.24. Summary
01:47
183
17.1. Introduction
02:02
184
17.2. Creating the order aggregate part 1
07:31
185
17.3. Creating the order aggregate part 2
04:08
186
17.4. Configuring the order entities
09:40
187
17.5. Introducing the Unit of work
05:28
188
17.6. Implementing the unit of work
08:29
189
17.7. Using the unit of work
06:34
190
17.8. Creating the order controller
11:07
191
17.9. Debugging the order creation
10:55
192
17.10. Adding the get order methods
07:11
193
17.11. Updating the spec for eager loading
07:25
194
17.12. Updating the controller to eagerly load in the get methods
06:08
195
17.13. Shaping the data to return
13:03
196
17.14. Summary
01:05
197
18.1. Introduction
04:20
198
18.2. Creating the order components
08:06
199
18.3. Submitting the order
13:09
200
18.4. Designing the order component to display orders
07:08
201
18.5. Creating the order detailed page
12:43
202
18.6. Updating the address pipe with type guards
10:24
203
18.7. Adding a webhook endpoint in the payments controller
14:06
204
18.8. Testing the WebHook using the Stripe CLI
09:40
205
18.9. Adding SignalR to the API
11:03
206
18.10. Adding SignalR to the client
11:48
207
18.11. Updating the checkout success page
11:11
208
18.12. Adding a guard to the checkout success
06:46
209
18.13. Adding the home page component style
05:42
210
18.14. Summary
01:32
211
19.1. Introduction
05:18
212
19.2. Preparing the client app for publishing
09:28
213
19.3. Preparing the .Net app for publishing
11:43
214
19.4. Setting up a cloud Redis server
06:42
215
19.5. Setting up an azure account
08:49
216
19.6. Configuring the web app on Azure
07:45
217
19.7. Creating a Azure DB
08:32
218
19.8. Publishing the app to Azure
07:22
219
19.9. Adding Continuous integration
14:19
220
19.10. Troubleshooting Azure issues
08:56
221
19.11. Making the empty state component reusable
11:38
222
19.12. Updating CI to also build the angular app
08:59
223
19.13. Summary
02:03
224
20.1. Challenge - coupon challenge
13:14
225
21.1. Introduction
01:22
226
21.2. Adding roles to the app
10:34
227
21.3. Using the roles
05:29
228
21.4. Using the roles
11:13
229
21.5. Updating the Base controller CreatePagedResult method
06:33
230
21.6. Adding refund functionality
08:07
231
21.7. Creating the admin components
05:39
232
21.8. Creating an angular directive
08:15
233
21.9. Creating an admin route guard
03:55
234
21.10. Adding the admin service methods
05:29
235
21.11. Adding the admin component code
07:37
236
21.12. Designing the admin component template
08:30
237
21.13. Populating the orders table
12:09
238
21.14. Adding the order table action button functionality
08:14
239
21.15. Adding a confirmation prompt
08:53
240
21.16. Summary
01:32
241
22.1. Introduction
04:24
242
22.2. Setting up caching on the API
08:42
243
22.3. Creating an attribute
10:40
244
22.4. Testing the caching
05:28
245
22.5. Invalidating the cache
09:48
246
22.6. Lazy loading in angular
11:00
247
22.7. End of course summary
06:04
248
23.1. Updating the .Net project to .Net 9
07:36
249
23.2. Updating the Angular project to Angular 20
18:08
250
23.3. Updating to Tailwind 4 and Angular Material 20
20:00

Unlock unlimited learning

Get instant access to all 249 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

Learn to build professional-grade Angular Applications | Angular Start

Learn to build professional-grade Angular Applications | Angular Start

Sources: Josh Morony
A complete text-based guide to Angular from beginner level through to building professional-grade applications. Concepts are taught from scratch, but the content will be valuabl...
Angular Basics (v15)

Angular Basics (v15)

Sources: ultimatecourses.com
Modern Angular best-practices and patterns from years of evolution. Scalable architecture, immutable data structures, state services and brand new Standalone Components. Build a...
8 hours 58 minutes 31 seconds
Building Your First App with Spring Boot and Angular

Building Your First App with Spring Boot and Angular

Sources: pluralsight
Spring Boot and Angular have forever changed how web applications are built. Understanding how they work is essential for any full-stack developer. In this course, Building Your...
2 hours 22 minutes 15 seconds
Angular 9 Firebase Project Course

Angular 9 Firebase Project Course

Sources: fireship.io
The Angular Firebase PWA Course will teach you how to build a complex progressive web app with Angular 9 (ivy), Material Design, and Firebase. It starts from absolute basics and...
2 hours 46 minutes 56 seconds