Make an E-Commerce Website with Blazor WebAssembly in .NET 6 (Udemy.com)
Learn how to build an E-Commerce Website with Blazor WebAssembly, a Web API, Entity Framework Core & SQL Server Express.
Created by: Patrick God
Last updated May 2022
What you will learn
- Build a full stack Blazor WebAssembly application by the example of an E-Commerce Website
- Create a Walking Skeleton with .NET, Blazor WebAssembly, a Web API, Entity Framework Core & SQL Server right at the beginning
- Implement Best Practices with Generics, Data-Transfer-Objects (DTOs) and the Repository Pattern
- Build several features of an E-Commerce App, like Search, Pagination, Featured Products, a Cart (local & database), Orders and many more
- Implement Authentication with JSON Web Tokens (JWT)
- Use Role-Based Authorization for Administrators & Customers
- Use Code-First Migration with Entity Framework Core & SQL Server
- Implement Payment with Stripe Checkout providing Credit Card, Apple Pay & Google Pay
- Create a Custom Layout for your Blazor WebAssembly Application
- Implement Administration Features with all CRUD operations to Create, Read, Update & Delete your Products
How it compares
Against the other 194 rated Udemy courses in C# on CourseDuck:
- Rating4.5 out of 5higher than 58% of them
- Reviews1,819#39 of 195 by number of reviews
- Length17.6 hourslonger than 85% of them
- Last updatedMay 2022more recently than 57% of them
Course Description
Welcome to the Blazor WebAssembly E-Commerce Course!
In this online course, we’re going to build an e-commerce web application with .NET 6 & Blazor WebAssembly.
We’ll cover the complete stack, meaning Blazor for the client, a Web API for the back end web service, and Entity Framework Core with SQL Server Express for the database.
The course starts with a walking skeleton. This means, right at the beginning of this course, and in just a few hours you learn how to build a running full-stack web application with all the mentioned frameworks and technologies.
So, after this section, you won’t use any mock data, for instance. You will already make calls to the web service, grab data from the SQL Server and return the results back to the Blazor WebAssembly client.
On top of that, we will introduce best practices to that walking skeleton. For instance, we don’t want to use fat controllers. Instead, we’ll use the repository pattern together with dependency injection.
After that, we build a huge part of the e-commerce application. This section is all about the products your users can buy in your shop, it’s about categories, product variants, a search bar, pagination, a basic cart, and so on.
With all these implementations you learn lots of features of Blazor WebAssembly, together with the Web API and also relationships between entities and how to manage them with Entity Framework Core and SQL Server.
After that, we dive into authentication with JSON web tokens.
You will learn how to register users, log them in and create JSON web tokens (JWT) to authenticate your users, set the token in the default HTTP request header, utilize the famous [Authorize] attribute to secure your Web API, and add a page for the users' profile so that they can change their password, for instance.
The next section is all about the cart and orders. Until this point, you’ve already implemented a cart, but it only works offline. So now it’s time to store the products of the cart in the database and also implement the final order and an overview of the order history.
But one thing will still be missing, and that’s an option to checkout and pay for your order. We cover that with the next section and use Stripe to do that. This means, your users can pay with a credit card, Google Pay and Apple Pay. Additionally, we’ll continue with a smaller section where we implement the option to add a delivery address.
And after that, it’s time for the big administration dashboard. Everything you’ve learned so far comes together in this section.
We utilize lots of features of Blazor WebAssembly, we build several CRUD operations for our entities - meaning an administrator should be able to create, read, update and delete all products, categories, and product variants - and to know if the user is allowed to do all that, we introduce role-based authorization.
As you can see, there’s a lot to learn!
Here's an overview of what you will learn in this course:
Introduction
- Install the .NET 6 Framework & Visual Studio 2022
- Get the source code from GitHub
Full Stack Foundations - Building a Walking Skeleton
- Create a Blazor WebAssembly ASP.NET Core Hosted Project
- Debug your project
- Learn about the new Hot Reload feature of .NET 6 & Visual Studio 2022
- Create Razor Components & utilize CSS Isolation
- Implement a Web API Controller & test it with SwaggerUI
- Install & use SQL Server Express and Entity Framework Core 6
- Utilize Code-First Migrations with EF Core 6 & Seed Data programmatically
- Create a Git repository and push your code to GitHub
Adding & Using Best Practices
- Implement a Service Response with Generics
- Use the Repository Pattern and Dependency Injection
- Create Services for the client and the service
It's all about Products - Blazor WebAssembly in Action
- Add more models & entities to your web application like categories, variants, and more
- Use several features of EF Core 6 like composite primary keys, more migrations & relationships
- Utilize several built-in components of Blazor WebAssembly
- Realize a search feature & pagination
- Implement a custom layout
- Add a cart using the local storage to your application
Let's add Users - Authentication with JSON Web Tokens
- Implement user registration & login
- Use data annotations & validation
- Introduce the user model
- Add token authentication with JSON Web Tokens (JWT)
- Implement a custom AuthenticationStateProvider
- Add a return URL to the login
- Utilize the [Authorize] attribute
Let's buy some Products - Cart & Orders
- Store the cart of a user in the database
- Use the HttpContextAccessor to access the user in the services
- Store the orders in the database
- View an order history
- Utilize the authentication state of the user
Ka-Ching! - Payment with Stripe Checkout
- Introduce Stripe
- Use Stripe Checkout for payments
- Fulfill an Order with WebHooks
- Enable a shipping address in Stripe Checkout
Where are you from? - Add a Delivery Address
- Add an address model with a new migration
- Create a shared component for the cart and the user profile page
We need more stuff! - Admin Dashboard
Instructor Details
- 4.5 Rating
1,819 Reviews
Patrick God
Writing code is what drives me. Creating software out of nothing is a skill I truly am passionate about and I want to share this astonishing feeling of making stuff with you.
I started to learn several programming languages as a teenager and always wanted to create software ever since I first played a game on a Commodore 64. During my bachelor and master studies, I joined various companies, made desktop and web applications as well as video games professionally and was always anxious to improve my craft, which I have been doing for more than 15 years now.
For me, the most important part of writing and teaching code is to have fun. If certain ways work for you and the results are maintainable and you have fun with your results, you're doing it the right way. I don't care if you always use your keyboard or switch to the mouse from time to time, so-called best practices are not always best or practical, I want to teach you to develop software in a way it works in the industry, a way it works for you and in a way that makes you happy.
More courses by Patrick God
.NET 5 Web API & Entity Framework Crash Course (2020)
4.7 (4,920 Reviews)
Provider: Udemy
Time: 2.9h
$54.99
.NET 7 Web API & Entity Framework Jumpstart (2022)
4.4 (3,975 Reviews)
Provider: Udemy
Time: 22h
$13.99
REST WCF Service for Web Applications in ASP.NET Hands-On (2019)
4.6 (1,235 Reviews)
Provider: Udemy
Time: 1.9h
$44.99
Single-Page Application with ASP.NET & jQuery Hands-On (2017)
4.7 (764 Reviews)
Provider: Udemy
Time: 3.5h
$69.99
Blazor WebAssembly Full Stack Bootcamp with .NET 5 (2021)
4.5 (627 Reviews)
Provider: Udemy
Time: 17.6h
$69.99
More C# courses
C# Developers: Double Your Coding Speed with Visual Studio (2018)
4.7 (4,035 Reviews)
Provider: Udemy
Time: 2.2h
$13.99
Object Oriented Programming with C# - Beginner to Advanced (2020)
4.7 (2,063 Reviews)
Provider: Udemy
Time: 5.6h
$64.99
Learn Game Development with C# Programming and MonoGame! (2025)
4.7 (1,094 Reviews)
Provider: Udemy
Time: 6.6h
$12.99
Reviews
By Mandy Jones on 2/4/2024
This was an amazing course to take. Not only do you learn Blazor, but you also learn a plethora of other items. I now understand how a front-end client communicates with a back-end server and how to set up proper routing for API calls. Additionally, the addition of Swagger was amazing as an API reference. Adding the Stripe implementation for payment processing w/ webhook updates was also something I was not expecting to see. I loved that we added our own CSS throughout the course (it was a great refresher on CSS for me) and then was introduced to MudBlazor at the end. Overall if I could give this course a 100/5 stars I would. I HIGHLY recommend this for any developer looking to pick up a new skill.
By Simon Bailey on 7/10/2023
Edit: I came back to edit my review and change it from 2 stars to 3.5 stars. Going back through the material there is actually a lot of useful information in the first quarter of the course and I have been able to use it to create my own Blazow WASM app. I can't give it more than 3.5 stars though simply because there is so much missing from this course that could have been in it instead of spending the other 75% of it making an online store. For example, while there is info about Blazor there is nothing much in here about Web Assembly (e.g. making your app work offline, which is one of the most important features of WASM) My original review: This is not a Blazor WebAssembly tutorial. This is a tutorial in how to build an E-Commerce website that just so happens to be made using Blazor. No effort what-so-ever was made to teach Blazor WebAssembly at all. It's basically just a video of some guy coding away at lightning speed. He doesn't ever pause to explain what hes doing, he just tells you what he is typing as he types it. The further I got through the tutorial the more angry I got that he wasn't bothering to actually teach anything. If you want to learn Blazor WebAssembly then look elsewhere.
By Atef Bouchrit on 6/16/2023
I enjoyed the course layout. I believe that part of the difficulties when learning a new tool is the project architecture. This course nailed it!. The author started with a walking skeleton, then he started building the app accordingly. I do recommend this course to every one with intermediate to advanced level of C#. It is important to refresh your self about Dependency injections and few other concepts. The course obviously cannot cover every aspect of C# or Web development. I believe the course layout is good enough. The learner must take this know-how and build his/her own project and practice with different libraries.
By Gregory Nolan on 5/11/2023
Overall a very great course. I feel like everything I learned was important and good coding practices were utilized throughout class. I actually liked the refactoring steps because in real life, there is always refactoring as the project develops. If someone tried to figure out the perfect way to write their code from the start, they would never write anything.
By Atul Kumar Mittal on 12/6/2022
It is nice course but this course is not for beginners. you must have some experience in MVC, ASP.Net Core, Entity Framework and LINQ otherwise you will lost in the middle. There were many things where i felt lost. Patrik should have explained before writing the code that what we are going to develop. Just kept writing the code till the time output appears. Spent too much time in writing CSS. I think he could have used Bootstrap instead writing own CSS. Moreover there were many topics where more basic explaination was required like Claims, Authentication, Identity and HttpAccessor. But overall I liked the course and the way Patrick expalins. Loved it.
By Theodor Nordkvist on 11/12/2022
Great course, gives the student a good overview of the basic concepts of Blazor Webbassemblies, and a good foundation to build complex apps in the framework. Though I would have preferred that the teacher had spent less time typing in long segments of code, and more time in explaining what was going on, in each case. For example, typing in all the HTML based code into Razor components, letter by letter, element by element, is not of much educational value. Would have been better to just provide students with the HTML sections of the component, and explain afterwards how each section is built up. Actually, the teacher provides the finished components on his Github page, so if students want to follow along that way, they can, and that's what I did early on in the course. I just don't think it contributes to improving my skills and knowledge, typing in code segments letter by letter, that I have written countless times in other various apps I've built. Apart from this, great course, and the app that is built is very advanced. With some tweaks, it could possibly be used in commercial applications, in production. The app uses Stripe to receive payments, but of course all payments are fake.
By Denver24 on 10/26/2022
I can't thank Patrick enough for putting this course together. After watching a few of his Youtube videos I found this course. This was an absolute game-changer for me. I am finishing up school with a BS in ISM so my experience was mostly with SQL and databases with very little coding exposure outside of very simple class assignments using C# or PHP that only tested connecting the database. This course allowed me to really test my skills as I was using a database-first (sorry!) approach so not only did I have to adapt to Patrick's design I also had to hope my own database was designed well enough to handle it. I am happy to report that after many, many hours of debugging and redesigning I have completed the app and this amazing course is to thank for that. Again, thank you Patrick for your in-depth explanation of every element that was used in the making of this application, I really learned a lot!
By Cyan on 3/18/2022
The creator of the course is superb at teaching, and I learnt a lot. There are some effort and tears that might happen when you are learning, but then I think about all the work the author of the course might have gone through not only to get it completed and done -it's not exactly easy code-, and then it all pass for and I feel fine. I completed my programming studies a couple of months ago after 4 years, and I was always interested in learning .NET, from the very beginning while combining that with other skills and programming languages they teach you, and this course is the best I've tried for now. Congrats to Patrick, his God last name kinda suits him well, :D, he is kinda the legendary creature. And thanks! p.s. it's possible that for some people the connection string might change to something like this instead of the string that works for Patrick. "server=(localdb)\MSSQLLocalDB;database=(....whatever comes aftewards).
By Kip Williams on 3/1/2022
This is a very good course demonstrating best practices while developing a Blazor wasm e-commerce site. However, if you are expecting to have a complete production ready e-commerce site at the end of the course then you will likely be disappointed as there are some key elements that are missing… • No email validation or password recovery for users (IMO - required for production) • No product inventory functionality. If you are selling one of something, there is nothing that prevents a customer from purchasing 20 (IMO - required for production). • No information about adding the Stripe webhook endpoints that are required for use on a production server (certainly required for production. • The order shipping address isn’t retrieved from stripe and saved with the order (not required for production but certainly helpful). • Single image for each product • No ability for admins to add or edit images through the user interface (just the url for the image). That said, this is a >16 hour course, and it does provide the knowledge base needed for most developers to successfully implement the missing components on their own. The instructor does an excellent job walking you through the development process, demonstrating the testing of each step, before moving on to the next function, however, it would have been helpful to have some whiteboard discussions explaining what the code is doing as well as having comments added to the solution file. Hopefully Patrick will follow this up with a Part-2!
By M K on 2/22/2022
I enjoyed everything except MudBlazor. You can’t go wrong with covering the core framework. I am a software engineer that is passionate about standard core features. When you start introducing major third party component frameworks, I am put right off. If I am interested in MudBlazor or any of the other third party component frameworks I would go learn about those. I would buy another of your courses if you do not bring in third party stuff like MudBlazor. Standard .NET technology is safe and transferrable. I can take my knowledge of .NET, ASP.NET Core and related framework anywhere. I personally use Blazor's built-in FileInput to upload files to the server via ASP.NET Core Web API, so I loved the file upload bits but hated MudBlazor. MudBlazor is subjective, it depends on an individual’s taste, it is not standard. MudBlazor almost made me reduce my rating. Thanks Patrick.
Quality Score
No CourseDuck member has rated this course yet. Taken it? Give each part a thumbs up or down.
Overall Score : 90 / 100












