Weather History
A progressive web app that visualizes historical weather data for any location worldwide, featuring interactive astronomical tools, multi-year comparison views, and offline-first architecture.
App in Action
Project Details
Problem / Approach / Result
Weather data is abundant but rarely tells a story
Existing weather apps focus almost exclusively on forecasts -- what is coming next. But understanding climate means looking backward. There was no lightweight, mobile-friendly tool that let a casual user visually compare today's weather to the same day 10, 20, or 50 years ago without spreadsheets or API keys.
- How does today compare to the same day decades ago? No app answered this
- Historical weather data exists but is buried in raw archives and APIs
- No visual tool for spotting long-term climate trends at a local level
- Astronomers and photographers lacked integrated golden hour and moon phase tools
Treat historical weather as a first-class experience
Rather than tacking historical data onto a forecast app, the solution was built from the ground up around comparison and context. A compare-first architecture shows the same calendar day across every available year, making trends immediately visible without constructing queries.
- Default view shows the same date across every available year back to 1940
- Progressive data loading fetches 10 years at a time to keep initial loads fast
- Planetary Suite adds moon phases, golden hour, and an interactive Earth globe
- Service workers cache the entire app shell for offline-first reliability
- Single React codebase serves web, installable PWA, and native Android via Capacitor
A polished tool for exploring 80+ years of weather
A production-ready application that transforms raw meteorological archives into an intuitive visual experience. Users can explore historical weather for any city worldwide and interact with astronomical tools that add meaning to the data.
- 80+ years of historical data accessible for any city worldwide
- Sub-second initial load via Vite build optimization and code splitting
- Three complementary views -- Same-Day, Day Scroll, and Month Summary
- Cross-platform reach with web, installable PWA, and native Android
- Full offline support with automatic update detection
Key Features
Same-Day Comparison
Select any date and instantly compare that day's weather across every available year back to 1940.
Moon Phase Visualizer
Interactive slider-driven tool rendering accurate moon phases using SVG with crater details and gradient shading.
Interactive Earth Globe
Draggable, rotatable Earth visualization rendered from NASA Blue Marble satellite imagery.
Golden Hour Calculator
Sunrise, sunset, and photographer-friendly golden hour and blue hour windows for any location.
Offline-First PWA
Service workers cache the entire app shell for instant loading without a network connection.
Cross-Platform
Single React codebase serves web, installable PWA, and native Android via Capacitor.
Architecture
Open-Meteo API provides 80+ years of historical weather data and forecasts for any location worldwide.
Progressive data loading fetches 10 years at a time, while the comparison engine aligns historical data by calendar date.
React 19 components provide three weather comparison views plus astronomical tools including moon phases and golden hour.
Service workers cache the entire app shell via Workbox for offline-first reliability with automatic update detection.
Key Metrics
Tech Stack
Component-based UI with hooks for state management
Type-safe codebase with strict mode for reliability
Fast build tooling with HMR and code splitting
Utility-first responsive, mobile-first design
Accessible, unstyled component primitives
Declarative charting for temperature and precipitation
Native Android packaging from the web codebase
Service worker tooling for PWA caching
Free, open-source weather data archive and forecast
Lightweight date manipulation and formatting
Consistent, customizable SVG icon system
| Category | Technology | Purpose |
|---|---|---|
| Frontend | React 19 | Component-based UI with hooks for state management |
| Language | TypeScript | Type-safe codebase with strict mode for reliability |
| Build | Vite | Fast build tooling with HMR and code splitting |
| Styling | Tailwind CSS 4 | Utility-first responsive, mobile-first design |
| Components | Radix UI | Accessible, unstyled component primitives |
| Charts | Recharts | Declarative charting for temperature and precipitation |
| Mobile | Capacitor 8 | Native Android packaging from the web codebase |
| Offline | Workbox | Service worker tooling for PWA caching |
| Data | Open-Meteo API | Free, open-source weather data archive and forecast |
| Dates | date-fns | Lightweight date manipulation and formatting |
| Icons | Lucide React | Consistent, customizable SVG icon system |