This is a submission for the AI Challenge for Cross-Platform Apps - WOW Factor
What I Built
I built MicroWin Mixology Bar, a coffee shop–inspired home screen for tiny focus rituals and micro-tasks.
Instead of a standard “app menu”, the home page is styled like a drink board at a specialty café. Each “drink” is actually a short guided ritual such as a deep focus reset, a calm breathing break, or a quick social connection boost. Alongside those drinks, the app surfaces small tasks you can complete during that micro-ritual so your break still feels productive.
The whole experience is meant to feel cozy, playful, and welcoming, while still being practical for real-world work sessions.
Demo
GitHub repository:
https://github.com/shanny2022/MicroWin-Mixology-Bar
Demo (WebAssembly dev server):
The app currently runs as a local WebAssembly app using dotnet run -f net10.0-browserwasm. After running the command, I open the provided http://localhost:5000 URL in my browser.
Screenshots:
(Here you can embed images using the DEV editor: the coffee-shop home screen, any detail view, and a full-page overview.)
If you prefer video, you can also upload or link a short screen recording that shows:
- Launching the WebAssembly app
- Landing on the MicroWin Mixology Bar home page
- Scrolling through featured rituals and micro-tasks
Cross-Platform Magic
MicroWin Mixology Bar is built with Uno Platform + .NET, targeting:
- WebAssembly (browser) – current running target for the challenge
- Desktop and mobile are supported by the same codebase via Uno; with the right workloads and tooling, I can retarget this UI to Android, iOS, Windows, macOS, and Linux.
The key thing I enjoyed was being able to think in terms of one XAML UI and one C# codebase while still keeping a coffee-shop experience that feels at home on multiple devices. The same layout and components (Grid, StackPanel, TextBlocks, Buttons, etc.) translate cleanly to different form factors while Uno handles the platform details.
Interactive Features
On the home screen I focused on simple but satisfying interactions:
- Featured “drinks” displayed as modern cards with titles, descriptions, and subtle hierarchy (name, description, duration).
- A “Today’s micro tasks” section that pairs descriptive text with quick Start buttons, encouraging you to take one small action instead of feeling overwhelmed.
- A scrollable layout that feels like browsing a curated board in a real café rather than a plain list of links.
Under the hood, a MicroWinService uses HttpClient with JSONPlaceholder to fetch sample todos, which are mapped into a custom MicroWinTask model. That keeps the UI grounded in data, even though the theme is cozy and playful.
I intentionally kept interaction lightweight and clear so that the UI feels relaxing instead of busy.
The Wow Factor
The “wow” for me is how much vibe I could get out of a small Uno XAML page:
- A coffee shop–style experience instead of a generic dashboard.
- Tiny focus rituals presented as drinks, which makes the idea of “doing a 5-minute reset” feel fun instead of like a chore.
- A smooth WebAssembly experience powered by .NET and Uno, so this kind of rich UI isn’t limited to just one platform.
I’m also proud that this is my first Uno Platform project wired up end to end: custom models (MicroWinDrink, MicroWinTask, MicroWinStep), a service (MicroWinService) using real HTTP calls, and a designed homepage that actually runs in the browser from a single .NET codebase.
Thanks for checking out MicroWin Mixology Bar! ☕✨
Top comments (0)