Wybrane realizacje Aplikacja pogodowa i geoprzestrzenna
Pogoda, mapy i warstwa BFF
Produkt autorski Produkt autorski — aktywny i rozwijany 2026
AURA to responsywna pogodowa PWA, którą zaprojektowałem i rozwijam w React i TypeScript. Produkcja korzysta z MapLibre i Leaflet oraz z warstwy Node/Nitro BFF: MET Norway jako źródło główne, Open-Meteo jako fallback, plus cache, circuit breaker i kontrolowana degradacja. Eksperymentalny globus 3D AURA EYE (CesiumJS 1.132) działa na Preview, nie na produkcji. GitHub Actions wdraża Preview; produkcja jest osobnym promote.
Rola
Projektant i developer produktu — od architektury BFF i map po testy, bezpieczeństwo i CI/CD.
Problem
Potrzebna była jedna, czytelna aplikacja pogodowa na telefon i pulpit, która łączy mapę, warstwy środowiskowe i wiarygodną prognozę — bez ujawniania sekretów we frontendzie i bez uzależnienia od jednego źródła danych.
Rozwiązanie
Zbudowałem warstwę BFF w Nitro, która waliduje i normalizuje odpowiedzi providerów, oraz frontend w React i TypeScript z MapLibre (mapy pogodowe) i Leaflet (trzęsienia ziemi). Niezawodność opiera się na fallbacku, circuit breakerze, cache i kontrolowanej degradacji. Testy idą przez Vitest, Playwright i no-egress harness. Wdrożenie rozdziela Preview od chronionej produkcji. CesiumJS jest użyty wyłącznie w eksperymentalnym AURA EYE na Preview.
Opis projektu
AURA to autorski produkt — eksploracja produktu, projektu i technologii, nie zlecenie zewnętrznego klienta. Zaprojektowałem i rozwijam responsywną aplikację pogodową i geoprzestrzenną w React, TypeScript, Vite, TanStack Start i Tailwind CSS. Własna warstwa Backend for Frontend agreguje i normalizuje prognozy z MET Norway oraz Open-Meteo.
Kontekst projektu
Potrzebna była jedna, czytelna aplikacja pogodowa na telefon i pulpit, łącząca mapę, warstwy środowiskowe i wiarygodną prognozę, bez ujawniania sekretów we frontendzie.
Proces
Najpierw powstał działający prototyp mapy i prognozy, potem warstwa BFF, niezawodność providerów, testy i rozdzielone środowiska Preview oraz produkcji.
Zakres prac
- Projekt i implementacja frontendu React / TypeScript.
- Warstwa Nitro BFF: agregacja, walidacja i normalizacja prognoz.
- MapLibre i Leaflet na produkcji; CesiumJS wyłącznie w AURA EYE na Preview.
- Mechanizmy niezawodności: fallback, circuit breaker, cache i timeouty.
- Ochrona SSRF, allowlisty hostów i serwerowe zarządzanie poświadczeniami.
- Testy Vitest i Playwright oraz automatyzacja GitHub Actions dla Preview.
Zakres funkcjonalny
- Responsywny interfejs pogodowo-mapowy z i18n.
- Warstwy pogodowe i lokalizacja na MapLibre; trzęsienia ziemi na Leaflet.
- Eksperymentalny globus CesiumJS (AURA EYE) na Preview, za flagą i zgodą.
- Splash screen oraz obsługa pierwszego uruchomienia.
- Kierunki i linki do Google Maps.
- Diagnostyka TLS, DNS, sieci, timeoutów i błędów providera.
Technologie wykorzystane
- React
- TypeScript
- Vite
- Tailwind CSS
- MapLibre GL
- Leaflet
- TanStack Start
- Node.js
- Nitro Server
- Backend for Frontend
- MET Norway API
- Open-Meteo API
- CesiumJS (AURA EYE Preview)
- Vitest
- Playwright
- GitHub Actions
Kierunek rozwoju
Poniższe pozycje nie są wdrożone w obecnej wersji.
- Google Photorealistic 3D Tiles (wymaga referrer-restricted klucza)
- NASA FIRMS (wymaga klucza)
Niezawodność
- Automatyczny fallback providerów.
- Circuit breaker.
- Cache prognozy i stale-cache recovery.
- Request coalescing.
- Timeouty i retry.
- Kontrolowana degradacja interfejsu.
- Diagnostyka TLS, DNS, network, timeout i błędów providera.
- Integracja z systemowym magazynem certyfikatów przez node --use-system-ca.
Bezpieczeństwo
- Ochrona SSRF i allowlisty hostów.
- Weryfikacja DNS.
- Poświadczenia wyłącznie po stronie serwera — brak sekretów we frontendzie.
- Bezpieczne komunikaty błędów.
- Blokowanie nierozpoznanych połączeń w testach.
- Secret scanning i kontrola publicznych source map.
- .env.example bez wartości sekretów.
- npm audit: 0 vulnerabilities według dostarczonego raportu.
Dostępność
- Stany focus i obsługa klawiatury.
- prefers-reduced-motion.
- Kontrola overflow na telefonach.
- Animowane i interaktywne komponenty z czytelnym stanem końcowym.
Testy
- Zestaw testów Vitest i Playwright, w tym no-egress harness z fixture’ami map i providerów.
- Pokrycie Chromium, Firefox oraz viewportów mobile, tablet i desktop.
- TypeScript tsc --noEmit, smoke testy Nitro i produkcyjny build.
- git diff --check, secret scanning i skan source map.
- Liczby testów nie są publikowane bez świeżego logu uruchomienia.
CI/CD i wdrożenie
- Git, GitHub i workflow Pull Requestów na branchach funkcjonalnych.
- GitHub Actions: automatyczne testy i deployment Preview.
- Rozdzielenie Preview i Production.
- Weryfikacja commit SHA.
- Chroniona produkcja.
Potwierdzone rezultaty
- Własna warstwa BFF agregująca MET Norway i Open-Meteo.
- Odporność na awarię jednego providera bez utraty całej aplikacji.
- MapLibre i Leaflet na produkcji; eksperymentalny globus CesiumJS na Preview.
- Pełny zestaw testów jednostkowych, integracyjnych i E2E.
- Automatyczny Preview i oddzielona produkcja.
Aktualny status
Produkt autorski — aktywny i rozwijany
Adres na żywo: https://aura.lukjohn.com/
Preview: https://aura-preview.lukjohn.com/