Weather Forecast Application

A modern, responsive weather application built with React and Material-UI that provides real-time weather information for any city worldwide.

Features

• 🔍 Search weather by city name
• 🌡️ Display current temperature and "feels like" temperature
• 🌅 Dynamic weather imagery based on conditions
• 💧 Humidity information
• 🌤️ Weather condition descriptions
• 📊 Min/Max temperature display
• 🎨 Beautiful, responsive UI with Material Design
• 🌈 Smooth animations and transitions

Technologies Used

• React 18
• Vite
• Material-UI (MUI)
• OpenWeather API
• CSS3 with modern features (Grid, Flexbox, etc.)

Dependencies

{
  "@emotion/react": "^11.14.0",
  "@emotion/styled": "^11.14.0",
  "@mui/icons-material": "^6.4.2",
  "@mui/material": "^6.4.2",
  "react": "^18.3.1",
  "react-dom": "^18.3.1"
}

Getting Started

1. Clone the repository:

git clone [your-repo-url]

2. Install dependencies:

npm install

3. Create a .env file in the root directory and add your OpenWeather API key:
   • Copy .env.example to .env
   • Sign up for an API key at OpenWeather
   • Replace your_api_key_here with your actual API key

VITE_WEATHER_API_KEY=your_api_key_here

⚠️ Important: Never commit the .env file to version control. It contains sensitive information and is already in .gitignore.

4. Start the development server:

npm run dev

Project Structure

src/
├── InfoBox.jsx         # Weather information display
├── SearchBox.jsx       # City search component
├── WeatherApp.jsx      # Main app component
├── App.jsx            # Root component
└── main.jsx          # Entry point

Key Features Implementation

Weather Data Fetching

• Uses the OpenWeather API
• Metric units for temperature
• Error handling for invalid city names
• Automatic data updates

Dynamic UI

• Weather-based background images
• Conditional weather icons based on conditions:
  • Thunderstorm icon for high humidity
  • Sun icon for warm temperatures
  • Snowflake icon for cold temperatures
• Responsive design for all screen sizes
• Material-UI components for consistent styling

User Interface

• Clean and intuitive design
• Error handling with user-friendly messages
• Smooth transitions and hover effects
• Mobile-first approach
• Dynamic background gradients

Building and Deployment

To create a production build:

npm run build

The build artifacts will be stored in the dist/ directory.

Environment Support

• Modern browsers (Chrome, Firefox, Safari, Edge)
• Mobile responsive
• Progressive Web App ready

Credits

• Weather data provided by OpenWeather
• Icons from Material-UI
• Background images from Unsplash

License

MIT License - feel free to use this project for your own learning or as a base for your weather application.

---

This project was bootstrapped with Vite and uses React 18 for optimal performance.