Weather App 🌤️

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

---

✨ Features

• 🌍 Real-time Weather Data: Get current weather conditions for any city
• 🎨 Beautiful UI: Clean, modern interface with gradient backgrounds and smooth animations
• 🌦️ Weather Icons: Dynamic weather icons that change based on current conditions
• 📊 Detailed Information: Temperature, humidity, and wind speed data
• 🔍 Search Functionality: Easy city search with Enter key support
• 📱 Responsive Design: Works seamlessly on desktop and mobile devices

📸 Screenshots

The app displays:

• 🌡️ Current temperature in Celsius
• 🏙️ City name
• 🌤️ Weather icon based on conditions
• 💧 Humidity percentage
• 💨 Wind speed in km/h

🛠️ Tech Stack

• ⚛️ React 19.1.0 – Frontend framework
• ⚡ Vite – Build tool and development server
• 📜 JavaScript (ES6+) – Core programming language for app logic
• 🧱 HTML5 – Semantic markup structure
• 🎨 CSS3 – Styling with gradients and modern layouts
• 🌐 OpenWeatherMap API – Weather data source

📋 Prerequisites

Before running this application, make sure you have:

• 📦 Node.js (version 14 or higher)
• 🔧 npm or yarn package manager
• 🔑 An API key from OpenWeatherMap

🚀 Installation

1. 📥 Clone the repository

   git clone <repository-url>
   cd weather-app

2. 📦 Install dependencies

   npm install

3. ⚙️ Set up environment variables Create a .env file in the root directory and add your OpenWeatherMap API key:

   VITE_API_KEY=your_openweathermap_api_key_here
   

4. ▶️ Start the development server

   npm run dev

5. 🌐 Open your browser Navigate to http://localhost:5173 to view the application

🔑 API Key Setup

1. 🌐 Visit OpenWeatherMap
2. 📝 Sign up for a free account
3. 🔑 Generate an API key
4. ⚙️ Add the key to your .env file as shown above

📜 Available Scripts

• npm run dev - 🚀 Start development server
• npm run build - 📦 Build for production
• npm run preview - 👀 Preview production build

🎯 Usage

1. 🔍 Search for a city: Type the city name in the search bar
2. 📊 Get weather data: Press Enter or click the search icon
3. 👀 View results: The app will display current weather conditions including:
   • 🌡️ Temperature
   • 🌤️ Weather icon
   • 💧 Humidity
   • 💨 Wind speed

🌈 Weather Icons

The app includes icons for various weather conditions:

• ☀️ Clear sky (day/night)
• ☁️ Clouds
• 🌦️ Drizzle
• 🌧️ Rain
• ❄️ Snow
• 🌫️ Mist/Fog

⚠️ Error Handling

The application includes error handling for:

• ❌ Invalid city names
• 🌐 Network errors
• 🔧 API failures
• 🔍 Empty search queries

🤝 Contributing

1. 🍴 Fork the repository
2. 🌟 Create a feature branch (git checkout -b feature/amazing-feature)
3. 💾 Commit your changes (git commit -m 'Add some amazing feature')
4. 📤 Push to the branch (git push origin feature/amazing-feature)
5. 🔀 Open a Pull Request

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• 🌐 Weather data provided by OpenWeatherMap
• 🎥 This project was inspired by tutorials from the GreatStack YouTube channel.

☕ Support

If you find this project useful, consider showing your support:

• If you encounter any issues or have questions, please open an issue on the GitHub repository.

• ⭐ Star the repository on GitHub

• 

---

⚠️ Note: Remember to keep your API key secure and never commit it to version control. The .env file is already included in .gitignore for security.