Skip to content

The React Weather App is a simple yet powerful web application that allows users to check the current weather conditions and forecasts for any location around the globe. Built with React, this app leverages the OpenWeatherMap API to fetch real-time weather data

Notifications You must be signed in to change notification settings

utkarsh9795/react_weather_app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Here is the demo of this project

Demo Link

Weather App

Project Overview

The Weather App is a dynamic web application developed using React.js that provides real-time weather information for any city around the world. Users can easily search for a city and receive data including temperature, humidity, wind speed, and other essential weather details. This project demonstrates the use of React's component-based architecture, state management, and API integration.

Features

  • Search Functionality: Users can input any city name to fetch its current weather information.
  • Real-Time Data: The app utilizes the OpenWeatherMap API to display up-to-date weather data.
  • Responsive Design: The application is designed to be fully responsive, ensuring a seamless experience on both desktop and mobile devices.
  • Weather Details: Displays various weather parameters such as:
    • Current Temperature
    • Humidity
    • Wind Speed
    • Weather Conditions (e.g., clear, cloudy, rainy)
  • User-Friendly Interface: Intuitive UI for easy navigation and interaction.

Technologies Used

  • React.js: JavaScript library for building user interfaces.
  • OpenWeatherMap API: External API used to fetch real-time weather data.
  • CSS/SCSS: For styling the application and ensuring responsiveness.
  • Axios: For making HTTP requests to the weather API.

Getting Started

To get a local copy of the project up and running, follow these simple steps:

Prerequisites

  • Node.js (v14 or later)
  • npm (Node Package Manager)

Installation

  1. Clone the repository:

    git clone https://github.com/your-username/weather-app.git
  2. Navigate to the project directory:

    cd weather-app
  3. Install the required packages:

    npm install
  4. Obtain an API key from OpenWeatherMap and replace it in the src/config.js file:

    const API_KEY = 'YOUR_API_KEY';
  5. Start the application:

    npm start
  6. Open your browser and visit http://localhost:3000 to view the app.

Usage

  • Enter the name of a city in the search bar.
  • Click on the search button or press Enter to fetch the weather information.
  • The app will display the current weather conditions, including temperature, humidity, and wind speed.

Contributing

Contributions are welcome! If you would like to contribute to the Weather App, please follow these steps:

  1. Fork the repository.
  2. Create a new branch (git checkout -b feature/YourFeature).
  3. Make your changes and commit them (git commit -m 'Add some feature').
  4. Push to the branch (git push origin feature/YourFeature).
  5. Open a Pull Request.

Acknowledgments

About

The React Weather App is a simple yet powerful web application that allows users to check the current weather conditions and forecasts for any location around the globe. Built with React, this app leverages the OpenWeatherMap API to fetch real-time weather data

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published