MAUI UI Challenge 1
UI Challenge: Coffee Ordering App in .NET MAUI
Estimated time: 4-6 hours
Level: Rookie-Intermediate
Technologies: .NET MAUI, XAML, C#, MVVM
Target UI Preview
1. Initial Setup
Requirements
- Visual Studio 2022 (17.4+)
- .NET 9 SDK
- Android/iOS SDKs (for emulation)
Initial Commands
# Create new MAUI project
dotnet new maui -n CoffeeBlissApp
# Add optional packages
cd CoffeeBlissApp
dotnet add package CommunityToolkit.Maui --version 5.2.0
dotnet add package Syncfusion.Maui.Core --version 22.2.5
dotnet add package SkiaSharp.Views.Maui.Controls --version 2.88.3
.UseMauiApp<App>()
.UseMauiCommunityToolkit()
.ConfigureSyncfusionCore()
.ConfigureFonts(fonts => {
fonts.AddFont("sora.ttf", "CafeFont");
});
2. Project Structure
CoffeeApp/
├── Models/
│ ├── Product.cs
│ └── Order.cs
├── ViewModels/
│ ├── CatalogViewModel.cs
│ └── CheckoutViewModel.cs
├── Views/
│ ├── CatalogPage.xaml
│ └── CheckoutPage.xaml
├── Resources/
│ ├── Styles/
│ │ └── CustomStyles.xaml
│ └── Fonts/
└── Services/
└── PaymentService.cs
3. Recommended Libraries
| Library | UsUsage |
|---|---|
| CommunityToolkit.MVVM | MVVM Implementation |
| Syncfusion Charts | Sales Charts |
| Lottie | Fluid Animations |
4. Additional Challenges
Dark Mode:
App.Current.UserAppTheme = AppTheme.Dark;
Final UI Preview
5. Conclusion
This first .NET MAUI UI Challenge served as a hands-on introduction to building a clean, modern mobile UI using the .NET MAUI framework. The activity walked through setting up the environment, structuring a scalable application with MVVM, and leveraging popular libraries like CommunityToolkit, Syncfusion, and Lottie to enhance the user experience.
By recreating a coffee ordering interface, the challenge offered practical experience with XAML layouts, custom fonts and styles, and responsive design — all within the context of a real-world app scenario. It also introduced useful features such as dark mode support and animated elements to make the UI more dynamic and engaging.
This challenge is a great starting point for developers exploring .NET MAUI, setting the foundation for more complex apps and deeper integration with native device capabilities.
Stay tuned for future UI challenges and walkthroughs!
Happy coding!