Weather Forecast App
A beautiful, accessible weather application with 7-day forecasts, hourly breakdowns, and severe weather alerts using the OpenWeather API.
Overview
A progressive web app that delivers accurate weather forecasts with a focus on accessibility and beautiful animations. Supports geolocation, city search, and saved locations.
Problem
Most weather apps are either bloated with ads and unnecessary features, or lack accessibility for users who rely on screen readers and keyboard navigation.
Solution
Created a lightweight PWA that prioritizes performance and accessibility. The app uses the OpenWeather API for data, Framer Motion for smooth animations, and follows WCAG 2.1 AA guidelines throughout.
Tech Stack
- Frontend: React 18, TypeScript
- Animations: Framer Motion
- API: OpenWeather API
- PWA: Workbox for service worker management
- Styling: CSS Modules with custom properties
Key Features
- 7-day forecast with hourly breakdown
- Severe weather alerts with push notifications
- Geolocation and city search
- Saved locations with drag-to-reorder
- Fully accessible with screen reader support
- Works offline with cached data
Lessons Learned
Building an accessible weather app highlighted the importance of ARIA live regions for dynamic content updates. Screen reader users need to be notified when forecast data changes without losing their current focus position.