Weather App - Real-Time Weather DashboardWeather App
Real Time Weather Dashboard

A minimalist, real-time weather dashboard with interactive visualizations, location intelligence, and glassmorphism-inspired UI that adapts to user preferences.

Main Weather Page Dark Mode

Main Weather Page Dark Mode

Maps Page

Maps Page

Main Weather Page Light Mode

Main Weather Page Light Mode

Maps Page Light Mode

Maps Page Light Mode

Project Overview

A responsive React application designed to provide users with immediate access to accurate weather data. It solves the problem of cluttered weather interfaces by offering a clean, glassmorphism-inspired UI that adapts to user location and device preferences (Dark/Light modes). The app provides real-time weather information, interactive temperature graphs, and multi-day forecasts.

Tech Stack

Frontend

React
Core framework with ReactDOM
react-router-dom
Client-side routing
Axios
HTTP client for API requests
Tailwind CSS
Utility-first styling engine
Material UI (@mui/material)
Interactive UI elements (Tabs)
FontAwesome & Custom SVGs
Icon library
React-Leaflet
Interactive maps integration

Backend & Database

WeatherAPI.com
Real-time weather and forecast data
Geoapify
Autocomplete and reverse geocoding
Leaflet
Map visualization
Create React App
Build system
ESLint
Code linting
PostCSS & Autoprefixer
CSS processing

Key Features

Real-Time Weather: Current temperature, weather condition, humidity, wind speed, and pressure
Interactive Temperature Graph: Smooth cubic bezier curve visualizing temperature trends with dynamic hover zones
Gradient fills adjusting to the active theme
Hourly Forecast: Hourly predictions for Today and Tomorrow
3-Day Forecast: Daily forecast summaries
City Search: Autocomplete suggestions for location search
Use My Location: One-click geolocation using Browser Geolocation API
Theme Support: System-aware Dark and Light modes with persistent user preference
Responsive Design: Edge-to-edge layout on mobile, unified card structure across all devices

System Flow

1

Initialization: App loads WeatherProvider and defaults to 'Algiers'. useEffect triggers fetchData in api.js.

2

API Request: api.js constructs request with API Key and Query, calls api.weatherapi.com/v1/forecast.json.

3

State Update: Response data is stored in WeatherContext. Computed data (like graph points) is memoized via useMemo.

4

Rendering: Components (TheWeather, TemperatureGraph) subscribe to context and re-render.

5

Search Interaction: Triggers locationService.searchLocations → Updates City in Context → Triggers Refetch.

6

Geolocation: Triggers navigator.geolocation → locationService.reverseGeocode → Updates Coordinates in Context.

Benefits

Clean Interface

Glassmorphism-inspired design provides a modern, uncluttered weather viewing experience.

Real-Time Data

Accurate weather information from WeatherAPI ensures users have up-to-date forecasts.

Interactive Visualization

Custom SVG temperature graph with hover interactions makes data exploration intuitive.

Location Intelligence

Geoapify integration enables smart location search and automatic detection.

Theme Adaptability

System-aware dark/light modes with persistent preferences enhance user comfort.

Cross-Device Support

Responsive design ensures optimal experience on mobile, tablet, and desktop.