react-weather-app

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

✨ Acknowledgments

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