A React-based Weather Forecast Application

by React

⛅ Weathering With Me

A weather app built using React and the OpenWeatherMap API to display current weather conditions and forecasts for various cities.

¶ Description

The Weather App is a React-based web application that allows users to search for cities and view the current weather conditions as well as the daily forecast for the upcoming days. The app utilizes two main APIs: the OpenWeatherMap API to fetch weather data and the GeoDB Cities API from RapidAPI to provide autocomplete suggestions for city names.

📷 Preview

⭐️ Features

  • Search for cities and retrieve weather data.
  • Display current weather conditions including temperature, description, and icon.
  • Display a daily forecast for the upcoming days with details like temperature, pressure, humidity, wind speed, and more.
  • Utilize the GeoDB Cities API for city name autocomplete suggestions.

🔧 Installation

  1. Clone the repository: git clone https://github.com/siriusberg/weathering-with-me.git
  2. Navigate to the project directory: cd weather-app
  3. Install the required dependencies: npm install (PS: You can use npm install --force if the dependencies is outdated and then update it manually)

🖱️ Usage

  1. Obtain your API keys:
  2. Replace WEATHER_API_KEY in src/components/api.js with your OpenWeatherMap API key.
  3. Replace X-RapidAPI-Key in src/components/api.js with your RapidAPI key.
  4. Start the development server: npm start
  5. Open your web browser and go to http://localhost:3000 to use the app.

🛠 API Configuration

OpenWeatherMap API

To use the OpenWeatherMap API, follow these steps:

  1. Visit OpenWeatherMap and create an account.
  2. Generate an API key from your account settings.
  3. Replace WEATHER_API_KEY in src/components/api.js with your API key.

GeoDB Cities API

To use the GeoDB Cities API from RapidAPI, follow these steps:

  1. Register for an account on RapidAPI.
  2. Subscribe to the GeoDB Cities API.
  3. Replace X-RapidAPI-Key in src/components/api.js with your RapidAPI key.

💻 Technologies Used

👤 Contributing

Contributions are welcome! If you find any issues or have suggestions for improvements, please feel free to create an issue or submit a pull request.

GitHub

View Github