🌆 Smart City Data Dashboard (React)

🧭 Overview

The Smart City Data Dashboard is a React web app that visualizes real-time environmental data — including weather and air quality — for any selected city using open public APIs. It uses Chart.js for interactive graphs and showcases how data-driven insights can help monitor and improve city conditions.

---

🎯 Objective

• Fetch real-time or publicly available Smart City data using APIs.
• Visualize metrics such as temperature, humidity, and air quality (PM2.5, PM10).
• Present data through an interactive dashboard with a clean and modern UI.
• (Bonus) Support multiple APIs and auto-refresh for live updates.

---

⚙️ Features

✅ Fetches real-time weather and air quality data ✅ Displays key metrics like temperature, humidity, wind speed, and AQI ✅ Visualizes trends using Chart.js (react-chartjs-2) ✅ Responsive and user-friendly React UI ✅ City selector to dynamically update data ✅ (Bonus) Auto-refreshes every few minutes for live updates

---

🧩 Tech Stack

Category	Technology
Frontend Framework	React.js
Visualization	Chart.js + react-chartjs-2
API Integration	Axios
Data Sources	OpenWeatherMap API (Weather), OpenAQ API (Air Quality)
Styling	CSS / TailwindCSS (optional)
Tools	Postman (for testing APIs), GitHub (for version control)

---

🌍 APIs Used

Data Type	API	Example Endpoint
🌦 Weather	OpenWeatherMap API	https://api.openweathermap.org/data/2.5/weather?q=Delhi&appid=YOUR_API_KEY&units=metric
🌫 Air Quality	OpenAQ API	https://api.openaq.org/v2/latest?city=Delhi

---

📁 Project Structure

smart-city-dashboard/
│
├── src/
│   ├── components/
│   │   ├── WeatherCard.js
│   │   ├── AirQualityCard.js
│   │   ├── ChartComponent.js
│   │   └── CitySelector.js
│   ├── App.js
│   ├── App.css
│   └── index.js
│
├── .env
├── package.json
└── README.md

---

🚀 Getting Started

1️⃣ Clone the Repository

git clone https://github.com/<your-username>/smart-city-dashboard.git
cd smart-city-dashboard

2️⃣ Install Dependencies

npm install

3️⃣ Setup Environment Variables

Get a free API key from OpenWeatherMap and create a .env file:

REACT_APP_WEATHER_API_KEY=your_api_key_here

⚠️ Note: Restart the app after editing .env for React to detect environment variables.

4️⃣ Run the App

npm start

App runs at 👉 http://localhost:3000

---

💡 Core Components

🟦 WeatherCard.js

Fetches and displays real-time weather metrics:

• Temperature 🌡
• Humidity 💧
• Wind Speed 🌬

🟩 AirQualityCard.js

Uses OpenAQ API to display:

• PM2.5, PM10, and overall AQI levels
• AQI status (Good / Moderate / Poor)

🟨 ChartComponent.js

Renders interactive line/bar charts showing data trends over time using react-chartjs-2.

🟧 CitySelector.js

Dropdown to select a city dynamically — triggers re-fetch of all data.

---

📊 Example Chart (Chart.js)

import { Line } from 'react-chartjs-2';

const data = {
  labels: ['9 AM', '12 PM', '3 PM', '6 PM', '9 PM'],
  datasets: [
    {
      label: 'PM2.5 Levels (µg/m³)',
      data: [45, 60, 72, 58, 49],
      borderColor: 'rgba(75,192,192,1)',
      fill: false,
    },
  ],
};

<Line data={data} options={{ responsive: true }} />;

---

🧰 Dependencies

"dependencies": {
  "axios": "^1.7.0",
  "chart.js": "^4.4.0",
  "react": "^18.2.0",
  "react-chartjs-2": "^5.2.0",
  "react-dom": "^18.2.0"
}

Install manually if needed:

npm install axios chart.js react-chartjs-2

---

✨ Optional Features

🔹 Add auto-refresh every minute to update live readings 🔹 Use multiple APIs (e.g., Weather + Air Quality + Traffic) 🔹 Display AQI color status (green → red based on value) 🔹 Add charts comparing multiple cities 🔹 Integrate Leaflet.js map to show sensor locations

---

🧠 Learning Outcomes

✅ Working with public REST APIs in React ✅ Managing API keys with environment variables ✅ Handling asynchronous requests using Axios ✅ Building reusable components and props ✅ Creating interactive data visualizations with Chart.js ✅ Designing clean, responsive dashboards

---

📸 Example Dashboard Layout

--------------------------------------------
🌆 Smart City Dashboard – Delhi

[City Selector ▼]

🌦 Weather: 29°C | 💧 Humidity: 62% | 🌬 Wind: 3.4 m/s
🌫 Air Quality (PM2.5): 175 µg/m³ [Unhealthy]

📊 [Chart showing AQI trend over time]
--------------------------------------------

---

🧑‍💻 Author

Aryan Singh 🌐 GitHub Profile 📧 [your-email@example.com] 💡 Web Developer | Data Enthusiast | React Learner

---

🏁 Conclusion

The Smart City Data Dashboard demonstrates the power of open data and modern web technologies. It combines React.js, Chart.js, and real-time APIs to visualize urban metrics and provide valuable insights — making it an ideal project for developers exploring API integration and data visualization.