A sleek, responsive Weather Application built with React and Material UI that fetches real-time weather data from the OpenWeatherMap API.
Search for any city to view live temperature, humidity, wind speed, and weather conditions — beautifully displayed with dynamic icons and images.
https://weather-report-three-blush.vercel.app/
✅ Live Weather Data
- Fetches accurate, real-time weather data using the OpenWeatherMap API.
✅ Dynamic UI
- Shows weather icons and background images based on current conditions (hot, cold, or rainy).
✅ Clean, Responsive Design
- Built with Material UI components for a modern and mobile-friendly interface.
✅ Loading State
- Displays a spinner and “Fetching weather...” message while retrieving data.
✅ Error Handling
- Handles invalid city names or API issues gracefully with friendly messages.
✅ Conditional Rendering
- The weather card appears only after a successful search (no hardcoded defaults).
| Category | Technology |
|---|---|
| Frontend | React (Vite) |
| UI Library | Material UI (MUI) |
| API | OpenWeatherMap |
| Styling | CSS + MUI Styling System |
| Icons | MUI Icons (Sunny 🌞, Snow ❄️, Thunderstorm ⛈️) |