A modern and responsive weather application built with React that provides real-time weather information and forecasts. Users can search for cities worldwide or use their IP-based location to get weather updates.
- 🔍 Search cities worldwide with autocomplete suggestions
- 📍 Automatic location detection using IP
- 🌡️ Current weather conditions including:
- Temperature
- Real feel
- Humidity
- Wind speed
- Pressure
- UV index
- ⏰ Local time display
- 📅 Hourly forecast
- 📊 7-day weather forecast
- 🎨 Clean and intuitive user interface
- 📱 Responsive design
- Frontend Framework: React + Vite
- Styling: TailwindCSS
- Icons: Font Awesome
- APIs:
- WeatherAPI for weather data
- ipapi.co for IP-based location
- Node.js (v14 or higher)
- npm or yarn
- WeatherAPI key (Get one at WeatherAPI)
- Clone the repository
env VITE_WEATHER_API_KEY=your_weatherapi_key_here
src/ ├── components/ │ ├── CityFormContainer.jsx # City search and location detection │ ├── WeatherCast.jsx # Weather forecast display │ └── Home.jsx # Main component ├── services/ │ └── weatherService.js # API integration └── App.jsx # Root component
- Used for fetching weather data and city search
- Endpoints used:
/forecast.json- Current and forecast weather/search.json- City search autocomplete
- Used for IP-based location detection
- Returns user's city based on IP address
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- WeatherAPI for weather data
- ipapi for geolocation services
- TailwindCSS for styling
- Font Awesome for icons