
Join the Blazor WebAssembly bootcamp to build a web app, mastering data binding, Razor components, forms with validation, and authentication with JWT via HttpClient, Web API, and Entity Framework.
Install the .NET SDK and Visual Studio, choose .NET 5 for now, and use Postman with SQL Server Express and SSMS for later testing.
Get the complete course code on GitHub, review the repository structure, and use the examples to build your own browser game as you start the project.
Create an ASP.NET Core hosted Blazor WebAssembly project in Visual Studio to build a full-stack solution with a web API, shared C# code, and client-side interactions over WebSocket.
Explore the Blazor WebAssembly full stack setup with three projects (client, server, shared), learn to share models, configure services, routing, Razor components, and a weather forecast API.
Explore a Blazor WebAssembly full-stack app in Visual Studio, running server and client, viewing data binding, web API calls, code-behind patterns, and live reload with dotnet watch.
Initialize a git repository, link to GitHub, and choose private or public settings; then commit, push, review diffs in the changes tab, and undo edits as needed.
Learn to build a browser game with Blazor WebAssembly, Web API, and entity framework, starting with a banana resource, units, and battles, and progressing to data binding and component communication.
Create a Razor component top menu to display a bananas count (default 100), bind it in the main layout, and enhance with banana icons and CSS.
Create a component-scoped stylesheet named after the top menu razor component and apply css isolation to prevent global style conflicts, then center the menu with flex for responsive layouts.
Explain and demonstrate how a parent component passes values to a child in Blazor using parameters, with the bananas example showing a parameter attribute on a public property.
Create a child component that raises an event to update the top menu's banana count using an event callback, invoked on button click, demonstrating child-to-parent communication in Blazor.
Create a new build page as a razor component and wire it into the navigation. Implement a banana-based unit builder with a dropdown and on-click log; plan a bananas service.
Explore injecting a banana service into Blazor components, calling eat bananas, and subscribing to the on change event to update the top menu.
Remove obsolete top menu parameters, add a bananas-with-amount method in the banana service, and wire it into the bananas component to update the top menu banana count.
Create a unit model with id, title, attack, defense, hit points, and banana costs, then add a user unit mapping and build a unit service for server and client.
Define a Blazor unit service interface with available units, my units, and add-unit; initialize night, archer, and match with stats, register the service, and integrate it into build component.
Inject the unit service and bind a select box to the unit id to build units, deduct bananas, and update your army while logging builds for debugging.
Build an army page in a Blazor WebAssembly app, display units with icons and hit points from the unit service, and add toast notifications for actions.
Display and test not enough bananas errors using Razor components with conditional rendering, show a validation message and a sad emoji, then plan a toast notification when bananas fall short.
Install and configure blazer toast in a Blazor WebAssembly project, register the toast service, and update index.html and main layout to display toast notifications.
Inject the toast service into the unit service via the constructor and display a success toast when a new unit is created, using the title 'units built'.
Learn to build with Blazor WebAssembly by creating Razor components, wiring data binding and events, building unit models, services, and a page to display units, with toast notifications for feedback.
Master registering and authenticating users by building forms, components, and validation, then apply authentication state and authorized views with local storage to tailor navigation.
Build a simple Blazor login form with validation, simulating authentication without a Web API, using a shared user login model with data annotations and built-in form components.
Create a public user register model with email, username, bio, password, confirm password, start unit id, bananas, date of birth, and is confirmed, using validation attributes and password matching.
Build a Blazor registration form with a user register model, including email, username, password, bio, start unit, bananas, date of birth, and is confirmed, unit service integration and validation messages.
Show how to mark required fields in a Blazor register form with a red asterisk using CSS styling for email and password.
Inject the JavaScript runtime into a Blazor WebAssembly app to log the complete user object to the console. Use JSRuntime.InvokeAsync and console.log to inspect properties in Chrome for faster debugging.
Convert registration page from a select to radio buttons using the input radio group and input radio components in Blazor with dot net five, including value parameters and spacing tweaks.
Learn to navigate users with the navigation manager in a Blazor WebAssembly app by injecting the manager in the register component and calling navigate to route to the login page.
Create a custom authentication state provider in a Blazor WebAssembly app to supply the current user's claims principal and drive authorization-aware UI.
Expose the authentication state as a cascading parameter, configure authorization services, and render content with the authorized view and not authorized components based on the user's authentication state.
Apply the [Authorize] attribute in Blazor WebAssembly pages, configure the authorization imports, and display a not authorized message or login form for unauthorized users using a custom authentication state provider.
Shows implementing token authentication with json web tokens and storing the is authenticated flag in browser local storage, using a Blazor authentication state provider to control access.
Add a logout option in the NAF menu by injecting local storage service and authentication state provider, then remove the is authenticated item, update the authentication state, and navigate home.
Refine navigation with authorized and not authorized views, display home for all, show build and army pages with log out for authorized users, plus a favicon and register option.
Explore Blazor WebAssembly authentication by building login and registration forms with edit form component, models and form controls, using navigation and authorized views, transition to Web API and Entity Framework.
Build backend by adding code, creating a web api, storing units in sql server database with entity framework, code first migrations, and authentication with hashed passwords and json web tokens.
Master the model-view-controller pattern, where the model handles data, the view presents the user interface, and the controller manipulates data via a web api.
Create a unit controller deriving from controller base with api routing, and implement a get units action returning 200 with available units from the web API.
Use postman to test a .NET 5 api by creating a personal workspace and sending a get request to localhost:5000/api/unit, adjusting ssl verification as needed.
Update the unit service to fetch units from the web api with an http client, implement load units async, and call it on page initialization to load and display units.
Discover how dependency injection wires interfaces to concrete implementations, enabling flexible unit services and web API calls by registering services and injecting them into components and controllers.
The lecture explains HTTP methods get, post, put, and delete, how they request, create, update, or remove resources, and how soft delete and full object updates fit into CRUD mappings.
Compare synchronous and asynchronous calls. Add the async keyword and a task return type to make a get units method asynchronous when fetching data from the database.
Understand how entity framework acts as an object-relational mapper, linking models to relational databases and using code-first migration to create or update tables.
Install entity framework globally via the package manager console, verify the current version with dotnet tool, then add Microsoft.EntityFrameworkCore and Microsoft.EntityFrameworkCore.Design, and prepare for SQL Server code-first migrations.
Install SQL Server Express (version 2019) and SQL Server Management Studio, then implement a data context to prepare for building a Blazor full stack app with NATO framework.
Create a data context class that inherits from DbContext using Microsoft.EntityFrameworkCore, define a DbSet<Unit> units to map to the database and enable querying and saving changes.
Configure the app by adding a named connection string in app settings, register the DbContext in startup, and use SQL Server with the default connection for migrations.
Run dotnet ef migrations add initial to create the units table, review up and down methods, then apply with database update and verify the results in SQL Server Management Studio.
Connect to the Blazer Bettles database in SQL Server Management Studio, inspect the units table, and add units to return data to the client.
Store units in SQL Server and retrieve them in a Blazor WebAssembly app via the unit controller, using a data context and Entity Framework Core.
Add a unit via a post endpoint in a blazor webassembly full stack net 5 api, saving changes asynchronously and returning the updated units list for verification with postman.
Update a unit with an HTTP put by id and payload; check existence, update properties like title, attack, defense, banana cost, hit points, save changes asynchronously, and return updated unit.
Copy the update unit method, convert it to delete, use the unit id, call context.Units.Remove, save changes, and test with Postman to confirm the unit is removed.
Build a full-stack web app by integrating a web api and entity framework with SQL Server, using mvc, dependency injection, unit controller, supporting get, put, and delete to manage units.
Explore authentication by creating user accounts, tying units to accounts, and using Jason Webb tokens to authenticate players, while scaffolding a repository-based authentication controller and new user model.
Create a user model with id, email, username, password hash and salt, plus a delete flag and date created. Use ef core migrations to add a users table for authentication.
Learn how authentication uses password hashing with a random salt to prevent plain text storage, and how to generate the salt, hash, store, and compare to the stored hash.
Implement authentication using the repository pattern with a dedicated auth repository offering register, login, and user exists methods, injected via dependency injection and backed by a data context.
Registering a new user navigates the repository through a data context, saving the user and returning the id, while hashing the password with HMACSHA512 to produce a hash and salt.
Implement async user existence checks using AnyAsync with a lambda comparing emails, then return a proper error object if the email already exists.
Implement a generic service response wrapper, ServiceResponse<T>, to return data, isSuccessful, and message from auth and repository calls. Update interfaces and implementations and add a controller for registration testing.
Add the authentication api controller with repository injection, implement a register method using a user register model, and return ok or bad request.
Create a client-side authentication service with an interface and implementation, call the register API via HttpClient, and show toast notifications while navigating on success or error.
Implement a basic login by verifying the entered password against a stored hash with the salt, computing a new hash, and returning the user id upon success.
Demonstrates implementing a login flow in a blazor app, injecting auth and toaster services, handling login results, and updating authentication state for token authentication.
Explore how json web tokens enable stateless authentication, storing tokens in the browser, validating user identity with claims, expiration, and server-generated tokens for secure web APIs.
Update appsettings.json with a security key for jwt authentication, add an appsettings section with a 16+ character key, and install identity and jwt packages for token creation and validation.
Implement a private jwt creation method that builds claims, uses a secret key from app settings, signs with HS512, sets a one-day expiration, and validates token via Postman.
Store the jwt token in local storage and attach it to every http request via the authorization header, then update the authentication state by parsing jwt claims to authorize user data.
Configure dot net core authentication middleware and the jwt bearer scheme to secure web services and controllers, using the authorized attribute and extracting user claims.
Create a secured user controller that injects the data context, uses authorized attributes and claims to fetch the current user's bananas from the database via a get method.
Implement a client get bananas method, inject http client, update bananas, and notify components via bananas changed; connect to auth state to fetch bananas and handle token errors.
Master the authentication flow with json web tokens in a Blazor WebAssembly app, building a user model, repository pattern, authentication controller, using middleware and authorized attributes for registration and login.
Grow your army by building many units and introducing a one to many database relationship. Store data, use a utility service, and display the army in the Blazor WebAssembly clients.
Retrieve the current user and update their banana count by sending a http put to the api user add bananas endpoint, then save changes to the database.
Implement a one-to-many relationship by adding user units and a user_units table with foreign keys to users and units. Run migration, update database, and build a utility service to refactor.
Refactor by introducing a utility service to fetch the current authenticated user across controllers, using IHttpContextAccessor and a data context with dependency injection and service registration.
Create a server-side UserUnitController with authorization, inject data context and utility service, and implement a post method to validate bananas, build a user unit, and save changes.
Develop and expose a lean get user units API by creating a simple user unit response, mapping from user units, filtering by the current user, and testing with Postman.
Implement a client-side unit service with asynchronous web API calls, inject the banana service, handle success and error cases, refresh banana counts, and update user units on the client.
Add a new load user units async to the unit service interface, implement it, load and display user units in the army component, supporting post/get calls and hit point updates.
Learn to model a one-to-many relationship between users and their units, store your army in the database, and render it in the browser for battles and a leaderboard.
Create and connect battle logic in a Blazor WebAssembly app by building controllers, services, models, and components, implementing battle outcomes, revival flows, and banana rewards for the leaderboard.
Add battlefield victories and defeats properties to user model to track battles and enable a leaderboard, then create and apply a migration, update the database, and verify defaults are zero.
Implement a leaderboard by creating a user statistic model (rank, user id, user name, battles, victories, defeats), and expose a get leaderboards endpoint ordered by victories, defeats, and date created.
Define and implement a leaderboard service in the client project, using HttpClient to fetch user statistics from api/leaderboards and register it for use on the leaderboard page.
Create a leaderboard page as a razor component, connect to the leaderboard service, fetch and display rankings in a table with rank, user, victories, defeats, battles, and a fight button.
Inject the authentication state provider to get the current user id, then style leaderboard rows (green, bold) and conditionally show the button per entry in a Blazor WebAssembly app.
Create an authorized battle controller and a start battle method that takes an opponent id, retrieves the current user attack id, and validates the opponent.
Implement the battle logic by creating a battle results model with logs, damages, rounds, and victory status; simulate randomized fights between armies and apply banana rewards and revival.
Create a battle history by adding a battle model with id, attack, opponent, and winner. Configure fluent API to set no action on delete for attacker, opponent, and winner; migrate.
Implement a store battle history routine in a Blazor WebAssembly app, recording attacker, opponent, and battle results, persisting to the battles table, and validating history via Postman tests.
Implement a post endpoint to revive the army at a cost of 1000 bananas, resetting unit hit points to a random value, with a revive button on the army page.
Extend the registration flow to assign a starting unit by adding a start unit ID, implement the start unit method in the auth repository, and verify with postman.
Design and implement a battle service in Blazor WebAssembly that calls the server battle API to start battles, return results, and update leaderboards, banana counts, and toast notifications.
Set up a new battle log page that displays rounds from the last battle, color-codes kills, and navigates to the battle page after starting a battle.
Implement a battle history entry class and populate the user history endpoint to return a user's battles, including attacker id, opponent id, winner, rounds, damage, and date.
Create a new battle history page in the Blazor WebAssembly project, fetch history via the battle service, and display entries in a table showing date, attacker, opponent, rounds, and damage.
Master full-stack web development with blazer, web assembly, web api, entity framework, and sequel server by registering units, building an army, and competing in battles.
Explore future features for an online browser game, including user profiles, avatars, and buildings with new unit types, with bananas as a resource, and stay tuned for new lectures.
Install the Windows hosting bundle with dotnet runtime and IIS support, set up Secret Service and management studio, and enable Web Deploy before preparing the database.
Create and configure a sql server login and database, generate and apply migration scripts manually, and manage connection strings and app settings between development and deployment environments.
Publish the server and client Blazor WebAssembly projects with a Web Deploy profile, configure an IIS site, import settings, and open the deployed app to register.
Join the Blazor WebAssembly full stack bootcamp to build a modern web app from client to server, learning data binding, Razor components, forms, authentication, and Web API with Entity Framework.
Select the compatible .NET SDK and Visual Studio version, then install Postman for testing web API calls and use SQLite with a DB browser for database exploration.
Access the GitHub repository to obtain the complete code you will see during this course, mirroring the course structure.
Blazor WebAssembly is turning the web development world upside down.
With Blazor you can keep coding every part of your web application - meaning front end and back end - with the programming language and the framework you love - C# and .NET.
No need for JavaScript anymore and you can even use the same classes and methods you write for the server as well as for the client.
We will dive right into the code by first having a look at the standard example project of Blazor WebAssembly and then we already build the main project of this course, which is a classic online browser game, where users can create an army of fighters and send them into battle against other users.
Together with some customization options and climbing the leaderboard, this application will teach you how to use Blazor WebAssembly with Razor components in a playful way.
We will have a look at data- and event binding, communication between components, forms with their built-in components and validation options, how to use views only authorized users can see, how to make calls to a web service, and much more.
Additionally, you will learn how to build the back end of the browser game with a Web API and Entity Framework to store all the data in a SQL Server database.
By the end of this course, you will have what it takes to call yourself a full stack Blazor web developer.
With your new skills, you are ready to conquer any upcoming .NET web development project you want to build yourself or any project that is requested by a recruiter.
The only tools you need are Visual Studio, Postman, SQL Server, and a browser like Chrome or Firefox.
Everything is available for free and also cross-platform! So you can follow this course on Windows and macOS.
What You Will Learn
Introduction & Jumpstart
Create an ASP.NET Core hosted Blazor WebAssembly project
Examine the example project
Explore different ways to run your web application
Debug client & server code at the same time
Initialize a Git repository for your source control
Blazor WebAssembly Fundamentals
Create Razor components
Write C# code and HTML in the same file
The @code block
Component communication with parameters, event callbacks & services
Data binding & event handling
Add pages to your Blazor WebAssembly application
Routing & navigation in a Blazor app
Create and use models within your web application
Loops & more in Razor components
User feedback with toaster messages for errors & more
Manage NuGet Packages
Forms & Authentication
Create forms with validations
Use all built-in forms components like InputText, InputCheckbox, InputSelect & more
Build login & registration forms
Display validation errors
Utilize models with forms
Add the NavigationManager to navigate the user in your app
Utilize the AuthenticationStateProvider
Expose the AuthenticationState
Use the AuthorizeView component
Page restriction with the [Authorize] attribute
Use the LocalStorage for authentication
Web API & Entity Framework
The Model-View-Controller (MVC) pattern
Create models and controllers
Use the same models for the server and the client
Attribute routing (with parameters)
The HTTP request methods GET, POST, PUT & DELETE
Object-Relational-Mapping
Code-First Migration
SQL Server
How to use a DataContext and a proper ConnectionString
All previous HTTP requests with Entity Framework to save your data in a SQL Server database
Inspect your database with the SQL Server Management Studio
Authentication with JSON Web Tokens (JWT)
Create & verify JSON Web Tokens
Use the Repository pattern
Add & read claims
Secure controllers with the Authorize attribute
Use the JWT in the AuthenticationStateProvider of Blazor WebAssembly
Advanced Blazor WebAssembly, Web API & Entity Framework Implementations
Add relations to your database
Use LINQ functions to Select, Order & Include entities
Complete the game logic: Grow your army, fight battles, climb the leaderboard
...and more!
Publish & Deploy your Web Application
Deploy your web application on a Windows Server with IIS (Internet Information Services)
User the Web Deploy feature of IIS to publish and deploy your app with Visual Studio
Your Instructor
My name is Patrick and I will be your instructor in 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.
To this date, I was able to run seven courses on web development here on Udemy about .NET (Core), Blazor, single-page applications, Angular and DevOps - with a total of over 55.000 unique students and over 6.000 reviews.
If you have any questions, feel free to connect.
And if you still have any doubts, you have a 30-day money-back guarantee, no questions asked.
Are you ready to take the next step in web development?
I’m looking forward to seeing you in the course!
Course image: vector illustration/Shutterstock