Live Weather Dashboard with Geolocation

The Problem

Weather apps are either too cluttered or too plain. Most prioritise ad revenue over information clarity. I wanted to explore what a weather UI looks like when the designer's only goal is making the data readable at a glance — no ads, no upsells, no dark patterns.

The Solution

Built a React dashboard that auto-detects your location via the browser Geolocation API and fetches live data from OpenWeatherMap. The UI uses Framer Motion for purposeful transitions — weather state changes animate in, not jump. Tailwind handles the responsive layout so it reads equally well on a phone screen as on a desktop.

Key decisions:

• Geolocation-first — no typing required; the app knows where you are and shows your weather immediately
• Animated state transitions — rain, sun, clouds each have distinct motion patterns to communicate conditions, not just label them
• Mobile-first layout — the primary card collapses gracefully on small screens without losing key data

The Outcome

A polished, production-deployed demo that demonstrates third-party API integration, geolocation handling, and motion design working together. The codebase is clean enough to be a reference for anyone learning how to combine real-time data with animation in React.