[go: nahoru, domu]

Skip to content

A React-based weather application that displays real-time weather information for the user's current location or any searched city.

Notifications You must be signed in to change notification settings

SwarupDeb/Weather-APP

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Weather App

A React-based weather application that displays real-time weather information for the user's current location or any searched city.

ScreenShot

  • 1st image
Weather1
  • 2nd image
weather2

Features

  • Real-time weather information based on the user's location.
  • Search functionality for getting weather details of any city.
  • Animated weather icons.
  • Displays temperature, humidity, visibility, and wind speed.

Installation

  1. Clone the repository:

    git clone https://github.com/your-username/weather-app.git
    cd weather-app
  2. Install the dependencies:

    npm install
  3. Obtain an API key from OpenWeatherMap and add it to the apiKeys.js file:

    // apiKeys.js
    export default {
      key: "YOUR_API_KEY",
      base: "https://api.openweathermap.org/data/2.5/",
    };
  4. Start the application:

    npm start

Usage

  • On launching, the app will ask for location access to provide weather data for your current location.
  • You can search for any city using the search bar to get its current weather details.

Approach and Technologies Used

Approach

  1. Geolocation API: Used to get the user's current location coordinates.
  2. OpenWeatherMap API: Fetches real-time weather data based on the location coordinates or the searched city.
  3. Dynamic Background Change: The background image changes according to the weather conditions (e.g., sunny, cloudy, rainy) and the time of day (day or night).
  4. Component Structure: The app is divided into multiple components:
    • App.js: The main component that initializes the application.
    • currentLocation.js: Manages fetching weather data based on the user's location.
    • forcast.js: Handles the search functionality and displays weather data for the searched city.
  5. React State Management: Uses React's state and lifecycle methods to manage and update the weather data and UI dynamically.

Technologies Used

  • React: A JavaScript library for building user interfaces.
  • Axios: For making API requests to the OpenWeatherMap API.
  • React-animated-weather: For displaying animated weather icons.
  • React-live-clock: For displaying the current time.
  • CSS: For styling the application and managing the dynamic background changes.

File Structure

  • App.js: The main component that renders the application.
  • currentLocation.js: Handles fetching weather data based on the user's current location.
  • forcast.js: Manages the search functionality and displays weather information for the searched city.
  • serviceWorker.js: Optional service worker for enabling offline capabilities.

Contributing

  1. Fork the repository.

  2. Create your feature branch:

    git checkout -b feature/YourFeature
  3. Commit your changes:

    git commit -m 'Add some feature'
  4. Push to the branch:

    git push origin feature/YourFeature
  5. Open a pull request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

About

A React-based weather application that displays real-time weather information for the user's current location or any searched city.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published