Blazor WebAssembly - Full Stack Web Development

Install Visual Studio 2022 Community Edition and configure it with the ASP.NET and Web Development workload and the Dotnet desktop development workload for this course.

Install Visual Studio 2026 insider preview, select workloads like ASP.NET web development, Maui, and Azure, and explore its AI Copilot chat integrated UI alongside VS 2022, with settings synchronization.

Sign up for GitHub by completing a simple form with a unique username, email, and password, then sign in to view your landing page, follow others, and manage repositories.

Review and add changes to GitHub demonstrates adding your Blazor project to source control, creating a public repository, and pushing updates to build your portfolio.

Explore data-related operations in the Blazor WebAssembly app, leveraging Identity Core for authentication and Entity Framework for migrations, a code-first database context, and scaffolded database setup.

Learn how Blazor apps implement authentication with identity core and identity server. Extend the default user with custom fields, configure API authorization, and manage identity databases with migrations.

Create database tables with Entity Framework Core by defining domain models: colors, models, vehicles, bookings, and customers. Update the application context and generate migrations to build and seed the database.

Learn how to seed a Blazor WebAssembly app's database by using Entity Framework Core configurations, building color, make, and model seed data, applying configurations, and managing IDs and migrations.

Seed default users and their roles in a Blazor WebAssembly full stack app by hashing passwords, creating admin and regular user records, and linking them to roles before migration.

Upgrade to .NET 6 changes identity libraries and adds a key column; fix by adding the missing using and running migrations to create the keys table and update the database.

Review the section from identity server setup to seeding domain models, then commit and push changes to GitHub, ensuring migrations and database seeding synchronize.

Understand how a Blazor app's server project acts as an API, exposing endpoints via API controllers like a weather forecast controller, and how client and server fit together.

Create and test api endpoints with api controller using entity framework, supporting get, post, put, delete, tested via postman with authorization; plan unit of work to decouple controllers from database.

Refactor controllers to use a unit of work via dependency injection, convert CRUD actions to async, and enable audit logging with HTTP context user data.

Refactor the rest API to use a unit of work with a generic repository, inject user context for audit values, register services at startup, and commit changes to GitHub.

Blazor display data list shows building a razor component to fetch and render a database table with bootstrap, including view, edit, and delete actions via http client and js interop.

Explore retrieving and displaying api data in Blazor, enforce authorized access, centralize endpoints, and include related data (make, model, color, bookings) across vehicle and booking views.

Fix the delete endpoint by removing trailing slashes from API endpoints and magic strings to prevent 404 errors and ensure correct URL building in Blazor WebAssembly.

Use Blazor's built-in add form to create vehicles, with dropdowns for make, model, and color populated from related tables. Submit to the API and navigate back to the vehicles index.

Creates forms for makes, models, colors, customers, and bookings in a Blazor WebAssembly app using API-driven dropdowns, input validation, and post-create navigation.

Create a reusable update form in a Blazor WebAssembly app by building a shared form component with parameters and event callbacks, used for both create and edit flows.

Use a reusable form component to handle create and edit for models, colors, and bookings, inject a client for preloaded dropdowns, and enable back-to-list navigation with a bucket list.

Fix a vehicle edit bug by introducing a separate get details endpoint to retrieve included navigation properties, ensuring dropdown selections update correctly and reflect changes.

Learn to fix audit fields in Blazor by retrieving the user id from token claims, resolving the user via user manager, and storing the creator and updater usernames.

Enforce data quality in forms using data annotations in Blazor, marking first name, last name, tax id, and email as required with length and type constraints on create and edit.

Build a read-only details view for a customer by extending a reusable form component with a disabled parameter, fetch the customer by id, and return to the list.

Clean up code and commit changes to GitHub, reuse components for create, edit, and read-only views, and manage API endpoints with a static endpoint builder, applying data annotations for validation.

learn global error handling in blazor webassembly by using an http client interceptor to monitor api calls, handle non success responses, and navigate to 404, 401, or 500 error pages.

Refactor UI components from code-behind for colors, customers, mix models, and vehicles, preserving bookings and forms for consistency. Implement HTTP interceptor error handling with disposal, then commit and sync changes.

Explore the identity library and tailor login and registration pages to your app, then extend the user model with first and last name and secure API calls with a token.

Explore JavaScript interop in Blazor to integrate third-party libraries like data tables and bootstrap, create a dynamic grid display, and manage cleanup with dispose for a lean, scalable app.

Explore file upload support in Blazor WebAssembly by adding an image field, saving to an uploads folder with a unique name, and rendering it on the vehicle index.

Discover progressive web applications that enable downloadable web apps via modern browser APIs, manifest files, and offline installation across chromium-based browsers.