weather.mp4
A simple and visually appealing weather application built using React.js. This app allows users to search for the current weather in any city and dynamically changes the background to match the weather conditions of the searched location.
- Dynamic Background: The app's background adapts to reflect the weather conditions (e.g., sunny, rainy, snowy).
- City Search: Search for the weather of any city around the globe.
- Weather Data: Displays temperature, weather description, and other details fetched from a weather API.
- Responsive Design: Works seamlessly across devices, including desktops, tablets, and smartphones.
- React.js: Frontend library for building the user interface.
- CSS: For styling the app.
- OpenWeatherMap API: For fetching real-time weather data.
-
Clone the repository:
git clone https://github.com/your-username/weather-app.git
-
Navigate to the project directory:
cd weather-app
-
Install dependencies:
npm install
-
Create a
.env
file in the root directory and add your OpenWeatherMap API key:REACT_APP_WEATHER_API_KEY=your_api_key_here
-
Start the development server:
npm start
-
Open http://localhost:3000 in your browser to view the app.
- Enter the name of a city in the search bar.
- View the current weather details for the city.
- Enjoy the dynamic background that changes based on the weather condition.
https://github.com/user-attachments/assets/4834928f-52fb-4ebe-9322-4bcec45eee20
- Add a 5-day weather forecast feature.
- Include geolocation to fetch weather data for the user's current location.
- Enhance UI with animations and additional weather details like UV index or air quality.
- Improve accessibility and performance.
Contributions are welcome! Feel free to open issues or submit pull requests to improve the project.
- Fork the repository.
- Create a new branch:
git checkout -b feature-name
- Commit your changes:
git commit -m 'Add some feature'
- Push to the branch:
git push origin feature-name
- Open a pull request.
This project is licensed under the MIT License. See the LICENSE file for details.
Happy coding! 🚀