Learn to build an e-commerce app with .Net Core and Angular
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.
- 3-6 Months prior coding experience
- 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
# | 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 |