A sleek and responsive weather widget built with React and Material UI, using live weather data from the OpenWeatherMap API. Enter any city name and get real-time weather details like temperature, humidity, min/max temperature, and a dynamic weather icon — all displayed inside a clean card layout.
This project is perfect for learning API integration, component design, and dynamic UI rendering in React.
🚀 Live Demo: Visit Here
| Search & Display - Sunny | Rainy | Cold |
|---|---|---|
 |
 |
 |
- 🔍 Search Box with user input form
- 📦 Real-time Weather Data via OpenWeatherMap API
- 📊 Displays:
- Temperature
- Min/Max temperature
- Humidity
- Feels Like
- Weather Condition
- 🌤️ Shows a weather icon/image based on condition (e.g., sunny, rain, cold)
- 📱 Responsive UI using Material UI components
- 🔁 Graceful error handling for "city not found"
- 💡 Uses
.envfor secure API key management
| Technology | Purpose |
|---|---|
| React | Front-end component structure |
| Material UI | UI design & responsiveness |
| OpenWeatherMap | Weather data API |
| Vite | Fast dev build tool (React + Vite) |
| CSS / MUI | Custom styling |
- How to fetch and use external APIs in React
- How to manage state and props across components
- Dynamic UI rendering with conditional logic
- Using Material UI for styling and layout
- Secure handling of API keys using .env and Vite