🏙️ Smart City Dashboard

A modern, real-time monitoring dashboard for air quality, weather forecasts, and traffic density. Built with React, integrating multiple Google APIs, OpenWeatherMap, and Firebase Authentication.

📋 Table of Contents

• Features
• Tech Stack
• Screenshots
• Getting Started
• Environment Variables
• Project Structure
• API Integrations
• Available Scripts
• Deployment
• Contributing
• License

✨ Features

🌬️ Air Quality Index (AQI) Module

• Real-time monitoring of 6 key pollutants (PM2.5, PM10, NO₂, SO₂, O₃, CO)
• EPA-standard AQI calculation with 6 health levels
• Interactive bar charts visualizing pollutant concentrations
• City search with Google Places autocomplete
• Color-coded health indicators (Good → Hazardous)
• Coordinates display for precise location tracking

🌤️ Weather Forecast Module

• Current weather conditions (temperature, humidity, pressure, wind speed)
• 24-hour forecast with 3-hour intervals
• Detailed weather metrics (feels like, min/max temps, cloudiness)
• Weather icons from OpenWeatherMap
• City-based weather search with autocomplete

🚦 Traffic Density Module

• Interactive Google Maps with real-time traffic layer overlay
• Route planning (Origin → Destination with autocomplete)
• Traffic analysis (duration, distance, traffic levels)
• Popular routes quick-select (4 pre-defined routes in Delhi)
• Traffic level indicators (Low/Moderate/High)
• Turn-by-turn directions visualization

🔐 Authentication System

• Multiple sign-in methods: Google OAuth, GitHub OAuth, Email/Password
• Secure session management with Firebase
• User profile display (name, email, photo)
• Password reset functionality
• Protected routes (redirects to login if not authenticated)

🎨 User Interface

• Dark theme with neon accents
• Fully responsive (Mobile, Tablet, Desktop)
• Smooth animations and transitions
• Glassmorphism effects (backdrop blur)
• Card-based layouts with hover effects
• Modern gradient backgrounds

🛠️ Tech Stack

Frontend

• React 19.2.0 - UI library
• React Router DOM 7.9.6 - Client-side routing
• Chart.js 4.5.1 - Data visualization
• react-chartjs-2 5.3.1 - React wrapper for Chart.js
• Axios 1.13.2 - HTTP client
• Vite 7.2.2 - Build tool & dev server

Backend Services

• Firebase Authentication - User authentication
• Google Maps JavaScript API - Maps & Places
• Google Air Quality API - Real-time air quality data
• OpenWeatherMap API - Weather data

Development Tools

• ESLint - Code linting
• Netlify - Deployment platform

📸 Screenshots

Add your screenshots here

🚀 Getting Started

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Google Cloud Platform account (for API keys)
• Firebase project (for authentication)
• OpenWeatherMap API key

Installation

1. Clone the repository

   git clone <repository-url>
   cd smart-city

2. Install dependencies

   npm install

3. Set up environment variables Create a .env file in the root directory:

   VITE_GOOGLE_API_KEY=your_google_api_key_here

4. Configure Firebase

   • Create a Firebase project at Firebase Console
   • Enable Authentication (Google, GitHub, Email/Password)
   • Copy your Firebase config and update auth.html and signup.html
   • Update the firebaseConfig object in both files

5. Start development server

   npm run dev

6. Open in browser Navigate to http://localhost:5173

🔑 Environment Variables

Create a .env file in the root directory with the following:

VITE_GOOGLE_API_KEY=your_google_maps_api_key

Required APIs to enable in Google Cloud Console:

• Maps JavaScript API
• Places API
• Directions API
• Distance Matrix API
• Air Quality API

Firebase Configuration: Update auth.html and signup.html with your Firebase config:

const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-project.firebaseapp.com",
  projectId: "your-project-id",
  storageBucket: "your-project.appspot.com",
  messagingSenderId: "123456789",
  appId: "your-app-id"
};

OpenWeatherMap API: The API key is currently hardcoded in WeatherPage.jsx. Consider moving it to environment variables for production.

📁 Project Structure

smart-city/
├── src/
│   ├── pages/
│   │   ├── Dashboard.jsx          # Main landing page
│   │   ├── Dashboard.css
│   │   ├── AQIPage.jsx            # Air Quality monitoring
│   │   ├── AQIPage.css
│   │   ├── WeatherPage.jsx        # Weather forecasts
│   │   ├── WeatherPage.css
│   │   ├── TrafficPage.jsx        # Traffic & routes
│   │   └── TrafficPage.css
│   ├── components/
│   │   ├── SearchBar.jsx          # City search component
│   │   ├── SearchBar.css
│   │   ├── AirQualityChart.jsx    # Bar chart visualization
│   │   ├── PollutantMetrics.jsx   # AQI & metrics display
│   │   ├── PollutantMetrics.css
│   │   ├── WeatherInfo.jsx        # Weather display
│   │   └── WeatherInfo.css
│   ├── utils/
│   │   └── googleMapsLoader.js    # Google Maps API loader
│   ├── App.jsx                    # Main app router
│   ├── App.css                    # Global styles
│   ├── main.jsx                   # Entry point
│   └── index.css                  # Base styles
├── public/
│   ├── _redirects                 # Netlify SPA routing
│   └── vite.svg
├── auth.html                      # Login page
├── signup.html                    # Signup page
├── index.html                     # Main HTML template
├── vite.config.js                 # Vite configuration
├── netlify.toml                   # Netlify deployment config
├── package.json
├── eslint.config.js
└── README.md

🌐 API Integrations

Google Maps APIs

• Places API: City search and autocomplete
• Air Quality API: Real-time air quality data
• Directions API: Route calculation
• Distance Matrix API: Traffic duration analysis
• Traffic Layer: Visual traffic overlay

OpenWeatherMap API

• Current Weather API: Real-time weather conditions
• 5-Day Forecast API: Weather predictions

Firebase

• Authentication: User sign-in/sign-up
• Session Management: User session storage

📜 Available Scripts

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Lint code
npm run lint

🚀 Deployment

Deploy to Netlify

1. Connect your repository to Netlify
2. Configure build settings:
   • Build command: npm run build
   • Publish directory: dist
3. Add environment variables in Netlify dashboard:
   • VITE_GOOGLE_API_KEY
4. Deploy! Netlify will automatically deploy on git push

The netlify.toml file is already configured for SPA routing.

Manual Deployment

1. Build the project:

   npm run build

2. The dist folder contains the production-ready files

3. Upload to any static hosting service (Netlify, Vercel, GitHub Pages, etc.)

🔒 Security Notes

• Never commit API keys to version control
• Use environment variables for sensitive data
• Enable CORS restrictions in Google Cloud Console
• Set up API key restrictions in Google Cloud Console
• Use Firebase security rules for production

🐛 Troubleshooting

Google Maps not loading

• Verify your API key is correct
• Check if all required APIs are enabled in Google Cloud Console
• Ensure API key restrictions allow your domain

Authentication not working

• Verify Firebase configuration in auth.html and signup.html
• Check if authentication methods are enabled in Firebase Console
• Verify domain is authorized in Firebase Console

API errors

• Check API quota limits
• Verify API keys are valid
• Check network connectivity
• Review browser console for detailed error messages

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Your Name

• GitHub: @yourusername
• Email: your.email@example.com

🙏 Acknowledgments

• React - UI library
• Vite - Build tool
• Chart.js - Data visualization
• Firebase - Authentication
• Google Maps Platform - Maps & APIs
• OpenWeatherMap - Weather data

📊 Project Status

✅ Active Development - Currently working on:

• Historical data tracking
• Multi-city comparison
• User preferences
• PWA support

---

Made with ❤️ using React and Vite