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

Build a working api with clean architecture and three projects—api, infrastructure, and core—to enable create, read, update, and delete operations and scalable, testable code.

Create and wire together three dotnet projects—a web api, a core class library, and infrastructure—via a solution, set up references and dependencies, then restore and build.

Explore the API project in VS Code, run the app with net run, and examine the weather forecast endpoint; understand how services and middleware form the request pipeline.

Create the product entity in the core project, deriving from a base entity with ID, and enforce required name, description, price, picture URL, type, brand, and stock for Entity Framework.

Install Microsoft Entity Framework Core and the Design package; create a store context deriving from DbContext with a products DbSet for SQL Server, and register it with AddDbContext.

Learn to run SQL Server inside Docker using a Docker Compose file, configure environment variables and ports, and manage it with docker compose up -d and docker compose down.

Connect a .NET Core app to a local SQL server by configuring the default connection in appsettings and managing Entity Framework migrations with dotnet f.

Configure Entity Framework entities by moving product configuration to a dedicated class, apply configurations from assembly, and set price to decimal(18,2) to prevent migration warnings.

Create an api layer with a products controller that exposes json endpoints to list all products, fetch a product by id, and create new products via a store context.

Start the API with dotnet watch, then test endpoints using Postman by importing a predefined collection. Run weather and product requests and seed data to verify create and get operations.

Add update and delete endpoints to the products controller, validating IDs, ensuring product existence, marking entities as modified, and returning responses like 204 no content or 404 when not found.

save your code to a public git repository on GitHub, initialize and commit changes with proper gitignore handling to protect secrets and enable future continuous integration.

Learn practical troubleshooting for a .NET core and Angular API: restart the server, inspect logs, reproduce errors, watch for typos and version issues, and use dev tools to resolve problems.

Expose a clean API architecture by consolidating data access with the repository pattern, structuring three projects (API, infrastructure, core), and enabling automatic Entity Framework migrations and seeded data.

Learn how the repository pattern decouples business logic from data access, enabling a centralized, testable abstraction across databases, web services, or files, while reducing code duplication.

Define a core product repository interface and implement it in infrastructure, exposing methods to get products, get by id, add, update, delete, and exists; register as scoped.

Implement repository methods for the product domain by injecting the store context and performing add, delete, get by id, and list operations asynchronously, using dependency injection and entity state management.

swap the store context for the product repository in the products controller and use the IProductRepository interface to manage fetch, add, update, and delete operations.

Seed data into the database from json files in the seed data folder, and run migrations at startup to seed products and delivery data.

Add repository methods get brands async and get types async, implemented with distinct brands and types from products. Expose api endpoints api/products/brands and api/products/types to return these lists.

Explore building flexible product filtering in the api by passing optional brand and type parameters, constructing a queryable entity framework query, and applying conditional where clauses before returning results.

Implement product sorting using an optional sort parameter and a switch expression to order by price ascending, price descending, or name in a .NET Core and Angular e-commerce app.

Implement a repository pattern with a core interface and concrete class, registered as a scoped service, and used by the API controller to enhance responses.

Explore building scalable code with a generic repository and the specification pattern, addressing 100 entities and avoiding duplicate repositories through generics and type safety.

Create a generic repository interface and implementation to mirror the product repository. Use a base entity constraint with a generic type T and async CRUD methods, and register it.

Implement generic repository methods using EF Core: add, exists checks, get by id async, read-only list async, remove, save changes async, and update via attach and modified state.

Replace the ai product repository with a generic repository in the products controller, using get by id, add, update, and delete with save changes, and plan the specification pattern.

Explore the specification pattern to replace a leaky generic repository, building queries with specification objects evaluated to an expression tree and executed via Entity Framework. Learn to define concise specifications.

Introduce the specification pattern with a minimal setup using an i specification interface and a criteria expression, then implement a base specification in the core and an evaluator in infrastructure.

Learn to implement a generic repository using a specification to filter queries, adding get entity with spec and list async methods, and applying specifications with a dedicated helper.

Apply the specification pattern to filter products by brand and type, integrate a product specification into the repository and controller, and prepare for sorting and pagination.

Learn to implement sorting with the specification pattern by adding order by and order by descending, updating base and product specifications, and validating behavior with the specification evaluator.

Build a scalable e-commerce app with .net core and angular using a single generic repository and product specification pattern for filtering, sorting, and debugging with the debugger.

Demonstrate projection in the specification pattern by extending the AI specification with a select expression to return different result types in a .NET Core and Angular e-commerce app.

Learn to add projection support to the generic repository by overloading the get entity with spec and the get list with spec, using apply specification to return t results.

This lecture extends the AI specification pattern with a distinct projection, adds brand and type list specs, and wires them to fetch distinct strings via a generic repository.

Explore the generic repository and the specification pattern, including projection, and learn how this reusable approach scales across entities and projects, with paging, sorting, and filtering coming next.

Extend the specification pattern to support sorting, filtering, searching, and paging. Use Contains in Entity Framework for search and deferred execution with IQueryable to enable paging via query string.

Learn to implement pagination, sorting, and multi-brand, multi-type filtering by creating a product spec params object and applying it to the product specification for the API.

Implement offset pagination in the product catalog by applying skip and take within the specification pattern, enabling paging with a flag and updating the specification evaluator.

Set a max page size of 50, initialize page index to 1, compute skip and take, and create a generic Pagination<T> to return index, size, count, and data.

Adds a count async method to the generic repository to count filtered products before pagination using the specification pattern, and updates the products controller to return paginated results with count.

Develop a base api controller to centralize pagination and response logic for derived controllers, enabling a create paged results method using a generic repository, spec, page index, and page size.

Implement search by applying a lowercase text filter in the product specification, using a contains condition on the product name, and verify via postman while supporting pagination and sorting.

Implement filtering, sorting, searching, and pagination with the specification pattern and prepare the API for client-side shop UI, then cover API error handling next.

Implement and test robust api error handling with middleware and local catches, dto validation, and http response codes. Enable cors for cross-origin access and review logs to identify exception causes.

Create a test controller to simulate error responses and validate client handling in .NET Core API, covering 401 unauthorized, 400 bad request, 404 not found, internal error, and validation errors.

Develop a top-level exception handling middleware in ASP.NET Core that returns a structured JSON error response with status code, message, and optional details, improving client-side error handling.

Learn to fix validation errors by using a create product DTO with data annotations and range validation. See how API level validation reveals required fields and price and stock constraints.

Enable cors on the .NET API to allow the Angular app on port 4200 to access the API server on 5001 from localhost origins, using program class, services, and middleware.

Conclude module six by outlining how to handle API errors, ensuring the client user interface can respond correctly. Prepare to implement Angular on the client side in the next module.

Install the angular CLI, create and run a new project, configure https for secure development, and explore standalone components with angular material, tailwind CSS, and API data consumption.

Install and set up Angular 21, configure Node.js, npm, and the Angular CLI, and create a new client project with Tailwind CSS.

Explore the angular project files in the client folder, rename app components, and compare angular 20–21 change detection with zone JS and signals.

Enable secure development by configuring angular to run over https using mkcert for locally trusted certificates and updating angular.json to enable ssl with localhost.

Style an Angular app using Tailwind CSS utilities and Angular Material components, install Angular Material via ng add @angular/material, and integrate the material theme CSS with Tailwind.

Install the angular language service and tailwind css intellisense to boost code completion, diagnostics, and template editing; enable linked editing and auto closing brackets, then commit and push changes.

Install and use the Angular CLI to create and run projects, configure editors, and explore Angular Material and Tailwind CSS, while learning about http vs https and API data consumption.

Explore angular basics by building a navbar, login, and logo, and learn to fetch data from a backend API using the angular http client with observables and TypeScript fundamentals.

Organize an Angular app with core, shared, features, and layout folders, and create a header component in layout using the Angular CLI. Use ng generate with aliases and skip tests.

Create a header component with Tailwind and flex layout, including a full-width header, centered logo, nav links, and a shopping cart badge using Angular Material controls.

Improve the header component, fix assets in public folder, customize angular material buttons and badge via theming, apply subtle navbar shadow, and set up HTTP requests to fetch products.

Configure an Angular app to make http requests using the http client and inject it. Subscribe to the observable from the API to fetch and display the product list.

Explore observables in Angular, comparing them to promises, and learn to use RxJS pipe, map, and subscribe to handle async HTTP requests and data streams.

Explain why we use TypeScript in angular, highlighting strong typing, intellisense, and error catching that improve reliability. Weigh upfront code and strict mode against TypeScript's safety and productivity gains.

Introduces the basics of TypeScript, including types, unions, and type inference. Demonstrates a small to-do example with interfaces or types and compiling to JavaScript using tsc.

Define product and pagination types in a shared TypeScript models folder. Enable type safety and intellisense for API data with camel case binding.

Explore Angular zoneless change detection in Angular 21, comparing zone JS with Angular APIs and signals. Learn to adapt components and templates, update app config, and read signals.

Use the angular http client to retrieve data from the API and explore observables and typescript basics. Compare angular material and tailwind options, and preview the upcoming shop UI build.

Build the shop UI with angular material and tailwind, using angular services as singletons for client-side state and HTTP requests, and pass data to product cards via input properties.

Move HTTP requests from a component into an Angular service, creating a singleton core service to share data and reuse logic across the app.

Design a shop page by creating a new shop component, leveraging Angular Material cards and Tailwind grid utilities to display products with images and names, and prepare for cart details.

Create a child product item component in Angular that receives a product via input, displays its name and price with currency, and includes an add-to-cart button with a cart icon.

Fetch and cache product types and brands from the API in a singleton shop service, initialize on app start, and expose them for filtering in the Angular Material dialog.

Add filtering to the shop UI with an Angular Material dialog. Build a dialog component for brand and type filters, pass selections from the shop service, and return results to fetch filtered items.

Open a material dialog filter from the shop component, pass selected brands and types, and apply updates when the dialog closes to filter the Angular e-commerce app.

Use angular two-way binding via the forms module and ngModel to sync selected brands and types between the filter dialog and shop, then build http params to fetch filtered products.

Add sorting functionality to the e-commerce app using angular material components. Implement sort options—alphabetical, price low–high, price high–low—update on sort change, and pass to the shop service.

Learn to implement pagination in a .NET Core and Angular e-commerce app using a shop params class. Refactor GetProducts to use shop params for filtering, sorting, and paging.

Add pagination to the shop UI using Angular Material's paginator, syncing page index and page size with the API, and handling page events and total count.

Add a client-side search function using the Angular forms module with template forms and two-way binding, updating shop params and calling get products to return matches.

Build the shop user interface with Angular services and material components, implementing pagination, filtering, sorting, and search, and utilize input properties for parent-child data and plan for single-page app routing.

Set up client routing in a single-page application using angular's standalone mode, add feature components, and implement nav links for internal navigation between components.

Create a navigable single-page app with Angular routing by defining routes for home, shop, and product details, including dynamic id routes, a wildcard redirect to home, and a router outlet.

Learn how to set up navigation links in the header with angular routerLink, activate links with routerLinkActive, and conditionally render the home and shop components' content to reduce flicker.

Fetch an individual product by route param in an Angular shop app using a shop service and activated route to call the API and display the product details.

Design and implement the product details page for an e-commerce app using Angular and Tailwind, with a grid layout, image, content, add-to-cart, quantity input, and a currency pipe price.

Navigate module ten routing in Angular, set up routes and nav links, and implement lazy loading and optimization for feature components; next, centralize client error handling.