A modern, responsive weather dashboard that provides real-time weather insights, air quality monitoring, and 5-day forecasts with dynamic visual updates.
This project is a comprehensive weather dashboard built for users who need detailed environmental data beyond just temperature. It integrates multiple professional weather APIs to provide Air Quality Index (AQI), UV Index, and interactive temperature trends in a sleek, mobile-first interface.
- Desktop View
- Mobile View
- Real-time Weather Data – Temperature, humidity, wind speed, and pressure
- Search Functionality – Geocoding-enabled city search worldwide
- Advanced Metrics
- AQI status with color indicators (Good / Moderate / Poor)
- UV Index safety levels
- Interactive Visuals
- 24-hour temperature chart
- 5-day weather forecast
- Dynamic UI
- Background gradients change based on time of day and weather conditions
- React (v19)
- Tailwind CSS (v4)
- Vite (v7)
- MUI X Charts
- Chart.js
- react-chartjs-2
- React Router DOM (v7)
- OpenWeatherMap
- Current weather
- 5-day forecast
- Air Pollution data
- Open-Meteo
- Geocoding (search)
- UV Index
- 15-minute interval metrics
git clone https://github.com/Anugrah71/React-Weather-App.git
cd weather-appnpm installnpm run devCreate a .env file in the root directory and add:
VITE_API_KEY=your_openweather_api_keysrc/
│── assets/ # Icons & UI images (Wind, UV, Barometer, etc.)
│── components/ # SearchBar, TemperatureChart
│── service/ # Weatherapi.js (API logic)
│── pages/ # Home.jsx (Main dashboard)
│── App.jsx # Root component
└── main.jsx # Entry point
- Location-based search (auto-detect user location)
- Search history using local storage
- Additional metrics (visibility, "Feels Like" temperature)
- Dark / Light theme toggle