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 ?raw loader 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

Share this project:

Updates

Submission history