Wybrane realizacje Multimodalna platforma podróżnicza

Mapa lotnisk i połączeń bezpośrednich

Produkt autorski w rozwoju Produkt autorski w rozwoju 2026

TopFly to rozwijana, responsywna platforma do planowania i porównywania podróży multimodalnych. Obecna aplikacja wykorzystuje interaktywną mapę lotnisk oraz bezpośrednich połączeń lotniczych. Docelowo system ma porównywać całą trasę od drzwi do drzwi, obejmującą loty, kolej, autobusy, samochód, rower, odcinki piesze i transfery.

TopFly Preview — mapa lotnisk i bezpośrednich połączeń lotniczych

Rola

Projektant i developer produktu w toku — mapa, integracja API, ochrona sekretów, testy i Preview.

Problem

Porównanie pełnej trasy multimodalnej wymaga wielu źródeł, routingu i wiarygodnego rankingu. Pierwszy etap musiał dowieźć działającą mapę, ochronę klucza API i czytelny interfejs na telefonie — bez udawania, że cały silnik już istnieje.

Rozwiązanie

Obecny frontend to React, TypeScript i Vite z MapLibre GL JS: klastry lotnisk, markery, łuki połączeń i mobilny bottom sheet. Backend to lekki endpoint /api/direct-routes.php — serwerowe proxy AirLabs z walidacją IATA, paginacją, deduplikacją, cache i ukryciem klucza. Testy Vitest i Playwright oraz GitHub Actions obsługują Preview. Roadmapa (Node, Fastify, PostGIS, OTP i inne) jest zapisana osobno i nie jest stanem wdrożonym.

Opis projektu

TopFly to autorski produkt w rozwoju. Wyrósł z doświadczenia planowania podróży w wielu osobnych serwisach i z idei zebrania najważniejszych informacji w jednym, skupionym produkcie. Dzisiejsza wersja Preview pokazuje globalną mapę lotnisk (OurAirports) oraz bezpośrednie połączenia z serwerowego proxy AirLabs. To nie jest ukończony system door-to-door — produkcja nie jest aktywna. Nie twierdzę, że wszystkie planowane serwisy są już zintegrowane.

Kontekst projektu

Planowanie podróży rozprasza się między wieloma serwisami. Pierwszy etap musiał dowieźć działającą mapę i ochronę klucza API — bez udawania, że cały silnik multimodalny już istnieje.

Proces

Najpierw mapa i prototyp w kodzie, potem serwerowe proxy, testy i Preview. Roadmapa (kolej, autobusy, door-to-door) pozostaje oddzielona od stanu wdrożonego.

Zakres prac

  • Frontend React / TypeScript z mobile-first UI i PWA.
  • Mapa MapLibre: klastry, markery, łuki GeoJSON i dopasowanie viewportu.
  • Serwerowe proxy AirLabs z walidacją i cache.
  • Rozdzielenie trybu lotnisk i trybu bezpośrednich kierunków.
  • Testy i automatyczny deployment Preview.

Zakres funkcjonalny

  • Interaktywna mapa lotnisk (IATA/ICAO, miasto, państwo, typ, współrzędne).
  • Wizualizacja bezpośrednich połączeń: linia, dni operowania, czas lotu, codeshare.
  • Klastry i kategorie lotnisk.
  • Responsywna legenda, panele i mobilny bottom sheet.
  • Safe-area, prefers-reduced-motion i responsywne formularze.
  • Paginacja i rozróżnienie danych kompletnych oraz częściowych.

Technologie wykorzystane

  • React
  • TypeScript
  • JavaScript
  • TSX
  • Vite
  • nowoczesny 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

Kierunek rozwoju

Poniższe pozycje nie są wdrożone w obecnej wersji.

  • 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
  • Ceny lotów i historia cen
  • Połączenia przesiadkowe
  • Kolej i autobusy
  • Dojazd na lotnisko i transport z lotniska
  • Pełne trasy door-to-door
  • Ranking najtaniej / najszybciej / najwygodniej (bez modelu uczącego się)
  • Alerty cenowe
  • Opóźnienia i minimalny czas przesiadki
  • Emisja CO₂
  • Zapisywanie planów podróży
  • Wielojęzyczny interfejs

Niezawodność

  • Cache i deduplikacja odpowiedzi połączeń.
  • Paginacja zapytań do AirLabs.
  • Rozróżnienie danych kompletnych i częściowych.
  • Kontrolowany JSON z backendu.

Bezpieczeństwo

  • Klucz AirLabs wyłącznie po stronie serwera — brak w frontendzie.
  • Walidacja kodów IATA.
  • Blokowanie niebezpiecznych parametrów.
  • Ochrona sekretów w procesie Preview.

Dostępność

  • Dostępność interfejsu, focus i obsługa klawiatury w zakresie wdrożonego UI.
  • prefers-reduced-motion.
  • Safe-area na telefonach.
  • Testy na Samsung Galaxy S24 Ultra, iPhone i desktopach.

Testy

  • Vitest.
  • Playwright.
  • Testy na telefonach i desktopach.
  • Automatyczny deployment Preview z kontrolą commit SHA.

CI/CD i wdrożenie

  • Git, GitHub, Pull Requesty i branche funkcjonalne.
  • GitHub Actions i CI/CD.
  • Automatyczne Preview.
  • Oddzielenie develop, Preview, main i Production.
  • Produkcja nie jest jeszcze aktywna.

Potwierdzone rezultaty

  • Działająca mapa lotnisk na mobile i desktop.
  • Globalne dane OurAirports z klastrami i kategoriami.
  • Wizualizacja bezpośrednich połączeń.
  • Serwerowa integracja AirLabs bez klucza we frontendzie.
  • Automatyczny Preview i rozdzielone środowiska.

Aktualny status

Produkt autorski w rozwoju

Preview: https://topfly-preview.lukjohn.com/

Welcome to my world! What can I do for you?