Project Overview
I hated the weather app I was using. Too many ads, messy layout, and a clunky UI. I know better apps already exist. But I still wanted to build my own, and I had a free weekend, so I did.
It pulls from OpenWeather, National Weather Service text for U.S. cities, Atmospore for pollen, Pexels for city photos, and RainViewer for radar. I wrapped it in Capacitor for Android. The phone on this page is a copy of that home screen so you can try it without API keys.
The Process
Daily-use research
I stuck with the apps I already had and wrote down what annoyed me: hourly weather was only accessible through a web link, the radar was stuck in another tab, pollen data was hard to find, and switching cities felt clunky.
Home-screen prototype
I designed one long scroll: a hero that shrinks as you go, an hourly strip, an expandable week, then cards for air, wind, sun, rain, humidity, pollen, and radar.
Live data & theming
The colors change with the weather. You swipe between saved cities on the hero. Units and clock format live in a settings sheet so you stay on the home screen.
Android wrap
Capacitor adds location and notifications. The same web UI runs on the phone and in the demo on this page.
Daily-use research
I stuck with the apps I already had and wrote down what annoyed me: hourly weather was only accessible through a web link, the radar was stuck in another tab, pollen data was hard to find, and switching cities felt clunky.
Home-screen prototype
I designed one long scroll: a hero that shrinks as you go, an hourly strip, an expandable week, then cards for air, wind, sun, rain, humidity, pollen, and radar.
Live data & theming
The colors change with the weather. You swipe between saved cities on the hero. Units and clock format live in a settings sheet so you stay on the home screen.
Android wrap
Capacitor adds location and notifications. The same web UI runs on the phone and in the demo on this page.
Try the app
Scroll the home screen, tap a weekday for hourly detail, swipe between Philadelphia, Denver, and Seattle, open saved cities to search those three, and use Settings for °F/°C, wind units, and 12/24-hour time. Radar tiles are live from RainViewer. The forecasts here are saved demo data.
Key Features
Sky-aware theme
Clear, cloudy, rain, snow, and night each get their own colors so the app feels like the weather outside.
Saved cities
Swipe the hero or tap the dots to switch places. Search, your list, and display settings live in one sheet.
Radar on home
Animated RainViewer radar sits with the other detail cards, not on a separate map tab.
Pollen & details
Tree, grass, and weed levels sit next to humidity, wind, sunrise, and rain rate.
What I Learned
New Skills & Insights
Dense mobile UI
Fitting radar, pollen, and a full week onto one scroll without making the top of the screen feel cramped.
Condition theming
Matching color sets to weather so night rain and midday sun do not look the same.
Web to Android
Reusing one UI through Capacitor, and keeping a static demo that does not need live keys.