🌦️ 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:
-
Clone the repo:
git clone https://github.com/your-username/react-weather-app.git
-
Navigate to the project directory:
cd react-weather-app
-
Navigate to the project directory:
npm install
-
Get your API key:
REACT_APP_WEATHER_API_KEY="https://home.openweathermap.org/api_keys"
-
Get your API key:
REACT_APP_GEOLOCATION_API_KEY="https://my.locationiq.com/dashboard/?firstLogin=1#accesstoken"
-
Start the app:
npm start
-
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:
- ⭐ Star the repository to show your support.
- 📝 Create an issue outlining how you'd like to contribute to the project.
- 🍴 Fork the repository to make your own copy:
# Click on the "Fork" button at the top right of the repository page
- 💻 Implement your changes in the forked repository by creating a new branch for your feature or fix:
git checkout -b feature-or-fix-name
- Make your changes and commit them using Conventional Commits:
git commit -m "feat: describe your changes"
- 🔄 Push your branch:
git push origin feature-or-fix-name
- Open a pull request and describe the changes you made, mentioning the issue number you're addressing.
- ⏳ 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! 🙏