Skip to content

Latest commit

 

History

History
107 lines (80 loc) · 3.56 KB

README.md

File metadata and controls

107 lines (80 loc) · 3.56 KB

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