Selected projects Multimodal travel platform
Airports and direct-route map
Owner-created product in development Owner-created product in development 2026
TopFly is an evolving, responsive platform for planning and comparing multimodal journeys. The current application uses an interactive map of airports and direct flight connections. The destination system is meant to compare a full door-to-door itinerary covering flights, rail, buses, car, bicycle, walking segments and transfers.
Production version — coming soon
Role
Product designer and developer in progress — map, API integration, secret protection, tests and Preview.
Challenge
Comparing a full multimodal itinerary needs many sources, routing and a trustworthy ranking. The first stage had to ship a working map, API-key protection and a readable phone UI — without pretending the full engine already exists.
Solution
The current frontend is React, TypeScript and Vite with MapLibre GL JS: airport clusters, markers, connection arcs and a mobile bottom sheet. The backend is a lean /api/direct-routes.php endpoint — a server-side AirLabs proxy with IATA validation, pagination, deduplication, cache and a hidden key. Vitest, Playwright and GitHub Actions run Preview. The roadmap (Node, Fastify, PostGIS, OTP and more) is documented separately and is not the shipped state.
Project overview
TopFly is an owner-created product in development. It grew from the experience of planning journeys across multiple services and the idea of bringing the most useful information into one focused product. Today’s Preview shows a global airport map (OurAirports) and direct routes through a server-side AirLabs proxy. This is not a finished door-to-door system — production is not live. I do not claim that all planned services are already integrated.
Project context
Travel planning is split across many services. The first stage had to ship a working map and API-key protection — without pretending the full multimodal engine already exists.
Process
The map and a coded prototype came first, then the server-side proxy, tests and Preview. The roadmap (rail, coaches, door-to-door) stays separate from what is shipped.
Scope of work
- React / TypeScript frontend with a mobile-first UI and PWA.
- MapLibre map: clusters, markers, GeoJSON arcs and fit-to-view.
- Server-side AirLabs proxy with validation and cache.
- Separate airport-browse and direct-destination modes.
- Tests and automatic Preview deployment.
Functional scope
- Interactive airport map (IATA/ICAO, city, country, type, coordinates).
- Direct-route visualisation: airline, operating days, flight time, codeshare.
- Airport clusters and categories.
- Responsive legend, panels and a mobile bottom sheet.
- Safe-area, prefers-reduced-motion and responsive forms.
- Pagination and a split between complete and partial data.
Technologies used
- React
- TypeScript
- JavaScript
- TSX
- Vite
- modern CSS
- Responsive Web Design
- mobile-first
- PWA
- MapLibre GL JS
- WebGL
- GeoJSON
- OurAirports
- AirLabs Routes API
- PHP endpoint /api/direct-routes.php
- Vitest
- Playwright
- GitHub Actions
Development roadmap
The items below are not shipped in the current version.
- Node.js
- TypeScript backend
- Fastify
- BFF
- Zod
- OpenAPI
- PostgreSQL
- PostGIS
- Redis
- BullMQ
- TanStack Query
- Zustand
- React Router
- i18n
- Service Worker
- OpenStreetMap
- OpenTripPlanner
- GTFS
- GTFS Realtime
- Valhalla
- GraphQL
- multimodal routing
- geospatial queries
- route ranking
- circuit breaker
- request coalescing
- rate limiting
- Docker
- OpenTelemetry
- Sentry
- Duffel
- Amadeus
- GDS/NDC
- Flight prices and price history
- Connecting itineraries
- Rail and coaches
- Airport access and onward travel
- Full door-to-door routes
- Cheapest / fastest / most convenient ranking (no machine-learning model)
- Price alerts
- Delays and minimum connection time
- CO₂ estimates
- Saved travel plans
- Multilingual interface
Reliability
- Cache and deduplication of route responses.
- Pagination of AirLabs requests.
- Distinction between complete and partial data.
- Controlled JSON from the backend.
Security
- AirLabs key only on the server — never in the frontend.
- IATA code validation.
- Blocking of unsafe parameters.
- Secret protection in the Preview pipeline.
Accessibility
- Accessible UI, focus and keyboard support in the shipped interface.
- prefers-reduced-motion.
- Safe-area on phones.
- Testing on Samsung Galaxy S24 Ultra, iPhone and desktops.
Testing
- Vitest.
- Playwright.
- Phone and desktop testing.
- Automatic Preview deployment with commit SHA checks.
CI/CD and delivery
- Git, GitHub, pull requests and feature branches.
- GitHub Actions and CI/CD.
- Automatic Preview.
- Separated develop, Preview, main and Production.
- Production is not live yet.
Verified outcomes
- A working airport map on mobile and desktop.
- Global OurAirports data with clusters and categories.
- Visualisation of direct connections.
- Server-side AirLabs integration with no frontend API key.
- Automatic Preview and separated environments.
Current status
Owner-created product in development
Preview: https://topfly-preview.lukjohn.com/