Aer
A weather interface that lets the conditions shape the palette, while hourly and seven-day detail stay readable.
- Focus
- Weather App / Front-End System
- Tools & disciplines
- Vite, React 18, TypeScript, Tailwind CSS, Open-Meteo, Supabase
Context
A forecast gives you numbers; Aer adds a quick visual read of the conditions without asking color to replace the forecast details.
The interface still had to carry the useful details: city search, current conditions, hourly weather, a weekly outlook, unit switching, voice playback, and embeddable widgets.
Approach
Temperature sets the atmosphere: warmer conditions pull the page toward amber, colder ones toward blue. The forecast cards keep the actual data legible, so color adds a quick read rather than replacing the numbers.
I kept the interaction small and useful: tap the temperature to switch units, search cities with a debounced request that cancels stale results, and choose light or dark with the system setting. Open-Meteo keeps the core forecast keyless; voice playback and embeddable widget sizes extend the app for other contexts.
The production pass trimmed unused dependencies and components, extracted the pieces most likely to drift, and added unit coverage for conversions, condition mapping, dates, and responsive hooks.
Outcome
Aer pairs a live forecast with an interface that changes tone with the weather, while keeping city search and short- and week-range forecasts close at hand.
The production pass reduced runtime dependencies from 54 to 7, removed unused UI files, and added 24 tests around weather mapping, conversions, dates, and responsive hooks.
Project details
- Unit tests
- 24
- Runtime dependencies
- 7
- Weather API keys required
- 0
- Integrated live weather data through the Open-Meteo API without requiring an API key
- Built city search with autocomplete and AbortController-cancelled debounce to prevent stale results
- Mapped temperature to adaptive gradients across light and dark system modes
- Added text-to-speech forecast playback through ElevenLabs and a Supabase Edge Function
- Created embeddable widgets at small, medium, and large sizes using URL parameters
- Reduced runtime dependencies from 54 to 7 after a manual dependency audit
- Removed 46 unused shadcn/ui component files and a parallel toast system
- Added 24 unit tests for conversions, weather condition mapping, date formatting, and responsive hooks