A modern React weather application with real-time weather data, Air Quality Index monitoring, weather news, favorites, history, and detailed forecasts.
✨ Core Features:
- 🔍 Search weather by city name
- 📊 Current weather display with temperature, humidity, wind speed, and pressure
- 🌡️ Dynamic theme colors based on temperature and weather conditions
- 📅 5-day and 48-hour detailed weather forecasts
- ⛅ Tab-based navigation between Weather and News views
🌬️ Air Quality Index (AQI):
- Real-time AQI data using the US EPA standard (0–500 scale)
- Animated circular gauge with color-coded severity levels
- Individual pollutant concentrations (PM2.5, PM10, O₃, NO₂, SO₂, CO)
- Per-pollutant sub-AQI breakdown
- Dominant pollutant identification
- Health advice based on current air quality level
📰 Weather News:
- Latest weather-related news from around the world
- Powered by the GNews API
- Premium card layout with article images, descriptions, and source info
- Relative timestamps (e.g., "3h ago", "2d ago")
- One-click "Read Full Article" links opening in new tab
- Refresh button to fetch latest stories
- Skeleton loading animation while fetching
- Two-layer relevance filtering (API query + client-side keyword matching) to ensure only weather-related articles appear
⭐ Favorites System:
- Add up to 5 favorite cities for quick access
- One-click weather lookup for favorite cities
- Easy favorite management
📜 Weather History:
- Automatic weather data storage for 30 days
- View past weather records for cities
- Fallback data when API is unavailable
- Quick access to previously searched cities
💾 Local Storage:
- All data stored locally in browser
- Works offline with cached data
- No data loss on browser refresh
- Node.js (v14 or higher)
- npm or yarn
- Navigate to the project directory:
cd "Weather webapp"- Install dependencies:
npm installStart the development server:
npm startThe app will open automatically at http://localhost:3000
Create an optimized production build:
npm run build- Enter a city name in the search box
- Press Enter or click the Search button
- View current weather, temperature, and conditions
- The Air Quality Index panel appears automatically below the weather card
- AQI is displayed as a gauge with values from 0 to 500 (US EPA standard)
- Categories: Good, Moderate, Unhealthy for Sensitive Groups, Unhealthy, Very Unhealthy, Hazardous
- Scroll down to see individual pollutant levels with animated bars
- Health advice updates based on the current AQI level
- Click the 📰 News tab in the top navigation
- Browse the latest weather-related articles in a card grid
- Click any card to read the full article on the source website
- Hit the 🔄 refresh button for the latest stories
- Click "⭐ Add to Favorites" on any weather card
- Quick access to up to 5 favorite cities from the sidebar
- Click on a favorite city to instantly view its weather
- Click "📅 View Detailed Forecast" to see:
- Hourly Forecast: Next 48 hours in 3-hour intervals
- Daily Forecast: 5-day outlook with high/low temperatures
- View recently searched cities in the "📅 Weather History" panel
- Last recorded temperature and conditions for each city
- Falls back to history data if API is unavailable
- Automatic cleanup of data older than 30 days
The app uses browser localStorage to store:
- Favorites: List of up to 5 favorite cities
- History: Weather records for the past 30 days
The app dynamically changes theme based on:
- Temperature ranges: Very Hot, Hot, Warm, Mild, Cool, Cold, Very Cold, Freezing
- Weather conditions: Clear, Clouds, Rain, Snow, Thunderstorm, Fog, etc.
The tab navigation, search button, and AQI accent colors all adapt to the current theme.
| API | Purpose | Documentation |
|---|---|---|
| OpenWeatherMap - Current Weather | Real-time weather data | Free tier |
| OpenWeatherMap - 5 Day Forecast | Hourly & daily forecasts | Free tier |
| OpenWeatherMap - Air Pollution | AQI & pollutant data | Free tier |
| GNews | Weather-related news articles | Free tier (100 req/day) |
src/
├── App.js # Main app with tab navigation
├── index.js # React entry point
├── index.css # Global styles (tabs, AQI, news, themes)
├── useWeatherStorage.js # Custom hook for localStorage
├── weatherUtils.js # Utility functions
└── components/
├── SearchBox.js # Search input component
├── WeatherCard.js # Current weather display
├── ForecastPanel.js # Forecast display (hourly/daily)
├── FavoritesList.js # Favorites sidebar
├── WeatherHistory.js # Weather history sidebar
├── AirQualityPanel.js # AQI gauge & pollutant breakdown
└── WeatherNews.js # GNews-powered news feed
The AQI is calculated using the US EPA standard from raw pollutant concentrations returned by the OpenWeatherMap Air Pollution API. For each pollutant, a sub-AQI is computed using EPA breakpoint tables, and the overall AQI is the highest sub-AQI value. This matches the methodology used by AirNow.gov.
Favorites Management:
- Store up to 5 favorite cities
- Persist across browser sessions
- Quick access without searching
Weather History:
- Automatically saves every weather search
- Stores temperature, conditions, and timestamp
- Keeps data for 30 days
- Provides fallback when API fails
If the API is unavailable:
- App shows the last recorded weather data from history
- User notification indicates cached data is being shown
- Essential weather information still available
- React 18.2
- CSS3 with gradients, glassmorphism, and animations
- LocalStorage API for data persistence
- OpenWeatherMap REST API (weather, forecast, air pollution)
- GNews REST API (news articles)
- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
This project is created for educational purposes.