Make an E-Commerce Website with Blazor WebAssembly in .NET 6

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

– Introduce role-based authorization on the client & the server

– Extend your models

– Create several administration pages

– Implement CRUD operations (create, read, update, delete) for your entities

If you don’t know me yet from YouTube or my other courses on Udemy, my name is Patrick God, I’m going to be your instructor for this course. I’m a web developer for over a decade now, I have worked for big corporations and small teams, as an employee and a contractor and I just love to see the way Microsoft is going with .NET & Blazor and how important these technologies get day by day.

So far, I’ve created 10 courses on Udemy about .NET (Core), Blazor WebAssembly, single-page applications, Angular, and DevOps – with a total of more than 60.000 students and countless 5-Star reviews.

If you’re still not sure if this course is right for you, there’s a 30-day money-back guarantee. So, feel free to check it out and get your money back if it’s just not for you. No questions asked.

Apart from that, you can always ask questions in the Q&A sections that the community (including me) is happy to answer and you also get the complete source code, if there happens to be a problem with that.

Are you ready?

I’m looking forward to seeing you in the course!