🌤️ Weather App

A sleek, full-featured weather application built using React, TypeScript, and Vite, with a custom glassmorphism "Glass Mystic" UI design. This app lets users search weather information for any city in a visually elegant interface.

---

🚀 Demo

(Add your deployed app link here)

👉 https://your-live-weather-app.vercel.app

---

💡 Features

• 🔍 City search with real-time weather details
• ☀️ Displays temperature, weather condition, humidity, wind, etc.
• 🎨 Custom glassmorphism UI
• 📱 Responsive and modern design
• ⚡ Fast performance thanks to Vite

---

🛠️ Tech Stack

• React – UI library
• TypeScript – Strong typing
• Vite – Build tool / dev server
• Tailwind CSS – Styling (utility-first CSS)
• Optional: weather API (e.g., OpenWeatherMap)

---

📁 Project Structure

Weather_App/
├── public/
├── src/
│   ├── components/
│   ├── App.tsx
│   ├── main.tsx
│   └── styles/
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md

---

🎯 Setup & Installation

1. Clone the repository

git clone https://github.com/Syed-centem/Weather_App.git

2. Navigate into project folder

cd Weather_App

3. Install dependencies

npm install
# or
yarn

4. Start development server

npm run dev

Your app should now be running at http://localhost:3000.

---

🔑 API Configuration

If your app uses a weather API (e.g., OpenWeatherMap):

1. Sign up at https://openweathermap.org/ and get an API key.
2. Create a .env file in the root (if needed) and add:

VITE_WEATHER_API_KEY=your_api_key_here

3. Restart the dev server.

---

📦 Build

To create a production build:

npm run build

---

---

📄 License

---

👤 Author

Syed-centem GitHub: https://github.com/Syed-centem

---

⭐ If you like this project, please give it a star!

---

### 👍 Suggestions for Improvement

Here are some features you *might* add later:

- 🌍 Geolocation (detect user’s current location)
- 📊 5-day weather forecast
- ⛅️ Weather icons + animations
- 🌑 Dark / light theme toggle

---