Weather Web App (Minor Project)

Project Title & Objective

Title: Weather Web App
Objective: Build a small full-stack weather application that fetches and displays current weather and a 5-day forecast for a searched city. The backend proxies requests to OpenWeatherMap to keep the API key secret.

---

Project Description (what & why)

This app allows users to search for a city and view:

• Current temperature, description, humidity, wind speed
• 5-day forecast (daily summaries)

Why: demonstrates RESTful proxying, frontend-backend communication, and using third-party APIs securely (API key stored on server-side). The project follows the course PDF submission checklist (README, .env.example, screenshots, deployment notes).

---

Tech Stack

• Frontend: React (Create React App), HTML, CSS, JS
• Backend: Node.js, Express.js (proxy to OpenWeatherMap)
• API: OpenWeatherMap (free tier)
• Deployment: Vercel (frontend), Render (backend) or use Docker Compose locally

---

Repo Link

https://github.com/Saisuman55/weather-web-app (replace with your repo link if different)

---

Live / Deployed Links

• Frontend: https://<your-frontend>.vercel.app
• Backend: https://<your-backend>.onrender.com

---

Setup Instructions

1) Get an OpenWeatherMap API key

• Sign up at https://openweathermap.org/ and get an API key (free tier).

2) Server (backend)

1. cd server
2. Copy .env.example to .env and fill:

   PORT=5000
   OPENWEATHER_API_KEY=your_openweather_api_key

3. Install & run:

   npm install
   npm run dev    # uses nodemon (dev) or npm start for production

API endpoints (proxied):

• GET /api/weather/current?q=<city> — current weather
• GET /api/weather/forecast?q=<city> — 5 day forecast

3) Client (frontend)

1. cd client
2. Install & run:

   npm install
   npm start

3. The client uses http://localhost:5000/api by default; set REACT_APP_API_URL if backend deployed elsewhere.

---

Screenshots (Required for submission)

Add these to screenshots/ and link in README:

1. Home / search page — home.png
2. Current weather view — current.png
3. Forecast view — forecast.png
4. Mobile responsive view — mobile.png

---

Security notes

• Do not commit .env or your real OpenWeather API key — use .env.example only.
• Include screenshots and deployment links before submission.