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

Kick off the foundations of a Blazor WebAssembly full-stack app with an ASP.NET Core hosted setup, including client, server, and shared projects, and connect to a database via EF Core.

Create a Blazor WebAssembly project in Visual Studio 2022 using the .NET 6 hosted template. Build a three-project solution (client, server, shared) for a SPA with JWT authentication.

Explore a Blazor WebAssembly e-commerce solution in .NET 6, sharing models between server and client, building a web API with the minimal API approach, and debugging the app.

Debug the laser e-commerce project in Visual Studio 2022 to run the Blazor WebAssembly client with the Web API, inspect network calls and breakpoints, and trace data to the database.

Trust the dev certificate to enable local https and avoid browser warnings. Run dotnet dev-certs https --trust, explore hot reload in .NET 6, and prep for Stripe webhooks.

Master hot reload with .NET 6 and Visual Studio 2022 to update code instantly without restarting the app. Use dotnet watch run for fast reloads in the blazer e-commerce project.

Define a public product model with id, title, description, image URL, and price in the Blazor WebAssembly e-commerce app, configure global usings and imports for easy access in components.

Build a shared product list component in a Blazor WebAssembly app, create mock products, render with a for-each loop, and display details on the index page.

Apply css isolation in a Blazor WebAssembly app by creating a component-scoped css file for the product list, styling media images, and enabling a responsive layout at 1024px.

Fix Bootstrap alignment in a .NET 6 Blazor app by applying Bootstrap 4 style classes (media, media-body) to create a flex layout, using hot reload to preview the product details.

Build your first web api controller in the server project, expose a get products method, and learn api routing, http methods, and basic CRUD actions using an empty controller.

Inject an HttpClient and fetch the products from api/products in a Blazor WebAssembly client on initialization, using OnInitializedAsync to demonstrate the first render.

Install swagger using the swashbuckler package in an ASP.NET Core project, enable API explorer, add swagger gen, and enable swagger UI to test endpoints like weather forecast and products.

Download SQL Server Express, install it, note the connection string, and use SQL Server Management Studio to manage your database for your Blazor e-commerce project.

Install entity framework for a Blazor WebAssembly project by checking existing installs, uninstalling older versions, and re-installing the latest global dotnet ef tool (version 6.0), then verify the setup.

Install entity framework core packages, enable code-first migrations, and configure the SQL Server provider, then verify the project includes EF Core components and add the data context.

Create a data context with Entity Framework Core to access the database and expose a products DbSet. Adopt a repository pattern and service layer to manage data access beyond controllers.

register the db context and configure sql server in dot net 6 using the builder and options to read the default connection string, enabling entity framework and the first migration.

Compare code-first and database-first migrations in Entity Framework Core. Create the initial code-first migration to build the products table and update the database via the package manager console.

Seed data for the product entity by overriding on model creating with a model builder. Migrate the database and verify inserted products in SQL Server Management Studio.

Create and push a GitHub repository for the blazar e-commerce project, set it private, later publish to public, track on the master branch, and seed products, variants, and categories.

Builds a Blazor WebAssembly e-commerce app foundation by connecting client and server, creating and seeding a SQL Server Express database, and exposing a product model via a controller.

Apply thin controllers that delegate logic to a dedicated service, then return data through a service response with generics that include status and message to inform the client.

Implement a generic service response in the shared project, exposing data, success, and message, and return a list of products from the product controller for the client to consume.

Move product logic from the controller to a dedicated product service, register it via dependency injection in the program, and define IProductService with GetProductsAsync to enable testing with swappable implementations.

Add a client-side product service by creating IProductService and ProductService, storing a central products list, injecting http client, and consuming it in the product list component.

Inject the product service into the ProductList component by adding the using Laser E-commerce Client Services Product Service directive. Then call productService.getProducts and handle loading or empty states.

Explore building a shared service response with data, success, and message, wire a product service across server and client, register scoped services, and test loading products with user messages.

Explore Blazor WebAssembly in action by building a product catalog with details, categories, and variants; implement search, pagination, and a cart with adjustable quantities, without authentication.

Show the product details on a new page by using a page parameter for the product id, injecting a product service, and rendering the image, title, description, and price.

Implement a single product retrieval by id, update the service interface with get product async returning a service response for one product, add a controller route, and test with swagger.

Fetch a single product on the client via an async call to the product service, build the API URL with the product id, and display the product or a message.

Apply Bootstrap 5 in a .NET 6 Blazor project by using media and media-body classes in the product details, optimize responsiveness with flex-direction, and verify changes with hot reload.

Introduce a category model with id, name, and url and link it to products via a category reference and category id, with Entity Framework handling the foreign key.

Seed categories and products in your Blazor e-commerce app by adding a category entity, configuring has data, creating a migration, and updating the database to establish category relationships.

Seed additional products by copying code from GitHub, update the data context, run migrations, and verify new data via Swagger and the product endpoint.

Create and register a category service and controller to get categories from the database, returning a service response with a list of categories via the Swagger API.

Create a client-side category service in the Blazor WebAssembly app, implementing ICategoryService and registering it, then fetch categories from the API category endpoint for the menu.

Inject the category service in the nav menu, fetch categories on initialization, and render each category as a nav item in the Blazor WebAssembly e-commerce app.

Add a get products by category method to the product service in a Blazor WebAssembly .NET 6 app, expose it via API, filter by category URL, and test with swagger.

Learn to fetch products by category on a client in Blazor WebAssembly app using .NET 6, by adding a category URL parameter and a products changed event to refresh UI.

Introduce product variants and a product type model with a composite key (product ID, product type ID), moving price and original price to each variant while avoiding circular references.

Add new db sets for product types and product variants, and implement a composite primary key using product id and product type id. Update models and seed data.

Add a migration for product variants, drop price from products, create product types and variants tables with composite keys, seed data, update database, and integrate variants into the product service.

Load product variants and their types by using include and then include, and switch from find async to first or default async to load related entities for queries.

Add a get price text helper to the ProductList component that shows 'price starting at' minimum variant price when multiple variants exist, or the single variant price when only one.

Display the selected product variant price in the product details component, initialize a default variant, and provide a select box to switch variants while showing the original price when higher.

Show a bootstrap form select for product variants when more than one exists, list each variant's product type name, bind to the current type id, and update prices on selection.

Implement a product search with a big input in the top navigation bar showing suggestions. Provide a data list of suggestions mapping typed queries to products on the server.

Implement a server-side product search in a Blazor WebAssembly e-commerce app, filtering products by title or description containing the search text and including variants.

Teach implementing server-driven product search suggestions in a Blazor WebAssembly app by retrieving title and description word matches with ordinal ignore case and punctuation handling.

Extend the client with product search, search suggestions, and a message property for no products found, wire API endpoints, and update the UI to show results.

Implement a url-driven search in the index.razor component by adding a search text parameter and routes, then call the product service to search or load by category.

Implement a shared search component in Blazor WebAssembly, inject the product service and navigation manager, focus the input on render, fetch suggestions, and navigate to the search page.

Explore how to implement and customize layouts in Blazor WebAssembly by creating, renaming, and swapping main layouts and shop layouts, including navigation menus and responsive design tweaks.

Add a top-left home button in the shared razor components, wire it to the navigation manager to navigate to the home page, and style it with a custom CSS class.

Highlight top products on the home page by adding a featured flag, creating a migration, updating the database, and loading the featured products.

Implement a get featured products endpoint in the product service and controller, update the client to return featured products by default, and add a new homepage component to display them.

Create and display featured products with a new razor component that consumes a product service, subscribes to product changes, and supports horizontal scrolling, responsive styling, and links to product details.

Learn to implement pagination for product searches and use data transfer objects to return only title, description, and paging metadata (total pages, current page) in a Blazor WebAssembly app.

Implement server-side pagination for product search results by returning page-aware data, calculating page count, and applying skip and take in the service and controller.

Implement client-side pagination in a Blazor WebAssembly app by updating the ProductService interface and implementation. Track current page, page counts, and last search text, and wire pagination into components.

Add a page parameter and page count to the search and product list components, enabling pagination with page buttons, and fix the page three issue by adjusting the equals sign.

Implement a shopping cart that persists items with local storage in a Blazor WebAssembly app. Install and configure the Blazor Local Storage package to save cart items.

Create a new razor component named card counter in the shared folder, add a cart link button with an icon, initialize count to zero, and place it beside the search.

Introduce a CartItem class to store product ID and product type ID for cart items. Create a new cart service on the client to manage these items.

Implement a client-side cart service in a Blazor WebAssembly app using a CartService and ICartService to add items to local storage, retrieve items, and trigger on-change events.

Subscribe to the cart change event, inject the cart service and local storage, compute the current item count from local storage, and update the cart counter in the UI.

Map cart items to current product responses on the server, returning id, title, type, image, and price via a card service and a card controller.

Fetch cart products on the client by posting cart items to an API and parsing JSON responses, using local storage, an HTTP client, and a walkout page in Blazor WebAssembly.

Create a cart page in a Blazor WebAssembly app, inject the cart service, load current items, display current products with images, titles, types, prices, a total, and provide item removal.

Add a remove from cart method using product id and product type id, update local storage, and reload the cart when the delete button is clicked.

Add a quantity property to the cart models by updating the current item and current product response with an integer quantity, then save and proceed to modify the cart services.

Add a quantity field and adjust the add-to-cart flow on server and client to merge same items by product id and product type idea, then enable updating item quantities.

Add a new update quantity method in the client card services to modify the current cart item's quantity using existing product logic and an input number field for user updates.

Learn to update product quantity in a Blazor WebAssembly app by using an input type number, binding value, and on change handling to update local storage and recalculate the price.

Build a Blazor product page with type and variant relationships, add-to-cart with quantity, responsive layout, and a searchable catalog; learn paging with take/skip and component communication before JWT authentication.

Register and manage users in your blazor web assembly app using json web token authentication. Implement token-based requests so the web api identifies the caller.

Create a public user register model with email, password, and confirm password fields, then build a registration page to collect and validate these inputs.

Create a user registration page in Blazor WebAssembly using edit form, bind email and passwords to a register model, and implement a handle registration method with no validation yet.

Add a user button beside search bar that toggles a dropdown for register or log in when signed out and profile options when signed in, with a 200ms focus-out delay.

Add data annotations to the user register model to enforce required fields and email format. Use required, email address, string length, and compare for password confirmation, with optional error messages.

Enable the data annotations validator on the registration form, show a validation summary, validate email format and password length (six to 100), and offer inline messages below inputs.

Replace the validation summary with per-field validation messages on the register page, showing real-time errors for email and password fields, confirming matches, and preparing for a database user model.

Add a user model with id, email, password hash, and password salt, plus date created, and register it in the data context as a users DbSet.

Create a server-side authentication service by adding a services folder, defining an interface with register and user exists methods, and registering it in the program for dependency injection.

Check for existing users by email with the data context via an asynchronous query that compares emails in lower case, returning true or false to support registration methods.

Check if a user exists by email; if not, create a password hash with HMAC SHA-512 and a salt, save the new user, and return the user ID.

Create an auth controller with a register post endpoint, map requests to a new user, hash the password, handle responses, and enable a Blazor WebAssembly client to register users.

Create a client auth service by adding a new interface and its implementation class, which implements the interface, and register them for dependency injection on the client.

Implement client-side registration in a Blazor WebAssembly app using .NET 6, posting a registration request via HttpClient, handling async responses, and returning the user id on the registration page.

Inject the auth service on the registration page, handle registration, show an error when the email exists, and display a success message after a successful registration.

Modify the registered method to return a message class with the user ID on the server, then show a green success or red danger message on the client after registration.

Create a public user login model in the shared project with email and password properties and required validation, then reference it and add the login page.

Create a login page with Razor components in a Blazor WebAssembly app, using a login model, data annotations, email and password fields, and validation messages.

Prepare the login on the server by validating the user email and password via a web API and issuing a token for future requests.

This lecture walks through verifying a user by email, validating the entered password against stored hash and salt using a 512-bit algorithm, and preparing a JSON web token.

Inject configuration, create jwt claims (id, email, name), sign with a key from app settings, and set a one-day expiry.

Implement client login in a Blazor WebAssembly app by posting user credentials, storing the token in local storage, and navigating to the home page on success.

Implement a custom authentication state provider in Blazor WebAssembly, using local storage JWTs to build claims, set bearer tokens, and notify authentication state changes for authorized views.

Configure and expose the authentication state in a Blazor WebAssembly app by registering the authentication state provider, setting up authorization services, and using cascading authentication state to control content.

Learn to implement a logout option using the AuthorizeView component in a Blazor WebAssembly app, manage authentication state, tokens in local storage, and conditionally show login or logout links.

Implement a return URL on login to send users back to the page they came from, such as books section, using a returnUrl parameter, navigation manager, and Blazor web utilities.

Create a user profile page in a Blazor WebAssembly app, guard it with authorization, display the authenticated user's email from claims, and add a profile link to the user menu.

Learn how to protect pages with the [Authorize] attribute in a Blazor WebAssembly app in .NET 6, handle not authorized views, and guide users to log in or register.

Create a user change password model in Visual Studio with password and confirm password properties, enforce required and length 6–100, and compare passwords to ensure they match.

Implement a server-side change password flow by retrieving the current user from context, creating a new password hash and salt, saving changes, and return a service response indicating success.

Add JWT Bearer authentication middleware to secure calls and expose the current user in controllers, configure token validation and a symmetric security key from app settings, enabling authorized access.

Implement a password change endpoint in the auth controller secured by authorization, retrieve the user id from claims, call the auth service to change passwords, and handle responses.

Implement changing the password on the client by updating the service interface, sending a user change password model as the request, and handling the API response for the profile page.

Add a profile page edit form to change passwords, using an authorized view, data annotations validation, and a change passwords service to update the password with user feedback.

Register and log in with email and password, secure credentials with hash and salt, issue a JSON web token to manage authentication via bearer headers, claims in Blazor WebAssembly.

Enable checkout by adding a button and merging local storage cart items with the database, while setting up cards and orders with a code-first migration to store items and orders.

Add user id to the current items cart item model, create a composite key of user id, product id, and product type id, then run migrations and update the database.

Prepare the cart for authenticated users by using the authentication state provider to check if the user is authenticated, then merge local storage or fetch from the database.

Move local storage cart items to the database when a user logs in, by implementing store cart items on the server and a client call that can empty local storage.

Refactor the cart service to obtain the user ID via IHttpContextAccessor instead of passing it from the controller, configuring DI and injecting the accessor to read the NameIdentifier claim.

Learn to fetch the cart item count from the server in a Blazor WebAssembly app using .NET 6, implementing a server interface and a get endpoint.

Implement a method to check if the current user is authenticated within the client service, extracting it as a reusable private function for use across the client.

Get the number of cart items on the client by syncing api counts with local storage, handling authentication, and updating the cart counter after add or remove actions.

Track cart item counts on login and logout by invoking the cart service to fetch current items count from the server, displaying the count after login and resetting on logout.

fetch the current cart items from the server for the authenticated user by querying the database and returning a list of current products through the service and controller.

Refactor the cart service on the client by merging gift card items with gift card products, and load from the server when authenticated and from local storage otherwise.

Add to cart on the server creates or updates a cart item by product, product type, and user; increments quantity when needed and saves changes; the client calls the API.

Add update quantity method for cart items with existence checks and a service response. Update the client to use put for updating quantity with a current item payload.

Remove from cart with a service method that deletes a cart item using product id and product type id, updates the database, and exposes the API endpoint.

Create order and order item models, define a composite key, and add migrations and database sets to prepare server-side order placement for the e-commerce app.

Create and register an order service and controller, implement place order to compute total from the cart, build order items, save changes, and return true.

Build a client-side order flow in Blazor WebAssembly by adding an order service, injecting an HttpClient and authentication state provider, and wiring a place order button that posts to API.

Learn how to empty the cart after placing an order by updating the order service and removing the current user’s cart items with Entity Framework in a single transaction.

Learn how to display a 'thank you' message after placing an order in a Blazor WebAssembly e-commerce app, update the current items count, and link to the orders page.

Move GetUserId() to the AuthService and refactor server-side order and card services to inject the auth service, enabling user-specific cart operations and order placement.

Define an order overview DTO and implement a server-side get orders flow in Blazor WebAssembly. Retrieve user orders with date, total, product info, and image URLs for the client.

Fetch and display customer orders on the client in a Blazor WebAssembly app, rendering an orders list with details and navigation to order pages.

Define order details response models and a server get order details API in a Blazor WebAssembly app. Retrieve and display order items with product details on the client.

Fetches order details on the client using the order service and the order id, displaying the date, products with quantities, and total price on the order details page.

Move the is user authenticated check to the client auth service by implementing the interface with the authentication state provider, then rely on the auth service for user authentication.

Learn to implement full cart CRUD in a Blazor WebAssembly e-commerce app, store cart data in the database, and place orders on a new order page, preparing for Stripe checkout.

Set up a Stripe account and implement Stripe Checkout for one-time and recurring payments, including redirects, api keys, webhooks, Apple Pay and Google Pay, and updating orders in the database.

Access the Stripe dashboard, enable test mode, and obtain API keys to configure webhooks, checkout, and customer invoice flows, then store orders in your database.

Install Stripe.net in the server project via NuGet by using Manage Packages, then add the Stripe package and implement redirects to the Stripe checkout page.

Redirect a Blazor WebAssembly app to Stripe Checkout by calling a web API to obtain the URL, then navigate to Stripe and create a server-side checkout session.

Create a checkout session on the server by implementing a stripe-based payment service and controller in a .NET 6 Blazor app, generating line items from cart and using customer email.

Learn to build a Blazor WebAssembly checkout flow with an order success page, integrate a cart service, test Stripe payments, and prepare for storing orders via webhooks.

Learn to fulfill orders by handling Stripe checkout session completed webhooks, map customer emails to users, place orders, and store them in the database with local testing via Stripe CLI.

Enable customers to enter a shipping address in Stripe Checkout by adding a shipping address collection with allowed countries, and test the flow from session setup to order verification.

Create a Stripe checkout session and redirect the client to the Stripe form. Use webhooks to fulfill orders and store them in the database; add shipping address later.

Add an address model linked to a user with fields for first name, last name, street, city, state, zip, and country; create a migration and update the database.

Implement the address logic on the server by building an address service with get address and add or update methods, wired into an API controller for authorized users.

Develop the address logic on the client by implementing an address service (interface and class), registering it, and performing get and update operations via http requests.

Create a shared address form component that uses the address service to fetch and update the address for current and profile contexts, featuring an edit mode and a submit action.

Implement and display a delivery address form in the cart and profile, guarded by authentication, using server-first data flow and shared components; validate updates and prepare for admin dashboard.

Begin the administration section with role based authentication for admins to create, read, update, and delete products, categories, and product types, as you prepare for new components and error fixes.

Add a role to the user model and a role claim to the auth token to authorize admin access to the dashboard and category management in a Blazor WebAssembly app.

Create a shared admin menu component that shows admin links based on user roles, and build a categories admin page secured with authorization attributes for the admin role.

Add visible and deleted flags to the category model, mark editing fields as not mapped attributes, run migrations to update database, and implement CRUD operations for categories on the server.

Implement server-side CRUD operations for categories, including create, update, and delete, with admin-only endpoints and filtering for non-deleted and visible categories. Prepare client-side CRUD operations for categories in subsequent steps.

Implement all client-side CRUD operations for categories in Blazor WebAssembly, including get admin categories, add, update, delete, and create category for client use, and refresh the category menu on change.

Implement the administration page for categories in a Blazor WebAssembly app, enabling listing, editing, creating, and deleting categories with visibility toggles and category service updates.

Subscribe to category change events in OnInitializedAsync, dispose properly, and trigger a re-render of the menu when state has changed.

Build an admin API workflow to load product types from the server by implementing a product type service and controller with admin-only authorization and a service response wrapper.

Implement client-side product type service by adding interface and implementation, register globally, and expose product types through a get product types method to power the product type administration page.

Build a product types administration page in Blazor WebAssembly and .NET 6, wiring a product type service, listing and editing product types, and implementing create and update operations.

Extend the server API to add and update product types, implement post and put methods returning the product type list, and wire controller actions with request objects and service responses.

Implement add, update, and create new product types on the client, call api endpoints for product types, and handle responses to synchronize product types.

Finish the product type administration page with a light interface and role authorization. Wire in on-change updates, and implement create, edit, and update flows.

Modify product and product variant models by adding visible, deleted, editing, and is new flags, set the title as required, and migrate database so all items are visible by default.

Learners will implement and test the new visible and not deleted flags in ProductService methods to filter products and variants by category and search, with admin visibility considerations.

load admin product data by calling an async get products method, filter non-deleted items, include non-deleted variants and product types, and secure admin endpoints.

Extend the client product service with a get-admin-products method and implement it to fetch admin products from API/products/admin and render them on the administration page.

Create an admin products page in a Blazor WebAssembly app, inject the product service, and render a performance-optimized list with image, title, price, visibility, and edit actions.

Add edit and create buttons for products and use the navigation manager to navigate to the edit product page with a product id, or to the create new product page.

Learn how to fetch a single product for administrators using the product service async method, with admin checks, visibility filters, and inclusion of variants and product type.

Develop server-side create, update, and soft-delete of products in a blazor webassembly net 6 app, including product variants and product type handling with service responses.

Implement client-side create, update, and delete operations for products in a Blazor WebAssembly app, calling api/products and parsing json responses from the server.

Implement the edit product component and create pages in a Blazor WebAssembly app, wiring product, category, and product type services, managing variants, and saving with navigation.

Explore how to test and fix create and update flows in a Blazor e-commerce admin, validating product data, wiring variant models, and ensuring proper button types and visibility rules.

Admins manage categories, product types, and products by editing, adding, and deleting items, viewing variants and prices, and adjusting the featured or invisible flags in a complete admin dashboard.

Celebrate completing the Blazor WebAssembly e-commerce course and reflect on future enhancements like invoicing, stock tracking, order delivery to multiple addresses, and user reviews.

Explore implementing a one-to-many product image relationship, enabling multi-image uploads from disk, storing images as base64 strings in the database, and showcasing them with MudBlazor ui components in Blazor WebAssembly.

Set up the Blazer e-commerce database in the server project with entity framework migrations, seed a user, adjust roles to admin, and prepare for image uploads.

Add an image model to support multiple product images. Extend the product model with an images list and store image data as base64 strings, then run a migration.

Close the app, add images DbSet to the data context, run and apply a migration, then update the database to create an images table with a product id foreign key.

Create a new product with multiple images in Blazor WebAssembly .NET 6, enabling multi-file uploads, resizing, and storing image data as base64 in the database.

Learn to load multiple images for products using a one-to-many relationship and update or remove images across product service methods.

Learn to update product images by replacing the set: fetch the product with images, remove them, and add new ones using safe changes async; include front end remove buttons.

Install MudBlazor in a .NET 6 Blazor WebAssembly project for an e-commerce store using templates or manual setup, then configure imports, fonts, and providers to enable the theme, dialog, and snack bar.

Display product images with MudBlazor cards, images, and actions, set image sources, add a remove button with an image ID handler, and adjust layout with flex and spacing.

Showcases implementing an image carousel on the product details page in a Blazor WebAssembly app, with conditional image display. Configure items source, context, and a 200-pixel height.

Learn to render the first image from a product's image list for products, product list, and featured products in a Blazor WebAssembly app, using conditional image availability checks.