This is a simple React-based weather app that fetches real-time weather data and displays it for a given city using the OpenWeatherMap API. It features a clean and modern user interface with visual icons and background styling to enhance the experience.
- 🔎 Search Functionality: Enter any city to get live weather updates.
- 📡 Real-Time Weather Data:
- 🌡️ Temperature
- 💧 Humidity
- 💨 Wind Speed
- 🌤️ Weather Icons: Displays dynamic icons based on weather conditions.
- 🖥️ Responsive UI: A modern card layout over a scenic background.
The latest UI includes:
- A centered weather display card
- Mountain background for visual appeal
- Search bar for location input
- Icons and stats for temperature, humidity, and wind
- Frontend: ReactJS
- Weather API: OpenWeatherMap
- Icons: Custom and OpenWeatherMap-based weather icons
- Styling: CSS / Tailwind (if applicable)
Follow the steps below to run the app locally.
git clone https://github.com/Khushi256/weather-app.git
## Setup
To run this project locally, follow these steps:
1. **Clone the repository:**
```bash
git clone https://github.com/Khushi256/weather-app.git- Install the required dependencies:
cd weather-app
npm install- Create a .env file in the root of the project and add your WeatherAPI key:
VITE_WEATHER_API_KEY=your_weather_api_key- Run the app:
npm start- Open the app in your browser at http://localhost:3000/.
Currently, the app fetches weather data directly from WeatherAPI. However, I am working on generating an API to integrate with the app. This API will allow users to fetch weather data more efficiently and provide more customizable options for querying weather information.
If you'd like to contribute to this project, feel free to fork the repository and create a pull request with your changes. Make sure to follow the code of conduct and maintain clean, readable code.
This project is licensed under the MIT License - see the LICENSE file for details.
- WeatherAPI for the weather data.
- All icon resources are either custom-made or sourced from Freepik.