🌤️ Weather & Air Quality App

A full‑stack JavaScript application that provides real‑time weather conditions and air quality index (AQI) for any U.S. city and state. Built with React, Node.js, Express, and two external APIs: OpenWeather and IQAir AirVisual.

---

🚀 Features

• Search any U.S. city + state
• Real‑time weather data (temperature, feels like, condition, icon)
• Real‑time AQI data with a color‑coded badge
• Clean, responsive UI
• Modular React component architecture
• Backend state‑normalization (e.g., ca → California)
• Error handling and loading states
• Fully separated frontend + backend for clarity and maintainability

---

🧱 Tech Stack

Frontend

• React
• JavaScript (ES6+)
• CSS

Backend

• Node.js
• Express
• dotenv
• CORS

APIs

• OpenWeather API
• IQAir AirVisual API

---

📁 Project Structure

weather-app/
│
├── netlify/
│   └── functions/
│       └── weather.js        ← backend API
│
├── weather-app-frontend/     ← React app
│   ├── src/
│   ├── public/
│   ├── package.json
│   └── (CRA config)
│
└── netlify.toml


---
## ⚙️ How It Works

### Frontend Flow
1. User enters a city + state  
2. **WeatherForm** sends the input to **WeatherApp**  
3. **WeatherApp** calls `fetchWeather()`  
4. The backend returns combined weather + AQI data  
5. **WeatherDisplay** renders the results  
6. **AQIBadge** shows a color‑coded AQI indicator  

### Backend Flow
1. Receives request at `/api/weather`  
2. Normalizes state abbreviations  
3. Calls **OpenWeather API**  
4. Calls **AirVisual API**  
5. Combines results into a single JSON response  
6. Sends it back to the frontend  

---

## 🖥️ Running the Project Locally

### 1. Clone the repo
```bash
git clone <your-repo-url>
cd <your-project-folder>

### 2. Install frontend dependencies
```bash
npm install

### 3. Install backend dependencies
```bash
cd backend
npm install

### 4. Create a .env file in the backend
``` bash
OPENWEATHER_API_KEY=your_key_here
AIRVISUAL_API_KEY=your_key_here

### 5. Start the backend
``` bash
node index.js

### 6. Start the frontend
``` bash npm start


---

### API endpoint

```md
## 📡 API Endpoint

### GET `/api/weather`

**Query Parameters:**
```txt
city=Oakland
state=CA

```txt
Example Request: http://localhost:5001/api/weather?city=Oakland&state=CA

```txt
Example Response: {
  "city": "Oakland",
  "temperature": 12.63,
  "feelsLike": 2.16,
  "condition": "few clouds",
  "icon": "02n",
  "aqi": 59,
  "aqiCategory": "Moderate"
}
---

### Block 5 – Components, future improvements, license

```md
## 🎨 UI Components

### WeatherForm
Collects user input for city and state.

### WeatherDisplay
Shows weather details, AQI, and weather icon.

### AQIBadge
Displays a color‑coded badge based on AQI category.

---

## 📝 Future Improvements
- Add geolocation (“Use my location”)
- Add 5‑day forecast
- Add AQI health recommendations
- Deploy frontend + backend to production
- Add unit tests

---

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