https://github.com/geletsky/react-weather-app
A weather application that provides current weather information and multi-day forecasts using OpenWeatherMap API and GeoDB Cities API, with a city search feature powered by react-select-async-paginate.
https://github.com/geletsky/react-weather-app
api javascript react-weather-app reactjs weather-app
Last synced: about 1 year ago
JSON representation
A weather application that provides current weather information and multi-day forecasts using OpenWeatherMap API and GeoDB Cities API, with a city search feature powered by react-select-async-paginate.
- Host: GitHub
- URL: https://github.com/geletsky/react-weather-app
- Owner: geletsky
- Created: 2023-06-14T19:47:05.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-23T20:58:41.000Z (almost 3 years ago)
- Last Synced: 2025-03-30T15:51:10.427Z (about 1 year ago)
- Topics: api, javascript, react-weather-app, reactjs, weather-app
- Language: JavaScript
- Homepage: https://react-weather-app-geletsky.vercel.app
- Size: 475 KB
- Stars: 2
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
React Weather App
## Description:
This is a weather applications built using React that allows users to check the current weather and weather forecast for various cities. The application utilizes the `OpenWeatherMap API` to fetch weather data and the `GeoDB Cities API` to retrieve citynames. Additionally, the `react-select-async-paginate` library is used to enhance the user experience by providing a convenient city search functionality.
## Features:
- **Current Weather:** Displays the current weather conditions for the selected city.
- **Detailed Weather Information:** Provides a detailed description of current weather conditions such as pressure, humidity and wind speed.
- **Weather Forecast:** Shows the weather forecast for 3 days, 5 days and 7 days, which allows users to plan ahead. The forecast includes temperature highs and lows, weather descriptions, and icons representing weather conditions.
- **City Selection:** Using the react-select-async-paginate library to improve city selection. Users can easily search for a specific city, and the app will give suggestions as they type.
## Installation:
```bash
# Clone the repository:
git clone https://github.com/Geletsky/react-weather-app.git
# Navigate to the project directory:
cd project-directory
# Install dependencies:
npm install
#Create a .env file in the project root directory and add the following lines, replacing with your respective API keys:
REACT_APP_WEATHER_API_KEY=
REACT_APP_RAPID_API_KEY=
# Start the development server:
npm start
```
## Usage:
By launching the React Weather app, you will see a search bar where you can start entering the name of the city. As you type, the app will issue suggestions based on the GeoDB Cities API. Select a city from the drop-down list to view the current weather and forecast.
The main page will display the current weather conditions for the selected city, including temperature, humidity, wind speed and pressure.
To view the weather forecast for several days, go to the appropriate tabs. Each tab will display the predicted temperatures, weather descriptions, and weather icons for the corresponding time period.
## Demo:
You can access the live demo of this application [here](https://react-weather-app-rust-theta.vercel.app/)
## Author:
If you have any questions or suggestions regarding this project, feel free to contact the project owner: [here](https://github.com/Geletsky)