A sleek, modern weather application built with React and TypeScript that provides real-time weather information with a beautiful, intuitive interface. WeatherWise offers current conditions, detailed forecasts, and a clean, responsive design that works on any device.
- Current Weather: Real-time temperature, conditions, and key metrics
- Detailed Forecast: Hourly and daily weather predictions
- Location Search: Find weather for any city worldwide
- Responsive Design: Works seamlessly on desktop and mobile devices
- Modern UI: Clean, minimalist interface with smooth animations
- Weather Metrics:
- Temperature (Feels Like)
- Wind Speed & Direction
- Humidity Levels
- UV Index
- Visibility
- Air Quality
- Precipitation
- Pressure
- React 18+
- TypeScript
- Redux Toolkit
- React Select Async Paginate
- Lucide React
- CSS with vendor prefixes for cross-browser compatibility
src/
├── assets/
│ ├── images/
│ ├── icons/
│ └── styles/
├── components/
│ ├── Content/
│ │ └── Components/
│ │ └── HourlyForecast/
│ │ └── SearchedItem/
| | └── WeatherChart/
│ │
| ├── WeatherWise/
│ │ └── Components/
│ │ └── Bullets/
│ │ └── Earth Swiper/
│ │ └── Earth Status/
| | └── Dangerous Rate/
│ └── Header/
│ └── Search/
├── hooks/
├── data/
├── services/
├── store/
| └── slices/
├── utils/
└── types/
- Node.js (v14 or later)
- npm or yarn
-
Clone the repository:
git clone https://github.com/yourusername/weatherwise.git cd weatherwise -
Install dependencies:
npm install # or yarn install -
Create a
.envfile in the root directory and add your API keys:REACT_APP_GEO_API_BASE_URL=your_geo_api_base_url REACT_APP_GEO_API=your_geo_api REACT_APP_GEO_API_HOST=your_geo_api_host REACT_APP_WEATHER_API_FORECAST_BASE_URL=your_weather_api_forecast_base_url REACT_APP_WEATHER_API_HISTORY_BASE_URL=your_weather_api_history_base_url REACT_APP_IPINFO_API_BASE_URL=your_ipinfo_api_base_url REACT_APP_UNSPLASH_API_BASE_URL=your_unsplash_api_base_url -
Start the development server:
npm start # or yarn start
- Search for a city using the search bar or swipe between 4 continental views
- View current weather conditions and classification status (Good/Moderate/Dangerous)
- Switch between dark and light mode using the mode toggle
- View recent 2 search history
- Get real-time weather updates automatically
- Monitor health impact parameters (temperature, air quality)
- Check physical hazard risks (wind, precipitation)
- Track operational safety metrics (visibility)
- Review preventable risks (UV, humidity)
- Weather data provided by WeatherAPI.com
- Icons by Lucide Icons
- Desktop UI Designed by Linur
Our weather classification system categorizes conditions into three levels based on health and safety impact:
- Temperature: 10°C to 25°C (Comfortable range)
- Air Quality: us-epa-index 1-3 (Excellent to Good)
- Wind:
- Speed: ≤ 20 kph (Gentle breeze)
- Gusts: ≤ 30 kph (Mild gusts)
- Precipitation: ≤ 2 mm (Light drizzle)
- Visibility: ≥ 8 km (Clear conditions)
- UV Index: 0 to 2 (Low risk)
- Humidity: 30% to 60% (Comfortable)
- Temperature: 25°C to 32°C or 0°C to 10°C
- Air Quality: us-epa-index 4-6 (Moderate to Sensitive)
- Wind:
- Speed: 20-40 kph (Moderate breeze)
- Gusts: 30-60 kph (Strong gusts)
- Precipitation: 2-10 mm (Light to moderate rain)
- Visibility: 4-8 km (Moderate visibility)
- UV Index: 3 to 7 (Moderate to High)
- Humidity: 60% to 80% (Humid)
- Temperature: > 32°C or < 0°C
- Air Quality: us-epa-index 7-10 (Unhealthy to Hazardous)
- Wind:
- Speed: > 40 kph (Strong winds)
- Gusts: > 60 kph (Gale force)
- Precipitation: > 10 mm (Heavy rain)
- Visibility: < 4 km (Poor visibility)
- UV Index: 8+ (Very High to Extreme)
- Humidity: > 80% (Very humid)
The app prioritizes weather parameters based on their impact and provides specific recommendations:
-
Health Impact (Highest Priority)
- Feelslike temperature: Monitor for heat stroke or hypothermia risks
- Air quality (us-epa-index): Check for respiratory health risks
-
Physical Hazard (Medium Priority)
- Wind speed (wind_kph): Assess for falling objects or structural damage
- Gust speed (gust_kph): Prepare for sudden strong winds
- Precipitation (precip_mm): Check for flooding risks
-
Operational Safety (Medium Priority)
- Visibility (vis_km): Monitor for travel safety
- Road conditions: Check for slippery surfaces
-
Preventable Risk (Lowest Priority)
- UV Index: Use sunscreen and protective clothing
- Humidity: Stay hydrated and monitor comfort levels
-
Real-time Updates
- Automatic weather data refresh
- Live weather condition tracking
- Real-time alerts for dangerous conditions
-
Location Services
- Current location detection
- Global city search
- Recent locations history
-
Visual Indicators
- Color-coded status indicators
- Animated weather icons
- Interactive weather charts
-
User Interface
- Dark/Light mode toggle
- Responsive design
- Modern blur effects
- Smooth animations
- Weather API Documentation: API Documentation
- React: React Documentation
- TypeScript: TypeScript Documentation
- Redux Toolkit: Redux Toolkit Documentation
- Lucide React: Lucide React Documentation
- React Select Async Paginate: React Select Async Paginate Documentation
- CSS with vendor prefixes for cross-browser compatibility: MDN Web Docs
We welcome contributions! Please follow these guidelines:
- 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.