Blazor WebAssembly & Web API on .NET 6 – Full Course (C#)

Ecommerce Empire Academy

Learn Blazor WebAssembly and Web API on .NET 6 by building a shopping cart application using C#. This course also provides a guide on how to integrate a payment gateway into your Blazor WebAssembly component, so that a user is able to pay for products through your application using a debit or credit card or PayPal account.

✏️ Gavin Lon created this course. Check out his channel:

💻 Code:

⭐️ Resources ⭐️
🔗 Copy Seed Data from GitHub:
🔗 Download Visual Studio 2022 for Widows (Community Edition):
🔗 A Video on .NET 6:
🔗 Download SQL Server 2019:

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:00:51) Create the Database using EF Core Code First Database Migrations
⌨️ (0:26:05) Retrieve Product Data from Database (Web API component)
⌨️ (0:30:17) Create Classes for Data Transfer Objects (DTOs)
⌨️ (0:36:22) Create ProductRepository Class (Repository Design Pattern)
⌨️ (0:43:05) Create ProductController Class
⌨️ (0:51:08) Create DtoConversion Class (DTO Conversion Extension methods)
⌨️ (0:57:45) Display Product Data to User (Blazor WebAssembly Component)
⌨️ (1:39:59) Display Data for Specific Product to User (Web API and Blazor)
⌨️ (2:06:07) Add Product to Shopping Cart (Web API and Blazor)
⌨️ (2:52:40) Remove Product from Shopping Cart (Web API and Blazor)
⌨️ (3:14:03) Update the Quantity of Products in the Shopping Cart (Web API, Blazor, Blazor JavaScript Interoperability)
⌨️ (3:44:01) Update the Header Menu in Response to a Change to the State of the Shopping Cart (Creating Custom Events in Blazor)
⌨️ (4:04:48) Integration of PayPal Payment Gateway into Blazor Component
⌨️ (4:36:03) Dynamically Populate the Side-Bar Menu (Web API and Blazor)
⌨️ (5:05:44) Optimise Code for Performance (Web API and Blazor)
⌨️ (5:08:26) Use Include Extension Method in LINQ Query (Web API)
⌨️ (5:14:00) User Local Storage Functionality (Blazor)
⌨️ (5:35:42) Outro

🎉 Thanks to our Champion and Sponsor supporters:
👾 Raymond Odero
👾 Agustín Kussrow
👾 aldo ferretti
👾 Otis Morgan
👾 DeezMaster

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

28 thoughts on “Blazor WebAssembly & Web API on .NET 6 – Full Course (C#)”

  1. Hi everyone! I hope you enjoy and benefit from this course where we build a shopping cart application using Blazor WebAssembly and Web API on .NET 6. A special thank you to Beau for sharing the course on the fantastic FreeCodeCamp channel! – Gavin Lon

    1. Philibert Ande

      I have an important question concerning the fact that Microsoft strongly advises to use the HttpClientFactory instead of the regulat HttpClient to call the API (socket exhaustion etc..) from the client WASM. I went to another course project and had the same issue,with many other students left with it unanswered. I managed to transform the entire project switching to the use of the HttpClientFactory instead using among others communication technics between components to pass data. I need to know your thoughts about this important issue in your Blazor Bootcamp – .NET 6 (WASM and Server) courses. Possibly modifying the code to allow the use of this technology too?! is it worth it in a production environment?

  2. My question is about project structure, is it based on Clean architecture ( Onion architecture ) or just MVC ?? thank you 🙂

  3. Does this channel have any tutorials that do not use the Visual Studio framework? I’d appreciate being able to learn in a way I can take back to Linux without much hassle. Thanks.

  4. Gerard Lanphear

    Nice stuff. One of the things about Code First that really gives me heartburn is the tendency to build data contexts with absolutely no constraints whatever. It is so easy and less time consuming to create the database first and use the reverse engineer tool. I have an application written with code first and no constraints. Did you know that if a save to the context is attempted and there is a value with a foreign key that does not exist such as 0 when the values are 1 through 5 a cascade failure can occur causing the web server to run out of memory? 😮 Try/Catch on the SaveChanges will not help you.

    1. Browarus Pierogus

      good point – also some corrupted json objects can be very bad for protocol and crash despite catch blocks. Im guessing those dtos are self serializing/deserializing objects done invisibly by net. Some stuff without deeper knowledge here is quite hard to swallow

  5. Thank you for your great effort in this channel, but I hope you will put the translation into Arabic because we find it difficult to understand your content and thank you in advance

  6. Elias Dargham

    Quick question:
    The ShopOnlineDbContext class and the HttpClient class both implement the IDisposable interface. Shouldn’t they be wrapped in a using statement?

    1. The DI (Dependency Injection) system within .NET handles the lifetime of these objects. An example of a problem you may run into if you use the using statement to wrap the DbContext object is you’ll run into problems with how entities are tracked or with tracked entities not saving when you think they should. This issue is among a lot of other issues that may be encountered when wrapping these objects in a using statement.

    2. Elias Dargham

      @Gavin Lon Understood. Thank you very much for the clarification I appreciate it.

  7. Hào Nguyễn

    Hey…the DtoConversions look nice…I usually use AutoMapper to map and transfer Dtos…nice to know one other way…

  8. Why did you elect to use separate base classes for your razor components rather than just code behind files? Base classes would make sense if they’re to be reused across multiple razor subclasses (and I’m only halfway through the video, so maybe that happens later) but if there’s only one razor component inheriting each base class, code behind seems much simpler and reduces clutter in the Solution Explorer. I’m curious if I’m overlooking some advantage that the base class approach introduces.

  9. I have an important question concerning the fact that Microsoft strongly advises to use the HttpClientFactory instead of the regulat HttpClient to call the API (socket exhaustion etc..) from the client WASM. I went to another course project and had the same issue,with many other students left with it unanswered. I managed to transform the entire project switching to the use of the HttpClientFactory instead using among others communication technics between components to pass data. I need to know your thoughts about this important issue in your Blazor Bootcamp – .NET 6 (WASM and Server) courses. Possibly modifying the code to allow the use of this technology too?! is it worth it in a production environment?

  10. Philibert Ande

    I have an important question concerning the fact that Microsoft strongly advises to use the HttpClientFactory instead of the regulat HttpClient to call the API (socket exhaustion etc..) from the client WASM. I went to another course project and had the same issue,with many other students left with it unanswered. I managed to transform the entire project switching to the use of the HttpClientFactory instead using among others communication technics between components to pass data. I need to know your thoughts about this important issue in your Blazor Bootcamp – .NET 6 (WASM and Server) courses. Possibly modifying the code to allow the use of this technology too?! is it worth it in a production environment?

  11. 1. ShopOnlineSolution.sln expects to have .editorconfig but this is missing on GH repo
    2. even after creating a new .editorconfig, my new VS2022CE (17.3.0 Preview 1.1) kicks out MANY warnings (often due to NRT issues or “xxx can be simplified” optimisations)
    3. also no .gitignore, contributing.md, LICENSE.txt
    Gavin : would you accept a PR so these code warnings go away ?

  12. Philibert Ande

    I have an important question concerning the fact that Microsoft strongly advises to use the HttpClientFactory instead of the regulat HttpClient to call the API (socket exhaustion etc..) from the client WASM. I went to another course project and had the same issue,with many other students left with it unanswered. I managed to transform the entire project switching to the use of the HttpClientFactory instead using among others communication technics between components to pass data. I need to know your thoughts about this important issue in your course. Possibly modifying the code to allow the use of this technology too?! is it worth it in a production environment? THANK YOU FOR ANSWERING THE FUCKING QUESTION

  13. Quick question
    Do we have video about publish and deployment of webassembly project with .net 6?

  14. I finished the project but i am getting an error like this ‘<' is an invalid start of a value. Path: $ | LineNumber: 0 | BytePositionInLine: 0. I searched the internet but couldn't find a solution. can anyone help?

Comments are closed.