Weather Dashboard — React Practice Project
Overview
A modern weather application built with React 19, TypeScript, and Vite as a learning project to explore React development in a real-world scenario.
This project focuses on implementing component-based architecture, custom hooks, API integration, state management, and responsive UI while building a functional weather dashboard using real-time weather data.
Features
Real-time weather information
Hourly and weekly forecasts
Automatic location detection
Search and save favorite cities
Temperature unit conversion (Celsius/Fahrenheit)
Dynamic weather-based background
Weather details including humidity, wind, UV index, AQI, and sunrise/sunset
Responsive design for mobile and tablet
Tech Stack
React 19 — UI development
TypeScript — Type safety
Vite — Build tool
Tailwind CSS v4 — Styling
Lucide React — Icons
APIs
Open-Meteo — Weather forecast and air quality data
Nominatim — Location search and reverse geocoding
What I Learned
Through this project, I practiced:
Building reusable React components
Creating custom hooks
Managing state with React Context
Handling API requests and asynchronous data
Using browser APIs such as Geolocation and localStorage
Creating responsive and dynamic user interfaces