🌦️ Weather Forecast App

Designed with production-grade patterns: debouncing, secure API access, and CI/CD automation.

A clean, responsive weather application built using HTML, CSS, and JavaScript, with a serverless backend powered by Netlify Functions.
The app fetches real-time weather data from the OpenWeather API and emphasizes smooth UX through loading states, debounced search, and subtle error animations.

---

🚀 Live Demo

👉 https://forecast-lite.netlify.app/

---

🏗️ Project Structure

weather-app/
│
├── frontend/
│ ├── index.html
│ ├── style.css
│ └── script.js
│
├── netlify/
│ └── functions/
│   └── weather.js
│
├── README.md
└── netlify.toml

---

🛠️ Tech Stack

Frontend

• HTML5
• CSS3 (Responsive layout)
• Vanilla JavaScript

Backend

• Netlify Serverless Functions
• OpenWeather API

Deployment & CI/CD

• Netlify
• GitHub

---

🧠 How It Works

• User submits a city query from the frontend
• Request is routed to a Netlify Serverless Function
• Serverless function securely queries the OpenWeather API
• Validated weather data is returned to the client
• UI updates dynamically based on the response
• Invalid inputs trigger a non-blocking shake animation for feedback

---

🧠 Architecture Overview

Browser (Frontend)
|
| fetch()
↓
Netlify Function (Backend)
|
| OpenWeather API
↓
Weather Data Response

---

✨ Features

• 🔍 Search weather by city
• ⏳ Loading spinner during data fetch
• 🧠 Debounced search to reduce unnecessary API calls
• 📦 Serverless backend with secure API key handling
• 📱 Fully responsive design
• ❌ Shake animation on invalid input (non-intrusive UX)
• ⚡ Automatic deployment on Git push (CI/CD)

---

👨‍💻 Author

Developed by : Ritik R. Yadav  
E-mail       : ritik.r.yadav0001@gmail.com  
Learning by building, breaking, and fixing ⚡

---

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