Ahsankhalid618 / react-weather-app

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.
https://react-weather-app101.netlify.app/
22 stars 20 forks source link
hacktoberfest hacktoberfest-accepted hacktoberfest-starter hacktoberfest2024 openweathermap-api react-components react-hooks reactjs tailwindcss

🌦️ 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


🛠️ Skills & Technologies Used


🚀 Future Improvements


🚀 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! 🙏