🛫☕ TravelCafé — A Cross-Platform Coffee & Travel Experience Powered by Uno Platform

Walaa Zahran — Fri, 28 Nov 2025 23:30:38 +0000

This is a submission for the AI Challenge for Cross-Platform Apps - WOW Factor

What I Built

TravelCafé is a visually rich, multi-platform app built with .NET 8 + Uno Platform that blends the cozy aesthetic of a coffee shop with the excitement of global travel.

The idea was simple:

Create a home screen that feels like stepping into a premium café — but with a travel twist — and make it run beautifully everywhere.

The app features:

✨ A stunning hero section showcasing the “Drink of the Day”

🧭 A set of travel-themed coffee categories (Hot, Iced, Seasonal, Specials)

📝 A dynamic menu with animated drink cards

🤖 A playful AI-style “Cosmic Suggestion” engine that recommends drinks based on time of day

⚡ Smooth animations (fade-in list items, button scale effects)

💻 A single shared codebase running on WebAssembly, Desktop, Mobile… everywhere!

TravelCafé is built entirely using Uno Platform’s cross-platform UI — no platform-specific code required.

Demo

Project Repository: https://github.com/Walaa-Zahran/TravelCafe.git Live Web Demo: https://transcendent-elf-5841a3.netlify.app/

Screenshots

(

Cross-Platform Magic

TravelCafé runs on:

iOS

Android

Windows

macOS

Linux

WebAssembly (WASM)

All powered from one codebase.

The Uno Platform templates made it incredibly easy to scaffold the project, and the Skia backend ensured that the UI behaved consistently across devices — even animations worked the same way on desktop and in the browser.

I didn’t have to rewrite a single UI component for any platform.
That’s the magic of Uno.

Interactive Features

TravelCafé is designed to feel alive:

✔ Smooth List Animations

Each drink card fades + slides into view when filtering categories.
This gives the interface a premium, high-end feel.

✔ “Add” Button Micro-Animations

Tapping Add triggers a fun “squish” effect using a ScaleTransform animation.
Small detail → big impact.

✔ Category Filtering (Hot, Iced, Seasonal, Specials)

The chips dynamically change style and filter menu items instantly.

✔ AI-Inspired Drink Recommendation

A playful AI component called Cosmic Suggestion analyzes:

Your current system time

Drink categories

Menu availability

And suggests a drink:

“We think you’ll love: Supernova Mocha (Specials)”

It acts like a lightweight local AI that could later be replaced with a real ML model or cloud service.

The Wow Factor

The biggest “WOW” moments in TravelCafé are:

🌟 1. The Hero Experience

A rich, layered hero section with gradients, decorative shapes, and beautiful typography creates instant visual appeal.

🌟 2. The Animated Coffee Menu

Subtle entrance animations make the app feel smooth and luxurious — like a high-end mobile brand.

🌟 3. Cross-Platform Consistency

Running the exact same UI on WebAssembly and Windows (and mobile!) with no code changes is truly impressive to show.

🌟 4. AI-Driven “Surprise Me” Button

A delightful feature that feels magical even with simple rule-based logic.

🧩 How It Works (Tech Breakdown)
🛠 Built With:

Uno Platform

.NET 8

XAML UI

C# for state, mock data & logic

Skia + WebAssembly backends

🔧 Core Architecture:

Shared UI in MainPage.xaml

Mock drink data defined in C#

Filtering using observable collections

AI recommendation using simple heuristics

🎨 UI Highlights:

Dark theme with café & travel accents

Rounded card components

Horizontal category chips

Responsive layout that centers on wide screens

⚡ Animations:

DoubleAnimation for button scale

TranslateTransform for card slide-in

Opacity transitions for smooth fades

All animations are cross-platform because Uno mirrors WinUI’s animation model.

🚀 What’s Next?

If I expand TravelCafé after this challenge:

Replace mock AI with an actual recommendation model

Add a cart + checkout flow

Introduce real backend API for drinks, travel locations, and user profiles

Release full Android/iOS builds

Add Lottie animations for even more “wow”

💬 Final Thoughts

Building TravelCafé was incredibly fun — Uno Platform made it surprisingly fast to go from mockup to a real, animated multi-platform app.

If you’ve never tried Uno before, this challenge is the perfect place to start.
From zero to project in seconds — and from project to WOW in a single weekend.

☕✈️ Thanks for checking out TravelCafé!