Selected projects Weather and geospatial application
Weather, maps and a BFF layer
Owner-created product Owner-created product — active and evolving 2026
AURA is a responsive weather PWA that I designed and continue to build in React and TypeScript. Production uses MapLibre and Leaflet plus a Node/Nitro BFF: MET Norway as the primary source, Open-Meteo as fallback, with cache, a circuit breaker and controlled degradation. The experimental AURA EYE 3D globe (CesiumJS 1.132) runs on Preview, not on production. GitHub Actions deploys Preview; production is a separate promote.
Role
Product designer and developer — from BFF architecture and maps through testing, security and CI/CD.
Challenge
The brief was a single, readable weather application for phone and desktop that combines a map, environmental layers and a trustworthy forecast — without exposing secrets in the frontend or depending on one data source.
Solution
I built a Nitro BFF that validates and normalizes provider responses, and a React/TypeScript frontend with MapLibre (weather maps) and Leaflet (earthquakes). Reliability comes from fallback, a circuit breaker, cache and controlled UI degradation. Tests run through Vitest, Playwright and a no-egress harness. Delivery separates Preview from protected production. CesiumJS is used only in experimental AURA EYE on Preview.
Project overview
AURA is an owner-created project — a product, design and technology exploration, not an external client commission. I designed and continue to develop a responsive weather and geospatial application in React, TypeScript, Vite, TanStack Start and Tailwind CSS. A dedicated Backend for Frontend layer aggregates and normalizes forecasts from MET Norway and Open-Meteo.
Project context
The need was a single, readable weather application for phone and desktop that combines a map, environmental layers and a trustworthy forecast without exposing secrets in the frontend.
Process
A working map-and-forecast prototype came first, then the BFF layer, provider reliability, tests, and separated Preview and production environments.
Scope of work
- Frontend design and implementation in React / TypeScript.
- Nitro BFF: aggregation, validation and forecast normalization.
- MapLibre and Leaflet in production; CesiumJS only in AURA EYE on Preview.
- Reliability: fallback, circuit breaker, cache and timeouts.
- SSRF protection, host allowlists and server-side credentials.
- Vitest and Playwright coverage plus GitHub Actions for Preview.
Functional scope
- Responsive weather-map interface with i18n.
- Weather layers and location picking on MapLibre; earthquakes on Leaflet.
- Experimental CesiumJS globe (AURA EYE) on Preview, behind a flag and consent.
- Splash screen and first-run handling.
- Directions and Google Maps links.
- TLS, DNS, network, timeout and provider-error diagnostics.
Technologies used
- 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
Development roadmap
The items below are not shipped in the current version.
- Google Photorealistic 3D Tiles (referrer-restricted key required)
- NASA FIRMS (key required)
Reliability
- Automatic provider fallback.
- Circuit breaker.
- Forecast cache and stale-cache recovery.
- Request coalescing.
- Timeouts and retry.
- Controlled interface degradation.
- TLS, DNS, network, timeout and provider-error diagnostics.
- System certificate store integration via node --use-system-ca.
Security
- SSRF protection and host allowlists.
- DNS verification.
- Credentials only on the server — no secrets in the frontend.
- Safe error messages.
- Unrecognized connections blocked in tests.
- Secret scanning and public source-map control.
- .env.example without secret values.
- npm audit: 0 vulnerabilities per the supplied report.
Accessibility
- Focus states and keyboard support.
- prefers-reduced-motion.
- Overflow control on phones.
- Animated interactive components with a readable final state.
Testing
- Vitest and Playwright suites, including a no-egress harness with map and provider fixtures.
- Chromium, Firefox, and mobile, tablet and desktop viewports.
- TypeScript tsc --noEmit, Nitro smoke tests, production build.
- git diff --check, secret scanning and source-map scanning.
- Test counts are not published without a fresh run log.
CI/CD and delivery
- Git, GitHub and a pull-request workflow on feature branches.
- GitHub Actions: automated tests and Preview deployment.
- Separated Preview and Production.
- Commit SHA verification.
- Protected production.
Verified outcomes
- A dedicated BFF aggregating MET Norway and Open-Meteo.
- One provider failing does not take the whole application down.
- MapLibre and Leaflet in production; an experimental CesiumJS globe on Preview.
- Unit, integration and end-to-end test coverage.
- Automatic Preview and a separated production environment.
Current status
Owner-created product — active and evolving
Live URL: https://aura.lukjohn.com/
Preview: https://aura-preview.lukjohn.com/