-
-
Check out how to play the game and the designated destination.
-
The journey begins!
-
Choose your first destination.
-
Real-time city data extracted via 'Webpage Content Extract' plugin and generated by LLM of Medo.
-
You can check the list of cities you have visited so far.
-
Achieved the second mission! What about the third one?
-
Destination selection may be restricted due to the arrival of a storm.
-
Accomplish all missions! The goal is to return to the country of departure.
-
The goal is almost here!
-
You Win!
-
If you run out of money, the game is over.
Sky Odyssey: The Global Flight Challenge
Inspiration
The inspiration for Sky Odyssey came from a simple question: "Can a travel app feel like a real adventure?" Most travel simulations are just about clicking from point A to B. I wanted to capture the drama of travel—the tension of a shrinking budget, the frustration of a sudden maintenance delay, and the thrill of discovering a hidden destination you didn't plan for.
What it does
Sky Odyssey is a strategic world tour simulation where players start at a random international hub with a limited budget of $3,800.
- Real Data: Uses OpenFlights data for authentic airports and routes.
- Dynamic Missions: Players must complete 2 visible missions and unlock a 3rd "Secret Final Mission".
Economy System: Flight costs are calculated based on distance: Cost = Distance (km) * 0.07
Survival Elements: Random events like "Severe Storms" (airport closures) and "Technical Maintenance" ($200 penalty) keep the gameplay unpredictable.
How I built it
Built using the MeDo AI platform, the project leverages a React-based frontend with a robust state management system.
- Data Strategy: To ensure 100% uptime and bypass deployment sync issues, I moved from traditional fetch calls to Synchronous Raw Imports (
import data from '...?raw') for our massive CSV datasets. - DataStore: To provide a persistent and challenging gameplay experience, I utilized MeDo's DataStore as our primary backend. The app dynamically manages complex variables such as the player’s budget, current airport, and chronological journey logs in real-time.
- Logic: Implemented complex filtering to ensure destination diversity (10 options, at least 5 international, no duplicate countries).
- UI/UX: Designed a "Flight Board" style interface with smooth transitions and real-time countdown timers for in-flight segments.
Challenges I ran into
The biggest challenge wasn't the code itself, but a persistent deployment sync bug that haunted the project for a week. The public URL was stuck in a "Selecting..." state while the editor showed a perfect build.
I had to engage deeply with the technical support team and Lorna to identify the root cause: server-side caching of external data fetches. The solution—refactoring the entire data loading architecture to bundled assets—was a high-stakes "surgical" fix that finally brought the app to life.
Accomplishments that I am proud of
- Turning a Bug into a Feature: The struggle with data loading led to a more robust, offline-capable architecture.
- Game Balance: Perfectly tuning the budget and mission count (reducing from 10 countries to 7) to eliminate "mid-game boredom."
- Random Event System: Creating an alert system that feels fair but punishing, adding a layer of strategy to route selection.
- Deep AI Integration & Real-time Research: Beyond static data, I integrated the "Webpage Content Extract" plugin to provide a truly dynamic experience. As soon as a flight begins, the app automatically crawls Wikipedia in the background based on the destination city name. The raw data is then processed by Baidu’s ERNIE AI model, which filters through thousands of words to extract four unique, fun facts (I call them "ERNIE's Travel Secrets").
UX Innovation: Since AI generation takes 10–30 seconds, I implemented a non-blocking background process. Players can enjoy the pre-set flight trivia while waiting for ERNIE’s "top-secret" live report to be ready, simulating a real-time satellite communication feel.
A Touch of Humor: To embrace the AI's creativity, I included a disclaimer for its occasional quirky "hallucinations," like calling Tokyo "The Big Mikan" (The Big Orange).
What I learned
- Resilience: Dealing with platform-level bugs taught us how to communicate effectively with engineering teams and pivot our technical strategy.
- Data Management: I learned that for datasets in web apps, bundling via Vite's
?rawloader can be significantly more reliable than fetch. - Pacing: I discovered that "less is more"—reducing the target country count actually increased the total engagement time.
What's next for Sky Odyssey
Sky Odyssey is just taking off. Our roadmap includes:
- Leaderboards: Competing for the "Cheapest World Tour" title.
- Visual Enhancements: Adding weather overlays on the map using real-time APIs.
- More Events: Introducing "Economy/Business Class" choices to manage a new "Fatigue" resource.
Built With
- medo
- openflights-data
- react
- supabase
- tailwind-css
- typescript
- vite
Log in or sign up for Devpost to join the conversation.