🌤️ Weather Website

A responsive and user-friendly Weather Website built with React.js and Tailwind CSS.

The website allows users to search for any city, get related city suggestions while typing, select a city using the Up/Down arrow keys, and view current weather along with hourly and daily forecasts.

---

📸 Screenshots

🏠 Home / Weather Page

🔍 City Search Suggestions

🌦️ Weather Details

---

✨ Features

• 🌍 Search weather by city name
• 🔎 Get related city suggestions while typing
• ⌨️ Select city using Up and Down arrow keys
• 🖱️ Select city using mouse click
• 🌡️ Display current weather information
• 💨 Show wind speed and direction
• 💧 Display humidity
• 🌅 Show sunrise and sunset
• ☁️ Display weather conditions
• 🕐 Hourly weather forecast
• 📅 Daily weather forecast
• 📱 Fully responsive design
• 🎨 Modern UI using Tailwind CSS
• ⚡ Fast and interactive React interface

---

🛠️ Technologies Used

Frontend

• React.js
• Tailwind CSS
• JavaScript
• HTML5
• CSS3

APIs

• OpenWeather API
• GeoNames API

---

📁 Project Structure

weather-website/
│
├── public/
│   └── ...
│
├── src/
│   │
│   ├── assets/
│   │   └── ...
│   │
│   ├── components/
│   │   ├── Search/
│   │   │    ├── AutoComplete.jsx
│   │   │    └── Suggestion_list.jsx
│   │   ├── Weather.jsx
│   │   └── Forecast.jsx
│   │
│   │
│   ├── App.jsx
│   ├── main.jsx
│   └── index.css
│
├── .gitignore
├── package.json
├── README.md
└── tailwind.config.js

⚙️ Installation and Setup

1. Clone the Repository

git clone https://github.com/sachinwebdev369/weather-app.git
cd weather-app

2. Go to the project folder

 cd weather-website

3. Install dependencies

npm install

4. Start the development server

npm run dev