A modern, high-performance weather visualization platform built with React 18 and Vite. This dashboard provides a comprehensive look at current conditions, air quality, and long-term forecasts using a mobile-first, responsive design.
- Current Stats: Real-time temperature, "feels like," humidity, and wind speed.
- Dynamic UI: Backgrounds and icons update automatically based on weather conditions (Clear, Clouds, Rain, etc.).
- Rain Probability: Stay prepared with precise precipitation chances.
- Sun Cycles: Accurate sunrise and sunset timings for your local time.
- Hourly Forecast: Horizontal scroll for the next 8 hours of weather.
- 7-Day Forecast: Detailed daily high/low temperatures.
- Temperature Chart: Interactive visual trends powered by Recharts.
- Interactive Maps: A live Leaflet map showing your current search location.
- AQI (Air Quality Index): Real-time air quality levels from "Good" to "Very Poor."
- UV Index: Monitor sun intensity to stay safe outdoors.
| Tool | Usage |
|---|---|
| React 18 | UI Logic & Component Architecture |
| Vite | Lightning-fast build tool and dev server |
| Leaflet | Interactive geospatial mapping |
| Recharts | Data visualization for temperature trends |
| Material-UI | Elegant input components and icons |
| OpenWeather API | Source for all weather and air quality data |
Weather-Dashboard/
├─ src/
│ ├─ App.jsx # Main container & state management
│ ├─ WeatherApp.jsx # Primary layout component
│ ├─ SearchBox.jsx # City search & Geolocation logic
│ ├─ InfoBox.jsx # Current weather display
│ ├─ ForecastBox.jsx # Hourly forecast cards
│ ├─ DailyForecast.jsx # 7-day list view
│ ├─ TemperatureChart.jsx # Recharts implementation
│ ├─ MapView.jsx # Leaflet map integration
│ ├─ AQICard.jsx # Air quality tracking
│ └─ assets/ # Icons and static images
├─ .env # Private API keys
└─ vite.config.js # Project configuration
⚙️ Getting Started
1. Prerequisites
Node.js (v16.0 or higher)
OpenWeatherMap API Key (Get one for free at openweathermap.org)
2. Installation
# Clone the repository
git clone [https://github.com/sherlock-hashed/Weather-Dashboard.git](https://github.com/sherlock-hashed/Weather-Dashboard.git)
# Enter the directory
cd Weather-Dashboard
# Install dependencies
npm install
3. Environment Setup
Create a .env file in the root directory and paste your API key:
VITE_WEATHER_API_KEY=your_secret_api_key_here
4. Run the App
npm run dev
🔗 API Reference
This project utilizes the following OpenWeatherMap endpoints:
Current Weather Data: For immediate temperature and conditions.
5 Day / 3 Hour Forecast: For hourly and extended daily data.
Air Pollution API: For AQI and pollutant concentrations.
📌 Important Notes
Privacy: Geolocation features require an https connection or localhost to work in modern browsers.
Security: Never commit your .env file to public repositories. It is already included in the .gitignore.
Responsive Design: The layout is optimized for mobile-first views but scales beautifully for tablet and desktop screens.
📄 License
Distributed under the MIT License. See LICENSE for more information.
Developed with ❤️