Learn to build an ecommerce app with Net Core and Angular

Build a proof of concept e-commerce store using Angular, .Net Core and Stripe for payment processing
Learn to build an ecommerce app with Net Core and Angular
File Size :
17.04 GB
Total length :
36h 42m



Neil Cummings


Last update

Last updated 11/2021



Learn to build an ecommerce app with Net Core and Angular

What you’ll learn

.Net Core
C# Generics
Repository and Unit of Work Pattern
Specification Pattern
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

Learn to build an ecommerce app with Net Core and Angular


3-6 Months prior coding experience


*** 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 environmentCreating a multi project .net core application using the dotnet CLICreating a client side front-end Angular UI for the store using the Angular CLILearn how to use the Repository, Unit of Work and specification pattern in .net coreUsing multiple DbContext as context boundariesUsing ASP.NET Identity for login and registrationUsing the angular modules to create lazy loaded routes.Using Automapper in ASP.NET CoreBuilding a great looking UI using BootstrapMaking reusable form components using Angular Reactive formsPaging, Sorting, Searching and FilteringUsing Redis to store the shopping basketCreating orders from the shopping basketAccepting payments via Stripe using the new EU standards for 3D securePublishing the application to LinuxMany more things as wellTools you need for this courseIn 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.


Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Setting up the developer environment

Lecture 3 Setting up VS Code for C# development

Lecture 4 Where to get the source code and course assets

Section 2: API Basics

Lecture 5 Introduction

Lecture 6 Creating the Web API project

Lecture 7 Running the API using the DotNet CLI

Lecture 8 .Net 6 Project changes

Lecture 9 Reviewing the Web API startup files

Lecture 10 Adding our first API Controller

Lecture 11 Adding a C# Entity class

Lecture 12 Setting up Entity Framework

Lecture 13 Adding a connection string

Lecture 14 Adding an Entity Framework migration

Lecture 15 Updating the database

Lecture 16 Reading the data from the Database in the API

Lecture 17 Postman Collections

Lecture 18 Creating the additional projects

Lecture 19 Saving our project into source control using Git and GitHub

Lecture 20 Summary of section 2

Section 3: API Architecture

Lecture 21 Introduction

Lecture 22 The Repository Pattern

Lecture 23 Adding a Repository and Interface

Lecture 24 Adding the repository methods

Lecture 25 Extending the products entity and creating related entities

Lecture 26 Creating a new migration for the entities

Lecture 27 Configuring the migrations

Lecture 28 Applying the migrations and creating the Database at app startup

Lecture 29 Adding Seed data

Lecture 30 Adding the code to get the product brands and types

Lecture 31 Eager loading of navigation properties

Lecture 32 Summary of section 3

Section 4: API Generic Repository

Lecture 33 Introduction

Lecture 34 Creating a Generic repository and interface

Lecture 35 Implementing the methods in the Generic repository

Lecture 36 Introduction to the specification pattern

Lecture 37 Creating a specification class

Lecture 38 Creating a specification evaluator

Lecture 39 Implementing the repository with specification methods

Lecture 40 Using the specification methods in the controller

Lecture 41 Using the specification methods in the controller

Lecture 42 Using the Debugger to view the spec pattern in action

Lecture 43 Shaping the data to return with DTOs

Lecture 44 Adding AutoMapper to the API project

Lecture 45 Configuring AutoMapper profiles

Lecture 46 Adding a Custom Value Resolver for AutoMapper

Lecture 47 Serving static content from the API

Lecture 48 Summary of section 4

Section 5: API Error Handling

Lecture 49 Introduction

Lecture 50 Creating a test controller for errors

Lecture 51 Creating a consistent error response from the API

Lecture 52 Adding a not found endpoint error handler

Lecture 53 Creating Exception handler middleware

Lecture 54 Improving the validation error responses

Lecture 55 Adding Swagger for documenting our API

Lecture 56 Improving the swagger documentation

Lecture 57 Cleaning up the Startup class

Lecture 58 Summary of section 5

Section 6: API Paging, Filtering, Sorting & Searching

Lecture 59 Introduction

Lecture 60 Adding a sorting specification class

Lecture 61 Adding a sorting specification part 2

Lecture 62 Working around the decimal problem in Sqlite

Lecture 63 Adding filtering functionality

Lecture 64 Adding Pagination Part 1

Lecture 65 Adding Pagination Part 2

Lecture 66 Adding Pagination Part 3

Lecture 67 Adding the search functionality

Lecture 68 Adding CORS Support to the API

Lecture 69 Summary of section 6

Section 7: Client – Angular setup

Lecture 70 Introduction

Lecture 71 Setting up the developer environment for Angular

Lecture 72 Creating the Angular project

Lecture 73 Reviewing the Angular project files in the template

Lecture 74 Setting up Angular to use HTTPS

Lecture 75 Adding bootstrap and font-awesome

Lecture 76 Adding VS Code extensions for Angular

Section 8: Client – Angular Basics

Lecture 77 Introduction

Lecture 78 Adding a Nav Bar component

Lecture 79 Adding the NavBar HTML code

Lecture 80 Styling the nav bar

Lecture 81 Intro to the Http Client Module

Lecture 82 Observables

Lecture 83 Intro to Typescript

Lecture 84 Typescript Demo

Lecture 85 Creating a products interface

Lecture 86 Summary of section 8

Section 9: Client – Building the UI for our shop

Lecture 87 Introduction

Lecture 88 Organising our files and folders

Lecture 89 Intro to Angular services

Lecture 90 Consuming services in the component

Lecture 91 Designing the shop page

Lecture 92 Adding a child component for the product items

Lecture 93 Passing down data to child components

Lecture 94 Adding the product filters

Lecture 95 Adding the filter functionality

Lecture 96 Hooking up the filter to the HTML

Lecture 97 Adding the sort functionality

Lecture 98 Adding the pagination functionality

Lecture 99 Adding the pagination functionality part 2

Lecture 100 Adding the pagination functionality part 3

Lecture 101 Adding a pagination header

Lecture 102 Making the pagination component a shared component

Lecture 103 Pagination and Output properties

Lecture 104 Adding the search functionality

Lecture 105 Resolving the Bug!

Lecture 106 Summary of section 9

Section 10: Client – Routing

Lecture 107 Introduction

Lecture 108 Creating additional components to route to

Lecture 109 Creating the routes

Lecture 110 Setting up the nav links

Lecture 111 Making the links active

Lecture 112 Getting an individual product

Lecture 113 Adding the product detail page

Lecture 114 Lazy loading angular modules

Lecture 115 Summary of section 10

Section 11: Client – Error handling

Lecture 116 Introduction

Lecture 117 Creating an error component for testing the error responses

Lecture 118 Creating additional error components

Lecture 119 Using the Http Interceptor to catch errors

Lecture 120 Adding toast notifications

Lecture 121 Handling validation errrors

Lecture 122 Improving the internal server error component

Lecture 123 Summary of section 11

Section 12: Client – Pazzazz

Lecture 124 Introduction

Lecture 125 Adding a section header

Lecture 126 Adding breadcrumbs

Lecture 127 Using the breadcrumb service

Lecture 128 Setting the section header title from the breadcrumb service

Lecture 129 Styling the product items

Lecture 130 Changing the bootstrap theme

Lecture 131 Adding loading indicators

Lecture 132 Cleaning up loading issues

Lecture 133 Adding the home page content

Lecture 134 Summary of section 12

Section 13: API – Basket

Lecture 135 Introduction

Lecture 136 Setting up Redis

Lecture 137 Setting up the basket class

Lecture 138 Creating a basket repository interface

Lecture 139 Implementing the basket repository

Lecture 140 Adding the basket controller

Lecture 141 Installing Redis with Docker

Lecture 142 Installing Redis on a Mac

Lecture 143 Installing Redis on Windows

Lecture 144 Testing the basket functionality

Lecture 145 Summary of section 13

Section 14: Client – Basket

Lecture 146 Introduction

Lecture 147 Creating the basket module

Lecture 148 Creating the basket types

Lecture 149 Basket service methods

Lecture 150 Adding an item to the basket service method

Lecture 151 Adding the add item to basket in the component method

Lecture 152 Persisting the basket on startup

Lecture 153 Displaying the basket item count in the nav bar

Lecture 154 Styling the basket page

Lecture 155 Adding the basket totals to the service

Lecture 156 Creating the order summary component

Lecture 157 Adding the increment and decrement functionality

Lecture 158 Adding the basket component functions

Lecture 159 Hooking up the product detail component to the basket

Lecture 160 Adding the checkout module

Lecture 161 Summary of section 14

Section 15: API – Identity

Lecture 162 Introduction

Lecture 163 Setting up the identity packages

Lecture 164 Setting up the identity classes

Lecture 165 Adding the IdentityDbContext

Lecture 166 Adding a new migration

Lecture 167 Seeding identity data

Lecture 168 Adding the Startup services for identity

Lecture 169 Adding identity to program class

Lecture 170 Adding an Account controller

Lecture 171 Registering a user

Lecture 172 Adding a token generation service

Lecture 173 Setting up identity to use the token

Lecture 174 Testing the token

Lecture 175 Troubleshooting auth issues

Lecture 176 Adding additional account methods

Lecture 177 Adding user manager extension methods

Lecture 178 Adding another Dto for the user

Lecture 179 Summary of section 15

Section 16: API – Validation

Lecture 180 Introduction

Lecture 181 .Net core error responses

Lecture 182 Model validation

Lecture 183 Checking for duplicate email addresses

Lecture 184 Validating the basket

Lecture 185 Updating swagger config for identity

Lecture 186 Summary of section 16

Section 17: Client – Identity

Lecture 187 Introduction

Lecture 188 Creating the account module

Lecture 189 Creating the account service methods

Lecture 190 Creating the login form

Lecture 191 Angular forms introduction

Lecture 192 Using reactive forms in Angular

Lecture 193 Submitting data to the server

Lecture 194 Updating the nav bar for the logged in user

Lecture 195 Persisting the login

Lecture 196 Adding a dropdown to the navbar

Lecture 197 Form Validation in Angular

Lecture 198 Displaying validation errors

Lecture 199 Creating a reusable text input

Lecture 200 Reusable text input template

Lecture 201 Creating a register form

Lecture 202 Dealing with modelstate errors

Lecture 203 Async validation

Lecture 204 Improving the async validator

Lecture 205 Creating an auth guard

Lecture 206 Using the replay subject

Lecture 207 Summary of section 17

Section 18: API – Orders

Lecture 208 Introduction

Lecture 209 Creating the order aggregate part 1

Lecture 210 Creating the order aggregate part 2

Lecture 211 Configuring the order entities

Lecture 212 Store context update and seeding delivery methods

Lecture 213 Creating the order migration

Lecture 214 Creating an order service

Lecture 215 Implementing the create order method

Lecture 216 Creating the order controller

Lecture 217 Debugging the order method

Lecture 218 Introducing the Unit of work

Lecture 219 Implementing the Unit of work

Lecture 220 Updating the generic repository

Lecture 221 Refactoring the Order service to use the Unit of work

Lecture 222 Using the debugger to view the order creation

Lecture 223 Implementing the Order get methods

Lecture 224 Order controller get methods

Lecture 225 Testing the order controller get methods

Lecture 226 Shaping the order data

Lecture 227 AutoMapper config for orders

Lecture 228 Another AutoMapper value resolver

Lecture 229 Summary of section 18

Section 19: Client – Checkout

Lecture 230 Introduction

Lecture 231 Checkout page layout

Lecture 232 Creating a stepper component

Lecture 233 Setting up the stepper component

Lecture 234 Creating the checkout components

Lecture 235 Adding the checkout form

Lecture 236 Creating the address form

Lecture 237 Creating the delivery form

Lecture 238 Delivery method template

Lecture 239 Using the Http interceptor to send the token

Lecture 240 Making the basket summary shared

Lecture 241 Checkout review component

Lecture 242 Adding the forward back buttons for the stepper

Lecture 243 Using the form status to mark the step complete

Lecture 244 Populating the address form from API

Lecture 245 Letting the user save the address

Lecture 246 Updating the shipping price

Lecture 247 Creating the order interface

Lecture 248 Order submission

Lecture 249 Problem solution and redirect to success

Lecture 250 Checkout success page

Lecture 251 Summary of section 19

Section 20: Client – Order Module

Lecture 252 Introduction

Lecture 253 Demo of finished solution

Lecture 254 Solution to orders exercise

Lecture 255 Solution to orders exercise stretch challenge

Section 21: Taking Payments

Lecture 256 Introduction

Lecture 257 PCI DSS

Lecture 258 Strong Customer Authentication

Lecture 259 Setting up stripe

Lecture 260 Creating the payment service and interface

Lecture 261 Implementing the payment intent

Lecture 262 Creating the payment controller

Lecture 263 Updating the client basket

Lecture 264 Adding the payment intent function

Lecture 265 Persisting the shipping price

Lecture 266 Implementing stripe elements

Lecture 267 Adding stripe elements to the components

Lecture 268 Displaying card validation errors

Lecture 269 Using the app stepper as an input property

Lecture 270 Submitting the payment

Lecture 271 Testing card failures

Lecture 272 Tying the payment intent to the order

Lecture 273 Making the submission a better experience

Lecture 274 Loading indicators

Lecture 275 Enabling linear mode

Lecture 276 Stripe validation

Lecture 277 Webhooks

Lecture 278 Updating the payments service

Lecture 279 Testing our webhooks with the stripe CLI

Lecture 280 Summary of section 21

Section 22: Performance

Lecture 281 Introduction

Lecture 282 Setting up caching on the API

Lecture 283 Creating a cache attribute class

Lecture 284 Testing the caching

Lecture 285 Caching on the client part 1

Lecture 286 Caching on the client part 2

Lecture 287 Caching on the client part 3

Lecture 288 Pre-publishing adjustments

Lecture 289 Summary of section 22

Section 23: Publishing

Lecture 290 Introduction

Lecture 291 Angular build configuration

Lecture 292 Angular config changes

Lecture 293 Building the angular app and running from Kestrel

Lecture 294 Angular Ahead of Time compilation build

Lecture 295 Installing PostgreSQL

Lecture 296 Switching DB Servers

Lecture 297 Switching to the production database

Lecture 298 Pre deployment work

Lecture 299 Deploying app to Linux server part 1

Lecture 300 Deploying app to Linux part 2

Lecture 301 Getting an HTTPS certificate from Lets encrypt

Lecture 302 End of course summary

Section 24: Bonus – Updating project to .Net 5 and Angular 11

Lecture 303 Updating .Net project from .Net Core 3.1 to .Net 5.0

Lecture 304 Updating Angular project from Angular v9 to Angular v11

Section 25: Bonus – Updating project to .Net 6, Angular 12 and Bootstrap 5

Lecture 305 Updating .Net project from .Net 5 to .Net 6

Lecture 306 .Net 6 Project changes and new features

Lecture 307 Updating from Angular 11 to Angular 12

Lecture 308 Updating from Bootstrap 4 to Bootstrap 5

Section 26: Legacy – Publishing to a LAMP server using MySQL (.Net Core 3.1 only)

Lecture 309 Installing MySQL – Legacy

Lecture 310 Switching DB Servers – Legacy

Lecture 311 Switching to the production database – Legacy

Lecture 312 Pre deployment work – Legacy

Lecture 313 Setting up a linux server part 1 – Legacy

Lecture 314 Setting up a linux server part 2 – Legacy

Lecture 315 Getting an HTTPS certificate from Lets Encrypt – Legacy

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

Course Information:

Udemy | English | 36h 42m | 17.04 GB
Created by: Neil Cummings

You Can See More Courses in the Business >> Greetings from CourseDown.com

New Courses

Scroll to Top