🌤️Weather App | React, Material UI (MUI)

A responsive Weather Application built with React.js and Material UI (MUI) that fetches real-time weather data from an API and dynamically changes the background according to weather conditions.

🌐 Live Demo:

https://weatherapp-vw8v.onrender.com

---

📌 Features

• Fetches current weather data for any city worldwide using a weather API.
• Displays detailed information:
  • Temperature, Min/Max Temperature, Feels like temperature, Humidity, Wind speed, Sunrise & Sunset time, Weather description (e.g., clear sky, rain, snow)
• Dynamic background images based on:
  ◦ Temperature
  ◦ Humidity
  ◦ Wind speed
  
• Responsive design for mobile and tablet screens using media queries.
• Shows error messages when the city is not found.
• Smooth transitions for background changes.

---

Technologies Used

• Frontend: React.js, Material UI (MUI)
• CSS: Modular component CSS, responsive media queries
• Icons: Material UI Icons

---

Future Improvements

• 7-day weather forecast.
• Animations for rain, snow, and thunderstorms.

---

Install dependencies

• npm install

Set up environment variables

◦ Create a .env file in the root directory:

• VITE_WEATHER_API_KEY=YOUR_API_KEY_HERE
• VITE_WEATHER_API_URL=https://api.openweathermap.org/data/2.5/weather

NOTE: Replace YOUR_API_KEY_HERE with your actual API key from OpenWeatherMap.

Start the development server

• npm run dev