Skip to content

The weather app project is a dynamic and user-friendly web application that uses React.js to retrieve current and 5-day weather forecasts for various cities around the world. The app allows users to search for a city by name and view its weather conditions, including temperature, humidity, wind speed, and description of the current weather.

Notifications You must be signed in to change notification settings

Ahsankhalid618/react-weather-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

47 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🌦️ Weather App

Welcome to the Weather App! This is a dynamic and user-friendly web application built using React.js to provide real-time weather data for cities across the globe. The app features a 5-day weather forecast, displaying key weather conditions such as temperature, humidity, wind speed, and a weather description. It also includes dynamic background images that change according to the current weather. 🌍

🌟 Key Features

  • React.js Powered ⚛️: The app leverages the power of React.js to create a seamless and fast user experience.
  • OpenWeatherMap API 🌐: Retrieves current and 5-day weather forecasts from the OpenWeatherMap API.
  • City Search 🔎: Users can search for a city by name to get up-to-date weather conditions.
  • Weather Conditions ☁️: Displays vital weather metrics like temperature, humidity, wind speed, and more.
  • Dynamic Background Images 🌄: The app's background changes according to the current weather for an immersive feel.
  • Responsive Design 📱: Fully responsive across different devices for a smooth experience everywhere.

🛠️ Skills & Technologies Used

  • HTML5 🖼️
  • CSS3 🎨
  • JavaScript 📝
  • React.js ⚛️
  • Postman 📬 (for API testing)
  • REST APIs 🔌

🚀 Future Improvements

  • Implement unit tests to ensure code reliability.
  • Add dark mode for better usability in low light.
  • Include user location functionality for automatic weather updates.
  • Improve data visualization for better understanding of weather trends.

🚀 How to Run the Project

To get started and run this project locally, follow these steps:

  1. Clone the repo:

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

    cd react-weather-app
    
  3. Navigate to the project directory:

    npm install
    
  4. Get your API key:

    REACT_APP_WEATHER_API_KEY="https://home.openweathermap.org/api_keys"
    
    
  5. Get your API key:

    REACT_APP_GEOLOCATION_API_KEY="https://my.locationiq.com/dashboard/?firstLogin=1#accesstoken"
    
    
  6. Start the app:

    npm start
    
  7. Enjoy the live weather updates! 🎉:


🤝How to make Contribution

We welcome contributions from developers of all skill levels! Whether you're fixing a bug, adding new features, or improving documentation, your help is appreciated.

To contribute:

  1. ⭐ Star the repository to show your support.
  2. 📝 Create an issue outlining how you'd like to contribute to the project.
  3. 🍴 Fork the repository to make your own copy:
    # Click on the "Fork" button at the top right of the repository page
  4. 💻 Implement your changes in the forked repository by creating a new branch for your feature or fix:
    git checkout -b feature-or-fix-name
    
  5. Make your changes and commit them using Conventional Commits:
    git commit -m "feat: describe your changes"
    
  6. 🔄 Push your branch:
    git push origin feature-or-fix-name
    
  7. Open a pull request and describe the changes you made, mentioning the issue number you're addressing.
  8. ⏳ Wait for review and feedback from the maintainers.

📸 Preview

Weather App Preview

✨ Acknowledgments

Big thanks to the amazing open-source community and OpenWeatherMap for providing the weather API! 🙏

About

The weather app project is a dynamic and user-friendly web application that uses React.js to retrieve current and 5-day weather forecasts for various cities around the world. The app allows users to search for a city by name and view its weather conditions, including temperature, humidity, wind speed, and description of the current weather.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published