Stay ahead of the forecast with real-time weather updates and personalized alerts with this intuitive weather app.
View Demo
·
Report Bug
·
Request Feature
Table of Contents
This interactive Weather Map is built with Vite, React, and TypeScript, providing real-time weather data for a selected location. The map is powered by the OpenWeather API and visualised using React Leaflet, offering an intuitive way to explore weather conditions.
- Live Weather Data with React Query – Efficiently fetches and caches weather data to ensure a smooth user experience.
- Context API for State Management – Stores and manages weather details, making data accessible across the app.
- Interactive Map Interface – Users can explore weather conditions by interacting with a dynamic map, including zoom and location selection.
- Styled with Styled-Components – Provides a responsive and visually appealing UI.
This project demonstrates the power of React Query, Leaflet maps, and API integrations, creating a seamless experience for accessing real-time weather information. 🌍☀️🌧
- npm
npm install npm@latest -g
- Get a free API Key at https://openweathermap.org/
- Clone the repo
git clone https://github.com/gazjosef/weather-app.git
- Install NPM packages
npm install
- Enter your API in
.envconst API_KEY = "ENTER YOUR API";
Use this space to show useful examples of how a project can be used. Additional screenshots, code examples and demos work well in this space. You may also link to more resources.
For more examples, please refer to the Documentation
- Display temperature, location, and date.
- Display wind speed, feels like, humidity, and pressure.
- Display upcoming temperature.
- Add search fields.
- Refactor to TypeScript.
- Unit & E2E testing.
See the open issues for a full list of proposed features (and known issues).
Distributed under the MIT License. See LICENSE.txt for more information.
Email: [email protected]