In this comprehensive tutorial, I'll show you exactly how to create and configure a .NET MAUI Blazor Hybrid(mobile) and Web App solution that runs on multiple platforms from a single codebase!
What This Tutorial Covers:
Creating the .NET MAUI Blazor Hybrid and Web App Template - Step-by-step project creation Understanding the Solution Structure - 4 projects working together seamlessly
Configuring All Project Files - .csproj, Program.cs, and configuration files
Adding Radzen Blazor Components - Professional UI library integration
Setting Up Authentication Services - Complete AuthenticationService implementation
Custom Theme Configuration - Beautiful green (#008751) soccer-themed styling
Shared Code Architecture - Write once, run on Web, Android, iOS, Windows, macOS
HttpClient Setup - API integration ready for all platforms
Solution Structure Explained:
1. SoccerLeague.Client.Shared - Shared components, services, and styles
2. SoccerLeague.Client - MAUI Hybrid app for mobile and desktop
3. SoccerLeague.Client.Web - ASP.NET Core host server
4. SoccerLeague.Client.Web.Client - Blazor WebAssembly client
Complete Configuration
Includes: MAUI Hybrid Setup: MauiProgram.cs configuration with Radzen services BlazorWebView integration Platform-specific settings (Android, iOS, Windows, macOS)
index.html with proper CSS/JS references
Blazor Web Setup:
Server-side Program.cs with WebAssembly components Interactive rendering modes configuration Static file and antiforgery middleware Assembly registration for shared components WebAssembly Client Setup:
WebAssemblyHostBuilder configuration
Radzen services registration
HttpClient base address setup
Authentication service injection
Shared Library: AuthenticationService with login/register/logout
Token management (access & refresh tokens)
Custom theme CSS with green color scheme
Shared imports and dependencies
Styling & Theming: Custom green (#008751) primary color throughout Radzen Material theme base Responsive design patterns Loading indicators and animations Professional card and button styles
Prerequisites: Visual Studio 2022 (v17.8 or later) .NET 9.0 SDK installed .NET MAUI workload installed Basic understanding of Blazor
What You'll Be Able To Do: After following this tutorial, you'll have a fully configured solution ready for: Building cross-platform mobile apps (iOS & Android) Creating desktop applications (Windows & macOS) Deploying web applications Sharing 100% of your UI code across all platforms Connecting to REST APIs with authentication
Get The Complete Source Code: 
GitHub Repository: GitHub - benjaminsqlserver/SoccerLeagueAppWithMongoDB
Clone the repo and follow along, or use it as a reference template for your own projects! 
Perfect For:
Developers new to .NET MAUI Blazor Hybrid architecture
Anyone wanting to understand the multi-project setup
Developers transitioning from traditional web to cross-platform
Those confused by the Hybrid + Web template structure
Students learning modern .NET development patterns
Why This Setup Matters:
This is Microsoft's recommended approach for building modern cross-platform applications. Instead of maintaining separate codebases for web and mobile, you write your components ONCE and deploy EVERYWHERE.
This tutorial demystifies the entire setup process!
Key Takeaways:
How the 4 projects communicate and share code Proper NuGet package installation across projects
Service registration in different hosting models
CSS/JS reference configuration for each platform
Authentication architecture that works everywhere
If you find this helpful: LIKE the video SUBSCRIBE for more .NET tutorials
SHARE with developers learning cross-platform development
COMMENT your questions below
Next in this series: Building authentication pages, creating protected routes, and connecting to MongoDB API! #dotnet #maui #blazor #csharp #webdevelopment #mobiledevelopment #crossplatform #aspnetcore #programming #coding #radzen