Weather Status
A clear weather dashboard for current conditions, hourly temps, and a 7-day outlook—powered by the Meteo Weather API, with location search and °C/°F conversion.
The exploration
Turning dense meteorological data into a scannable layout: what matters first stays obvious, and deeper metrics stay one glance away.
Built with
React / Meteo Weather API / Tailwind CSS
The challenge
Weather apps drown people in numbers. Present current, hourly, and weekly data—plus pressure, visibility, humidity, and wind—without losing hierarchy, and support location search and °C/°F preferences across screen sizes.
The approach
I structured the UI into clear panels: current temperature and daily range, conditions with sunrise/sunset, a metrics strip for pressure, visibility, humidity, and wind, a paginated hourly forecast, and a horizontal 7-day outlook. React handles location search, unit toggle with persistent preference, and forecast pagination; Tailwind shapes a calm blue-and-white layout that stays readable on mobile. The Meteo Weather API supplies live data with loading and error handling around the requests.
The outcome
Users get current conditions first, then hourly and weekly detail without leaving one dashboard. The card layout and visual hierarchy keep the interface approachable; pagination keeps hourly density in check. A practical everyday utility that shows how API data and careful information design work together.