Case study · 2025
Live Weather Dashboard with Geolocation
A real-time weather dashboard that auto-detects your location and presents clean, animated weather data using OpenWeatherMap. Built with React, TailwindCSS, and Framer Motion for a modern, mobile-first experience.
Highlights the ability to combine third-party APIs, geolocation, motion design, and real-time data handling into a polished, production-ready interface.
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.