Web app, 2026
Interactive Weather
Runs in the browser
A weather app with current conditions, an hourly forecast and the next seven days. Behind it is a 3D scene whose rain, snow, mist and lightning follow the weather code from Open-Meteo.
Why I built it
Most weather apps look the same whatever the weather, and the next few hours, which is what I usually want, take extra taps to reach. I wanted current conditions readable at a glance and a forecast that's quick to scan.
What it does
- A 3D scene driven by the WMO weather code: rain and snow particles, mist, wind rings and lightning, with a slow camera drift.
- A plain monochrome interface on top: current conditions, a one-line summary, the next hours and seven days.
- Location from the device, city search via Open-Meteo Geocoding, and up to eight saved places.
- Unit settings (°C / °F, km/h / mph, 12 / 24 h) are saved between visits.
How it's built
A typed data layer over Open-Meteo's forecast and geocoding APIs validates every field before it reaches the UI and builds the hourly and daily series from the raw arrays. Settings, saved places and the last forecast for each place are stored in localStorage and parsed defensively, so a corrupted entry doesn't break the app. When the network is down, the cached forecast is shown with a note. The scene is a set of small React Three Fiber components (particles, wind rings, a lightning light), with one config per weather type. Vitest covers the data layer and the weather code mapping.
Where it is now
It runs entirely in the browser with no API keys and no backend, which is why it can be embedded on this page.
Stack
- React 19
- TypeScript
- Vite
- React Three Fiber
- drei
- Tailwind CSS 4
- Open-Meteo
- Vitest