🌤️ weather.com

A clean and responsive weather forecast app built using React, Axios, and the WeatherAPI. Users can search for any city to view real-time weather information including temperature, condition, humidity, and wind speed.

---

🚀 Features

• 🔍 Search for live weather by city name
• 🌡️ View current temperature in Celsius
• ☁️ Get real-time condition description
• 💧 See humidity and wind speed
• ✅ Fully responsive design
• ⚛️ Built using React functional components and Hooks

---

⚙️ Technologies Used

• React (with Hooks)
• JavaScript (ES6+)
• CSS3
• Axios (for API calls)
• WeatherAPI.com (for weather data)
• Font Awesome (for icons)
• Vite (for lightning-fast dev server)

---

📱 Display

Below are the screenshots showing how the application looks on both desktop and mobile devices.

💻 Web View

---

📱 Mobile View

---

The app uses responsive design principles, ensuring a smooth and clean layout across all screen sizes.

📂 Project Structure

src/
├── assets/
│   ├── images/
│   │   └── bg.jpg
│   │   └── ss_pc.jpg
│   │   └── mobile_ss.jpg
│   └── weather.css          # Custom CSS styles
├── components/
│   └── weather.jsx          # Main Weather component
├── App.jsx
├── main.jsx
└── index.html

💻 Getting Started

1. Clone the Repository

git clone https://github.com/hanan-nawaz/weather.com.git
cd weather.com

2. Install Dependencies

npm install

3. Add Your API Key

Create a .env file in the root directory and add your API key:

VITE_APP_API_KEY=your_api_key_here

4. Start the Development Server

npm run dev

🌐 Live Demo

Try the live version here:
weather.com Live

📦 Build for Production

npm run build

❗ Personal Note

🗂️ This project is from when I first started learning front-end development.
I recently found the old version on my drive.

So, I:

• ✅ Converted it from class-based components to functional components
• 🧹 Cleaned up the structure
• 🎨 Redesigned the layout slightly
• 📤 Pushed it to GitHub as part of my coding archive

It's not a complex app — but it's meaningful to me as a reminder of where I began.

🙏 Acknowledgements

• React
• WeatherAPI
• Vite
• Font Awesome
• Community tutorials and documentation

📜 License

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

👤 Author

Hanan Nawaz
GitHub: @Hanan-Nawaz

---

⭐ Support

If you found this project helpful, feel free to give it a ⭐ on GitHub!