A beautiful, production-ready weather dashboard with real-time data, 5-day forecasts, air quality index, UV index, interactive maps, and multilingual support — all wrapped in a sleek dark/light theme.
| Feature | Description |
|---|---|
| 🌤 Current Weather | Temperature, humidity, wind, pressure, feels-like, visibility, cloud cover |
| 📅 5-Day Forecast | Daily min/max temps, precipitation probability, weather icons |
| ⏰ Hourly Forecast | Next 8 hours with temp and rain chance |
| 📊 Temperature Chart | Interactive line chart (temp + humidity) via Chart.js |
| 🌧 POP Chart | Precipitation probability bar chart for the next 24h |
| 🫁 Air Quality Index | AQI level with PM2.5, PM10, O₃, NO₂, SO₂, CO breakdown |
| ☀️ UV Index | Conic-gradient gauge with severity levels |
| Condition-based advisories for extreme heat, cold, wind, storms | |
| 🗺 Interactive Map | Leaflet map with Radar / Wind / Temp layer toggles |
| 🌍 Multilingual | EN, FR, ES, DE, JA — full i18n throughout the UI |
| 🌓 Dark / Light Theme | Persisted preference with smooth transitions |
| 🧭 Wind Compass | Visual wind direction indicator with animated arrow |
| 🔍 Autocomplete Search | City suggestions as you type |
| ⭐ Favorites & Recents | Save cities, quick-access chips |
| ⚙️ Settings Modal | Custom API key, default city, auto-refresh interval |
| ⌨️ Keyboard Shortcuts | Press ? for help — / search, L location, Esc close |
| 🏷 Weather Badge API | Embeddable SVG badge for your GitHub profile/README |
| 📱 Pull to Refresh | Touch gesture to reload weather data |
| 📴 Offline Support | Service worker caches API responses — shows cached data offline |
| 🔒 Security Headers | CSP, X-Frame-Options, rate limiting with X-RateLimit-* headers |
| 🎨 Animated Icons | CSS-animated weather icons (sun, clouds, rain, snow, thunder, mist) |
| 📦 PWA Ready | Service worker for offline-capable install with favicon |
| 🐳 Docker Support | Multi-stage Dockerfile, one-command deployment |
- Python 3.11+
- OpenWeatherMap API key (free tier works)
# Clone
git clone https://github.com/soufianeoi/weather-dashboard.git
cd weather-dashboard
# Setup
pip install -r requirements.txt
echo "OWM_API_KEY=your_key_here" > .env
# Run
python app.pydocker compose up --buildThen open http://localhost:8000.
pytest tests/ -vBackend
- Python 3.11 / FastAPI / Uvicorn
- httpx (async HTTP client)
- In-memory TTL caching · Rate limiting middleware · CSP security headers
Frontend
- Vanilla JavaScript (ES6+)
- Tailwind CSS · Chart.js · Leaflet · Lucide Icons
- PWA with service worker (offline caching)
Infrastructure
- Docker (multi-stage) · Docker Compose
- GitHub Actions (ruff lint → pytest with coverage → Docker push to ghcr.io)
- Dependabot for automated dependency updates
- pre-commit hooks for code quality
| Method | Endpoint | Description |
|---|---|---|
| GET | /api/health |
Health check |
| GET | /api/geocode?q= |
City autocomplete |
| GET | /api/weather?city= |
Current weather |
| GET | /api/weather/coords?lat=&lon= |
Weather by coords |
| GET | /api/forecast?city= |
5-day forecast |
| GET | /api/forecast/coords?lat=&lon= |
Forecast by coords |
| GET | /api/air-quality?lat=&lon= |
Air quality index |
| GET | /api/uv?lat=&lon= |
UV index |
| GET | /api/alerts?lat=&lon= |
Weather alerts |
All endpoints accept lang=en|fr|es|de|ja for localized responses.
Embed live weather data in your GitHub profile or website:
Shows current temperature, weather condition, and a color-coded background based on the weather.
| Parameter | Description |
|---|---|
city |
City name (required) |
lang |
Language: en, fr, es, de, ja |
appid |
Your own OWM API key (optional) |
Coords variant: /api/badge/coords?lat=51.5&lon=-0.1
Contributions are welcome! Please read CONTRIBUTING.md first.
MIT License — see LICENSE for details.
Created by Soufiane Oihi