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

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

English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 315 lectures (36h 41m) | 17.0 GB

Build a proof of concept e-commerce store using Angular, .Net Core and Stripe for payment processing

Now updated to .Net 6.0 and Angular 12

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.

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

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
Table of Contents

1 Introduction
2 Setting up the developer environment
3 Setting up VS Code for C# development
4 Where to get the source code and course assets

API Basics
5 Introduction
6 Creating the Web API project
7 Running the API using the DotNet CLI
8 Net 6 Project changes
9 Reviewing the Web API startup files
10 Adding our first API Controller
11 Adding a C# Entity class
12 Setting up Entity Framework
13 Adding a connection string
14 Adding an Entity Framework migration
15 Updating the database
16 Reading the data from the Database in the API
17 Postman Collections
18 Creating the additional projects
19 Saving our project into source control using Git and GitHub
20 Summary of section 2

API Architecture
21 Introduction
22 The Repository Pattern
23 Adding a Repository and Interface
24 Adding the repository methods
25 Extending the products entity and creating related entities
26 Creating a new migration for the entities
27 Configuring the migrations
28 Applying the migrations and creating the Database at app startup
29 Adding Seed data
30 Adding the code to get the product brands and types
31 Eager loading of navigation properties
32 Summary of section 3

API Generic Repository
33 Introduction
34 Creating a Generic repository and interface
35 Implementing the methods in the Generic repository
36 Introduction to the specification pattern
37 Creating a specification class
38 Creating a specification evaluator
39 Implementing the repository with specification methods
40 Using the specification methods in the controller
41 Using the specification methods in the controller
42 Using the Debugger to view the spec pattern in action
43 Shaping the data to return with DTOs
44 Adding AutoMapper to the API project
45 Configuring AutoMapper profiles
46 Adding a Custom Value Resolver for AutoMapper
47 Serving static content from the API
48 Summary of section 4

API Error Handling
49 Introduction
50 Creating a test controller for errors
51 Creating a consistent error response from the API
52 Adding a not found endpoint error handler
53 Creating Exception handler middleware
54 Improving the validation error responses
55 Adding Swagger for documenting our API
56 Improving the swagger documentation
57 Cleaning up the Startup class
58 Summary of section 5

API Paging, Filtering, Sorting & Searching
59 Introduction
60 Adding a sorting specification class
61 Adding a sorting specification part 2
62 Working around the decimal problem in Sqlite
63 Adding filtering functionality
64 Adding Pagination Part 1
65 Adding Pagination Part 2
66 Adding Pagination Part 3
67 Adding the search functionality
68 Adding CORS Support to the API
69 Summary of section 6

Client – Angular setup
70 Introduction
71 Setting up the developer environment for Angular
72 Creating the Angular project
73 Reviewing the Angular project files in the template
74 Setting up Angular to use HTTPS
75 Adding bootstrap and font-awesome
76 Adding VS Code extensions for Angular

Client – Angular Basics
77 Introduction
78 Adding a Nav Bar component
79 Adding the NavBar HTML code
80 Styling the nav bar
81 Intro to the Http Client Module
82 Observables
83 Intro to Typescript
84 Typescript Demo
85 Creating a products interface
86 Summary of section 8

Client – Building the UI for our shop
87 Introduction
88 Organising our files and folders
89 Intro to Angular services
90 Consuming services in the component
91 Designing the shop page
92 Adding a child component for the product items
93 Passing down data to child components
94 Adding the product filters
95 Adding the filter functionality
96 Hooking up the filter to the HTML
97 Adding the sort functionality
98 Adding the pagination functionality
99 Adding the pagination functionality part 2
100 Adding the pagination functionality part 3
101 Adding a pagination header
102 Making the pagination component a shared component
103 Pagination and Output properties
104 Adding the search functionality
105 Resolving the Bug
106 Summary of section 9

Client – Routing
107 Introduction
108 Creating additional components to route to
109 Creating the routes
110 Setting up the nav links
111 Making the links active
112 Getting an individual product
113 Adding the product detail page
114 Lazy loading angular modules
115 Summary of section 10

Client – Error handling
116 Introduction
117 Creating an error component for testing the error responses
118 Creating additional error components
119 Using the Http Interceptor to catch errors
120 Adding toast notifications
121 Handling validation errrors
122 Improving the internal server error component
123 Summary of section 11

Client – Pazzazz
124 Introduction
125 Adding a section header
126 Adding breadcrumbs
127 Using the breadcrumb service
128 Setting the section header title from the breadcrumb service
129 Styling the product items
130 Changing the bootstrap theme
131 Adding loading indicators
132 Cleaning up loading issues
133 Adding the home page content
134 Summary of section 12

API – Basket
135 Introduction
136 Setting up Redis
137 Setting up the basket class
138 Creating a basket repository interface
139 Implementing the basket repository
140 Adding the basket controller
141 Installing Redis with Docker
142 Installing Redis on a Mac
143 Installing Redis on Windows
144 Testing the basket functionality
145 Summary of section 13

Client – Basket
146 Introduction
147 Creating the basket module
148 Creating the basket types
149 Basket service methods
150 Adding an item to the basket service method
151 Adding the add item to basket in the component method
152 Persisting the basket on startup
153 Displaying the basket item count in the nav bar
154 Styling the basket page
155 Adding the basket totals to the service
156 Creating the order summary component
157 Adding the increment and decrement functionality
158 Adding the basket component functions
159 Hooking up the product detail component to the basket
160 Adding the checkout module
161 Summary of section 14

API – Identity
162 Introduction
163 Setting up the identity packages
164 Setting up the identity classes
165 Adding the IdentityDbContext
166 Adding a new migration
167 Seeding identity data
168 Adding the Startup services for identity
169 Adding identity to program class
170 Adding an Account controller
171 Registering a user
172 Adding a token generation service
173 Setting up identity to use the token
174 Testing the token
175 Troubleshooting auth issues
176 Adding additional account methods
177 Adding user manager extension methods
178 Adding another Dto for the user
179 Summary of section 15

API – Validation
180 Introduction
181 Net core error responses
182 Model validation
183 Checking for duplicate email addresses
184 Validating the basket
185 Updating swagger config for identity
186 Summary of section 16

Client – Identity
187 Introduction
188 Creating the account module
189 Creating the account service methods
190 Creating the login form
191 Angular forms introduction
192 Using reactive forms in Angular
193 Submitting data to the server
194 Updating the nav bar for the logged in user
195 Persisting the login
196 Adding a dropdown to the navbar
197 Form Validation in Angular
198 Displaying validation errors
199 Creating a reusable text input
200 Reusable text input template
201 Creating a register form
202 Dealing with modelstate errors
203 Async validation
204 Improving the async validator
205 Creating an auth guard
206 Using the replay subject
207 Summary of section 17

API – Orders
208 Introduction
209 Creating the order aggregate part 1
210 Creating the order aggregate part 2
211 Configuring the order entities
212 Store context update and seeding delivery methods
213 Creating the order migration
214 Creating an order service
215 Implementing the create order method
216 Creating the order controller
217 Debugging the order method
218 Introducing the Unit of work
219 Implementing the Unit of work
220 Updating the generic repository
221 Refactoring the Order service to use the Unit of work
222 Using the debugger to view the order creation
223 Implementing the Order get methods
224 Order controller get methods
225 Testing the order controller get methods
226 Shaping the order data
227 AutoMapper config for orders
228 Another AutoMapper value resolver
229 Summary of section 18

Client – Checkout
230 Introduction
231 Checkout page layout
232 Creating a stepper component
233 Setting up the stepper component
234 Creating the checkout components
235 Adding the checkout form
236 Creating the address form
237 Creating the delivery form
238 Delivery method template
239 Using the Http interceptor to send the token
240 Making the basket summary shared
241 Checkout review component
242 Adding the forward back buttons for the stepper
243 Using the form status to mark the step complete
244 Populating the address form from API
245 Letting the user save the address
246 Updating the shipping price
247 Creating the order interface
248 Order submission
249 Problem solution and redirect to success
250 Checkout success page
251 Summary of section 19

Client – Order Module
252 Introduction
253 Demo of finished solution
254 Solution to orders exercise
255 Solution to orders exercise stretch challenge

Taking Payments
256 Introduction
258 Strong Customer Authentication
259 Setting up stripe
260 Creating the payment service and interface
261 Implementing the payment intent
262 Creating the payment controller
263 Updating the client basket
264 Adding the payment intent function
265 Persisting the shipping price
266 Implementing stripe elements
267 Adding stripe elements to the components
268 Displaying card validation errors
269 Using the app stepper as an input property
270 Submitting the payment
271 Testing card failures
272 Tying the payment intent to the order
273 Making the submission a better experience
274 Loading indicators
275 Enabling linear mode
276 Stripe validation
277 Webhooks
278 Updating the payments service
279 Testing our webhooks with the stripe CLI
280 Summary of section 21

281 Introduction
282 Setting up caching on the API
283 Creating a cache attribute class
284 Testing the caching
285 Caching on the client part 1
286 Caching on the client part 2
287 Caching on the client part 3
288 Pre-publishing adjustments
289 Summary of section 22

290 Introduction
291 Angular build configuration
292 Angular config changes
293 Building the angular app and running from Kestrel
294 Angular Ahead of Time compilation build
295 Installing PostgreSQL
296 Switching DB Servers
297 Switching to the production database
298 Pre deployment work
299 Deploying app to Linux server part 1
300 Deploying app to Linux part 2
301 Getting an HTTPS certificate from Lets encrypt
302 End of course summary

Bonus – Updating project to .Net 5 and Angular 11
303 Updating .Net project from .Net Core 3.1 to .Net 5.0
304 Updating Angular project from Angular v9 to Angular v11

Bonus – Updating project to .Net 6, Angular 12 and Bootstrap 5
305 Updating .Net project from .Net 5 to .Net 6
306 Net 6 Project changes and new features
307 Updating from Angular 11 to Angular 12
308 Updating from Bootstrap 4 to Bootstrap 5

Legacy – Publishing to a LAMP server using MySQL (.Net Core 3.1 only)
309 Installing MySQL – Legacy
310 Switching DB Servers – Legacy
311 Switching to the production database – Legacy
312 Pre deployment work – Legacy
313 Setting up a linux server part 1 – Legacy
314 Setting up a linux server part 2 – Legacy
315 Getting an HTTPS certificate from Lets Encrypt – Legacy