Work Archive
Web App

Triroute

Your flights. Your data. On a globe.

TypeScriptNext.jsReactTailwind CSSSupabaseZustand
2026-01 – Present

A flight tracking and trip planning platform built on real Amadeus flight data. Plan multi-stop trips on a 3D interactive globe, track costs and flight times, earn travel badges, and compare your stats on a global leaderboard.

Results

12
Badges
Unlockable travel achievements
Live
Real flights
Powered by Amadeus flight API
Global
Rankings
Leaderboard across all users

Features

  • 3D interactive globe with live flight arc visualisation via react-globe.gl and Three.js
  • Real flight data from Amadeus API — prices, airlines, durations, layovers
  • Multi-stop trip builder with per-leg cost and duration breakdown
  • Shareable boarding pass cards with trip summary export via html-to-image
  • Trips dashboard with aggregate stats across all saved trips
  • Flight insights page: most frequent routes, monthly activity heatmap
  • 12-badge achievement system (First Departure, Globe Trotter, Iron Butt, Around the World, etc.)
  • Global rankings leaderboard — Distance / Countries / Flights
  • Supabase auth + realtime backend

Challenges

  • Rendering smooth 3D flight arcs at scale with react-globe.gl and Three.js without frame drops
  • Amadeus API rate limits and response shape inconsistencies across route types
  • Designing the badge criteria to feel earned without being frustrating to unlock

Story

I kept planning trips across spreadsheets and tab soup — searching Skyscanner, copying prices, doing mental math on layovers. I wanted a single place to build a multi-stop trip with real flight data, see the route on a globe, and know exactly what it costs and how long it takes. That turned into a full platform: real Amadeus API prices, 3D arc rendering, and enough gamification to make obsessive trip planning feel rewarding.

What's Next

  • Carbon footprint tracking per trip
  • Collaborative trip building for group travel
  • Price alerts for saved routes
>_orn.sh
click to type