PROJECT REPORT ON

SMART-CITY DASHBOARD
Submitted to

Department of Computer Applications

in partial fulfillment for the award of the degree of

BACHELOR OF COMPUTER APPLICATIONS

Batch (2022-2025)

Submitted by

Name: Anant Butola

Enrollment Number: GE-23213363

University Roll No. :2103363

Under the Guidance of

Mr. Vikash Kumar

GRAPHIC ERA DEEMED TO BE UNIVERSITY DEHRADUN

June - 2025

pg. - 1 -
 CANDIDATE’S DECLARATION

I hereby certify that the work presented in this project report entitled “Smart-City Dashboard” in
partial fulfillment of the requirements for the award of the degree of Bachelor of Computer Applications
is a bonafide work carried out by me during the period of May 2025 to June 2025 under the supervision
of Mr. Vikash Kumar, Department of Computer Application, Graphic Era Deemed to be University,
Dehradun, India.

This work has not been submitted elsewhere for the award of a degree/diploma/certificate.

Name and Signature of Candidate

This is to certify that the above mentioned statement in the candidate’s declaration is correct to the
best of my knowledge.

Date: Name and Signature of Guide

Signature of Supervisor Signature of External Examiner

HOD

pg. - 2 -
 Acknowledgement

I would like to express my sincere gratitude to all these individuals for mentoring and
supporting me in completing this project on Smart City Dashboard My
Guide Mr. Vikash Kumar, for providing me with invaluable insights and direction.

To my parents, their constant encouragement, patience, and understanding have been

the pillars of my success.

I am grateful to my friends who contributed ideas and perspectives that enriched the
project.

Thank you everyone for shaping this project and enhancing my learning experience.

pg. - 3 -
 Table of Contents

S.No Contents Page no.

Candidate’s Declaration 2

Acknowledgment 3

Table of Contents 4-5

1. INTRODUCTION 6
1.1 Objective 6-7
1.2 Justification and Need For the System 7
1.3 Advantages 8
1.4 Previous work or related systems, 8
how they are used
1.5 Features 9-14
2. Requirement Analysis 15
2.1 Analysis Study 15-16
2.2 User Requirements 17
2.3 Final Requirements 17
3. System Design 18
3.1 Hardware, Software Requirements 18
3.2 System Requirements 18-19
3.3 Design Requirements 19-20
3.4 DFD 21
3.5 E-R Diagram 22
4. Coding And Implementation 23-24
4.1 Operating System 25
4.2 Languages Used 25-26
4.3 Coding 26
▪ HTML 26-29
▪ CSS 29-40
▪ JavaScript 41-46
4.4 Error Handling 47-48
5. Testing And Test Results 49
5.1 Software Testing 49
5.2 Test Objective 49
5.2.1 Unit Testing 50
5.2.2 Integration Testing 50
5.2.3 Authentication Testing 50-51

pg. - 4 -
 5.2.4 API Testing 51
5.2.5 UI/UX Testing 51-52
5.2.6 Error Handling Testing 52

6. Conclusion

6.1 Conclusion 53

6.2 Future Scope 53

7. Biblography 54

pg. - 5 -
 CHAPTER 1
INTRODUCTION
In the age of rapid urbanization and digital transformation, cities are increasingly seeking
smarter solutions to manage infrastructure, optimize resources, and enhance the quality of
life for their residents. A Smart City Dashboard serves as a centralized platform that
brings together critical urban metrics—such as traffic flow, energy consumption, air
quality, weather updates, public transportation, and waste management—into one user-
friendly interface.

This project presents a web-based Smart City Dashboard built using modern web
technologies like HTML, CSS, JavaScript, and powered by a Node.js/Express
backend. It integrates various real-time APIs to provide dynamic, location-based insights
that help citizens and administrators make data-driven decisions.

Key goals of the project include:

• Providing live monitoring of essential urban services.

• Enabling user interaction through search and city-specific insights.

• Presenting complex data in a visually accessible format using charts and maps.

• Demonstrating responsive, modular web development practices suitable for

modern civic technology platforms.

This project not only showcases full-stack web development skills but also highlights the
potential of technology to improve urban living and governance through data visibility
and smart analytics.

1.1 Objective

The Smart City Dashboard project aims to develop an interactive and comprehensive
platform that visualizes and monitors various aspects of urban life through real-time data
integration and user-friendly interfaces. The central purpose of the project is to support
city authorities, decision-makers, and the general public by offering a consolidated view
of critical smart city metrics — thereby enhancing situational awareness, operational
efficiency, and data-driven governance.
Core Goals and Motivation
In today’s rapidly urbanizing world, cities face growing challenges such as traffic
congestion, rising pollution, unpredictable weather patterns, increasing energy demands,
and the need for efficient resource management. To address these challenges, many cities

pg. - 6 -
are transitioning toward smarter, data-centric approaches to urban management.
This project was initiated with the following goals in mind:
• To aggregate real-time data from multiple domains such as transportation,
energy, pollution, weather, and crime.
• To provide intuitive visualizations (charts, graphs, and maps) that help users
quickly understand trends and make informed decisions.
• To promote transparency and accessibility of urban data through a public-
facing web application.
• To ensure secure user authentication for personalized access and administrative
functionalities.
The dashboard serves as a prototype solution for smart governance, with the ability to
scale and integrate additional services in the future.
Scope of the Dashboard
The system focuses on multiple core areas essential for a smart city environment:
1. Traffic Monitoring:
o Displays live traffic speeds, congestion levels, and travel times.
o Interactive line charts and maps show historic and geographic traffic
trends.
o Simulated or real-time data can be loaded via the backend API.
2. Energy Consumption Analytics:
o Offers insights into current, peak, and average energy usage.
o Includes visual breakdowns between renewable and non-renewable
sources.
o Graphs show hourly patterns and help track energy sustainability efforts.
3. Pollution Levels:
o Air quality data including PM2.5, CO2, NO2, and O3 levels.
o Uses badge indicators and color-coded alerts for quick health
interpretation.
o Helps assess the impact of industrial and vehicular emissions.
4. Waste Management:
o Tracks daily waste collection and recycling rates.
o Composition charts detail how different waste types contribute to overall
volume.
o Useful for optimizing city sanitation strategies.
5. Weather & Disaster Alerts:
o Real-time temperature, humidity, wind speed, pressure, and visibility data.
o Displays sunrise/sunset times and five-day forecasts.
o Supports alerts for natural disasters (e.g., storms, earthquakes).
6. Public Transportation:
o Route-finding tool using origin and destination inputs.
o Displays service updates, route options, and integration with Google
Maps.
o Aims to promote use of public transport systems.
7. Crime Monitoring:

pg. - 7 -
 o Shows incident reports and emergency response times.
o Designed for increasing public safety awareness.
8. Wi-Fi Availability:
o Checks public connectivity points and signal strength across locations.
o Supports digital inclusion by tracking coverage.
System Architecture Overview
• Frontend
The dashboard UI is built using HTML, CSS, and JavaScript. It uses libraries
like Chart.js for rendering visual data and Leaflet for interactive mapping. The
interface is designed to be responsive and visually appealing, ensuring usability
across desktops and mobile devices.
• Backend
A custom-built backend using Node.js and Express.js powers the API services.
This layer handles:
o API requests to third-party services (e.g., pollution, weather).
o Data simulation when real-time feeds are unavailable.
o Business logic for data aggregation and formatting.
• Authentication and Data Storage
User login and registration functionalities are handled using MongoDB. The
backend securely stores:
o User credentials and session tokens.
o City search history or preference (optional features).
This setup allows the system to be extended for role-based access control
in the future.
Conclusion
The Smart City Dashboard offers a unified platform for visualizing essential city metrics,
empowering stakeholders to act quickly and intelligently in response to urban issues. It
demonstrates how modern web technologies, when combined with public data and
thoughtful design, can help cities become more efficient, responsive, and sustainable.

1.2 JUSTIFICATION AND NEED FOR THE SYSTEM

1. The Urban Challenge

Cities are at the forefront of global change. With rapid urbanization, metropolitan areas
face complex challenges, including:
• Traffic congestion and rising travel times

pg. - 8 -
 • Unpredictable weather events and climate change
• Pollution and declining air quality
• Overburdened energy grids and low renewable integration
• Inefficient waste disposal systems
• Increased crime rates and security concerns
Traditional management methods, which rely on manual reporting, siloed data, and
delayed analysis, are no longer sufficient. There is a growing demand for real-time,
data-driven decision-making systems to manage urban operations more efficiently.
2. The Smart City Concept
A Smart City uses digital technologies to enhance the quality and performance of urban
services. The goal is to:
• Improve city infrastructure and sustainability
• Provide better services to residents
• Enhance urban safety and resilience
• Reduce environmental impact
• Engage citizens in city planning and awareness
To enable this, real-time data collection, storage, processing, and visualization become
essential. This is where the Smart City Dashboard fits in.
3. Why This System is Needed
The proposed Smart City Dashboard fulfills a critical need by addressing the following:
a. Centralized Data Visualization
Instead of accessing multiple disconnected platforms, city officials and users can use a
single interface to monitor key indicators like traffic, weather, energy, and pollution. This
integration improves decision-making speed and effectiveness.
b. Real-Time Monitoring
With backend integration and API data feeds, the dashboard updates data dynamically.
This enables users to respond to issues — such as a traffic jam or a pollution spike — as
they happen, rather than after delays.
c. Public Transparency and Awareness
By making urban data accessible to all, this system empowers citizens to make informed
choices. For example, a commuter can check traffic and air quality before choosing a

pg. - 9 -
route.
d. Resource Optimization
City authorities can better allocate public resources (e.g., increase waste collection in
high-waste zones or redirect energy to peak-demand areas) by interpreting trends
visualized on the dashboard.
e. Scalability and Modularity
The system is designed to be easily extended. New modules — such as water
management or noise pollution — can be added with minimal effort, making the platform
future-proof.
f. Secure Access with Authentication
Using MongoDB for authentication ensures secure and scalable login capabilities,
enabling future integration of user-specific features such as dashboards for residents,
administrators, and policymakers.
4. Use Case Scenarios
Here are a few real-world examples where the system becomes essential:
• Urban Planning: City planners use energy, pollution, and traffic data to model
and test infrastructure changes.
• Disaster Response: Emergency managers monitor disaster alerts and weather
forecasts to deploy resources proactively.
• Environmental Monitoring: Environmental agencies track air quality and
promote greener initiatives.
• Public Transport Improvement: Transport authorities analyze route usage and
delays to optimize bus or metro systems.
5. Technical Justification
From a technical standpoint, this system justifies its development through:
• Efficient Data Handling: Node.js and Express.js provide a fast, non-blocking
backend ideal for handling multiple API requests simultaneously.
• Scalable Storage: MongoDB is a NoSQL database that handles semi-structured
data and scales easily, making it suitable for authentication and optional logging
modules.
• Modern Frontend Technologies: With responsive design, data charts (via

pg. - 10 -
Chart.js), and maps (via Leaflet), users receive a rich, interactive experience that
promotes usability and engagement.

pg. - 11 -
1.3 Advantages

The Smart City Dashboard offers numerous advantages for government bodies, city planners,
emergency responders, and the general public. Through its unified, data-centric approach, the
system enhances decision-making, transparency, and operational efficiency in urban management.
The key advantages include:

1. Real-Time Data Monitoring

The system provides live updates across multiple domains such as traffic, pollution, weather, and
energy usage.
This allows authorities to respond quickly to changing city conditions, such as traffic congestion or
weather anomalies.

2. Centralized and Integrated View

Combines multiple city services and data layers into a single, accessible platform.
Eliminates the need to rely on disconnected systems or manually compiled reports.
Facilitates cross-functional decision-making, where data from one domain (e.g., pollution) can
inform actions in another (e.g., traffic redirection).

3. Interactive Visualizations
Uses dynamic charts, maps, and toggle views for better clarity and usability.
Visual interfaces allow non-technical users (such as citizens or administrators) to interpret complex
datasets intuitively.

4. Supports Smart Governance

Enables data-driven urban planning and policy formulation.
City officials can optimize resources, plan infrastructure, and predict demand using real usage
patterns (e.g., energy peak hours or high-waste areas).

5. Promotes Public Awareness and Transparency

pg. - 12 -
Provides residents with access to real-time data on air quality, traffic, weather, and public transport.
Builds trust and engagement between city officials and citizens.
Helps individuals make informed decisions in daily life, such as choosing the safest travel routes or
minimizing exposure to pollution.

6. Scalable and Modular Architecture

Built using Node.js and Express.js, the system is fast, scalable, and easy to extend.
New modules (e.g., water usage, noise pollution, carbon tracking) can be added without major
redesign.
MongoDB offers flexibility in storing both structured and semi-structured data.

7. Secure Authentication System

Incorporates user login functionality with MongoDB storage for credentials.
Ensures that administrative features or user-specific data remain protected.
Supports future expansion for role-based access control, such as different dashboards for public
users, analysts, and city officials.

8. Platform Independence and Web Accessibility

The dashboard is browser-based and responsive, working across devices including PCs, tablets, and
smartphones.
Requires no special software installations, increasing accessibility and usability.

9. Simulation and Fallback Support

In cases where live data is unavailable, the dashboard can simulate realistic data trends, ensuring
uninterrupted functionality.
This is especially useful in prototyping, training, or in areas with low data connectivity.

10. Educational and Research Applications

Acts as a learning tool for students and researchers interested in smart cities, urban planning, data
visualization, or environmental science.
pg. - 13 -
Provides a working model of how digital infrastructure can enhance civic life.

Summary
The Smart City Dashboard is more than a visualization tool — it is a step toward sustainable,
efficient, and citizen-focused urban management. By merging technology, data, and user-centered
design, it empowers both city officials and the public to build smarter, more livable cities.

1.4 Previous Work or related systems; how they are used

Smart city initiatives are increasingly being adopted worldwide to enhance the quality of urban
life. A number of existing platforms and systems have already been developed, each with its
own focus area, technology stack, and scope. This section highlights some of the key systems
related to the Smart City Dashboard and compares how they are used in real-world
applications.

1. Government-Driven City Dashboards

Several municipalities and state governments have developed their own digital dashboards to
manage city functions and resources. Some notable examples include:
a. Delhi Pollution Control Committee (DPCC) Air Quality Portal
Displays real-time air quality data for various monitoring stations.
Limited to air pollution data and lacks integration with other city services like transport or energy.
b. Smart City Mission Dashboards (India)
Implemented in cities like Pune, Bhopal, and Surat under India’s Smart City Mission.
Use proprietary systems to track civic infrastructure projects, budget utilization, and IoT-based
monitoring.
While effective at the municipal level, these systems are not always accessible to the general
public or may lack real-time visualization.
c. London Datastore (UK)
Provides open access to various datasets like housing, transport, energy, and demographics.
Though comprehensive, it is data-centric but not visualization-rich, requiring technical knowledge
to analyze datasets effectively.

2. Commercial Smart City Platforms

Many private technology firms have also developed smart city solutions, often deployed at a
large scale in collaboration with local governments.
a. IBM Intelligent Operations Center
• Integrates city data (traffic, utilities, emergency response) into a unified platform.
• Focused on predictive analytics and real-time alerts, mainly for administrative use.
• High cost and infrastructure complexity make it less suitable for public-facing transparency.
b. Cisco Kinetic for Cities
• Offers sensor-based data collection and edge computing for public safety, parking, and lighting.
• Best suited for enterprise-grade smart city deployments.
• Does not typically provide open-access dashboards for public information.
pg. - 14 -
 3. Traffic and Transit Applications
These systems primarily focus on transportation analytics:
a. Google Maps Live Traffic
• Shows real-time traffic congestion using GPS data from users.
• Highly user-friendly but does not provide historical data or city-wide congestion trends in one
place.
• Lacks integration with environmental data, public safety, or resource usage.
b. Moovit and Citymapper
• Provide real-time public transport routing and updates.
• Useful for daily commuting but narrow in scope, focusing only on mobility.

4. Environmental and Weather Portals

These platforms are widely used by both citizens and researchers:
a. AQICN.org (World Air Quality Index Project)
• Offers air quality data from thousands of stations globally.
• Visual, but focused solely on pollution levels (PM2.5, CO2, etc.).
• Does not include other metrics like energy usage, crime, or disasters.
b. Weather.com / AccuWeather
• Provide weather data and forecasts using satellite feeds and models.
• Ideal for weather prediction, but not integrated with local governance or infrastructure data.

pg. - 15 -
 1.5 Features

The Smart City Dashboard is built as a modular, scalable, and responsive web application that integrates
multiple smart city services into a single unified interface. Its features are categorized across various
domains, offering both administrative control and public transparency.

1. User Authentication System

• Secure Login and Registration:
Users can create accounts and log in securely using a backend built with Node.js and Express.js,
and data stored in MongoDB.
• Session Handling:
Login sessions are managed using local storage to ensure persistent access and control over
dashboard visibility.
• Access Control:
Non-authenticated users are restricted from using core dashboard features, ensuring data privacy
and system integrity.

2. Searchable City Interface

• Dynamic Search Bar:
Users can search any city or state in India to fetch localized data.
• Geolocation Integration:
The system uses geocoding (via Nominatim API or backend proxy) to convert city names into
map coordinates for accurate data retrieval.

3. Traffic Monitoring
• Live Traffic Charts:
Interactive line graphs display traffic speed trends across the last 12 hours.
• Map View:
An embedded Leaflet.js map shows traffic conditions and congestion levels for selected cities.
• Modal with Full Details:
Clicking the three-dot icon opens a modal window showing current speed, free flow speed, travel
pg. - 16 -
 time, and congestion percentage.

4. Energy Consumption
• Time-Based Energy Graphs:
Shows hourly usage data with toggles between line and pie charts.
• Key Metrics Displayed:
Current, peak, and average usage (in kWh), and percentage of renewable vs. non-renewable
sources.
• Simulated Backend Data:
Backend returns realistic sample data sets for different cities for demonstration purposes.

5. Pollution Monitoring
• Live Air Quality Readings:
Displays PM2.5, CO2, NO2, and O3 levels using color-coded badges.
• Health Indicator Codes:
PM2.5 levels are categorized into "Good", "Moderate", "Unhealthy", and "Very Unhealthy"
using clear visual cues.
• Pollution Data Integration:
Pollution information is retrieved from real-time or fallback API sources.

6. Waste Management
• Daily Waste Statistics:
Dashboard shows daily waste collected and recycling rate.
• Waste Composition Chart:
Pie chart representation of waste types (e.g., organic, plastic, glass) helps cities assess recycling
performance.
• Expandable Modal for Deep Insights:
Button provides more detailed waste analytics for a selected region.

7. Public Transportation
• From-To Route Finder:
Users can enter start and end locations to generate possible public transport routes.
• Google Maps Integration:
pg. - 17 -
 A live map shows transit routes and estimated times, updated dynamically.
• Service Update Section:
Admins or APIs can provide live status for bus, metro, or train routes.

8. Weather and Forecast

• Current Conditions:
Displays temperature, humidity, wind speed, pressure, and visibility.
• Forecast Widget:
5-day forecast cards show predicted temperature, icons, and weather conditions.
• Sunrise & Sunset:
Automatically updates based on geolocation to provide time-sensitive weather info.

9. Natural Disaster Alerts

• Emergency Notices:
Section dedicated to showing earthquake, flood, storm, or heatwave alerts.
• Color-coded Severity Tags:
Alerts are categorized (e.g., Yellow = Low Risk, Red = Severe).
• Preparedness Tips (Optional):
A block can display recommended actions based on the disaster type.

10. Crime Monitoring

• Monthly Report Count:
Shows number of incidents reported in the current month.
• Emergency Response Time:
Displays average time taken by local services to respond to incidents.

11. Wi-Fi Connectivity Tracking

• Network Health Status:
Indicates availability of public Wi-Fi in different zones (planned for future).
• Digital Inclusion Support:
Encourages transparency about digital accessibility in underserved areas.

pg. - 18 -
12. Responsive and Aesthetic Design
• Modern UI with CSS Styling:
Built with responsive CSS (Flexbox & Grid), elegant fonts, and card layouts.
• Device Compatibility:
Works seamlessly across desktops, tablets, and mobile devices.
• Background Blur and Theme Effects:
Improves visual experience without compromising readability.

pg. - 19 -
 Chapter 2

REQUIREMENT ANALYSIS

Functional Requirements

Functional requirements are the requirements that describe the functionalities of the system
elements. It may involve functional user requirements or functional system requirements.

For example:

❖ The operator shall be able to input the region to the system to view the desired weather
parameters.
❖ The system shall provide the following weather parameters: temperature, pressure,
wind speed ,date / time and humidity.

2.1 ANALYSIS STUDY

The analysis phase of the Smart City Dashboard project focused on understanding the current challenges
faced by urban areas, the technological limitations of existing systems, and the expectations of end users
(including both administrators and the general public). This study helped shape the functional
architecture, data flow, and usability of the dashboard.

1. Problem Identification
Modern cities are becoming increasingly complex to manage due to rapid population growth, rising
pollution, growing energy needs, and transport congestion. Traditional systems often handle only one
aspect (e.g., pollution monitoring or traffic updates) and are typically not accessible or intuitive for the
public. Key problems identified include:
• Fragmented data systems across city departments
• Lack of real-time monitoring tools
• Minimal public transparency and participation
• Inability to visualize trends across different city services

2. Stakeholder Analysis
a. City Administrators:
pg. - 20 -
 • Require access to real-time insights to manage resources and respond to emergencies.
• Need integrated data for planning and operational decisions.
b. Citizens:
• Want easy access to traffic, pollution, and weather information to make daily decisions.
• Prefer mobile-friendly interfaces with simple visualizations.
c. Developers and Data Analysts:
• Require modular and scalable systems that can be extended and integrated with APIs.
• Need access to structured, reliable datasets for research or analysis.

3. Existing System Evaluation

An evaluation of related systems (e.g., Google Maps for traffic, AQICN for pollution, government city
dashboards) showed that:
• Most platforms are domain-specific.
• Many lack integration and interactive visualizations.
• Some are enterprise-only or have restricted public access.
• Few offer simulation capabilities for educational or fallback purposes.

4. Feasibility Analysis
The technical and operational feasibility of building a unified dashboard was assessed:
• Technical Feasibility:
Use of modern web technologies (Node.js, Express.js, MongoDB, Chart.js, Leaflet.js) allows fast
and scalable development.
• Economic Feasibility:
The system relies on open-source tools and public APIs, minimizing development and
deployment costs.
• Operational Feasibility:
The dashboard is designed with a simple UI/UX to ensure usability for both government staff
and citizens.

5. Outcome of the Analysis

From the study, it was concluded that an integrated, modular, and interactive dashboard is a viable
solution to meet the modern needs of smart city management.

pg. - 21 -
 2.1.2 Feasibility Study

The feasibility study for the Smart City Dashboard assesses whether the project is practically
achievable and beneficial. It evaluates technical requirements, economic impact, operational
readiness, and potential challenges. The study helps determine if the proposed dashboard system
can effectively collect, process, and display real-time city data such as traffic, pollution, weather,
and public services. By examining all aspects, it ensures that resources are used wisely and goals
are achievable within constraints.

2.1.3 Technical Feasibility

The Smart City Dashboard is technically feasible due to the availability of modern web
technologies like HTML, CSS, JavaScript, and APIs such as OpenWeatherMap, WAQI, and
Google Maps. The use of responsive design, real-time data integration, and interactive charts
ensures smooth functionality on various devices. The backend can be supported using Node.js
and Express, making it scalable and efficient. Additionally, open-source tools like Leaflet.js for
maps reduce development complexity.

2.1.4 Economical Feasibility

This project is economically viable as it primarily uses free or low-cost technologies and open
APIs. The development requires minimal infrastructure investment, and hosting can be managed
through affordable cloud services. Since it is a web-based solution, there's no need for expensive
hardware. Long-term maintenance costs are also low, making it a cost-effective system for cities
aiming to digitize and optimize their public service monitoring.

Operational Feasibility

Operationally, the system is feasible because it addresses real-world needs like monitoring traffic,
pollution, and energy consumption in urban areas. The dashboard is user-friendly and provides visual
insights that assist citizens, planners, and administrators. Authentication features ensure data privacy,
and the modular design allows for easy updates and scalability. Users with basic digital literacy can
operate the system efficiently without special training.

pg. - 22 -
 2.2 USER REQUIREMENTS

The Smart City Dashboard is designed to meet the needs of various user groups such as city
administrators, planners, and the general public. Below are the key user requirements:
1. Real-Time Data Access: Users must be able to view live information about traffic, weather,
pollution, energy usage, and more in an easily digestible format.
2. Interactive Interface: The dashboard should provide interactive charts, maps, and visuals for
better analysis and decision-making.
3. City-Based Search: Users should be able to search for any city or state and view relevant data
specific to that location.
4. Authentication System: There must be a secure login/signup feature to restrict unauthorized
access and personalize user sessions.
5. Multi-Device Compatibility: The system should be fully responsive and accessible across
desktops, tablets, and smartphones.
6. User-Friendly Navigation: The interface must be intuitive and easy to navigate, even for non-
technical users.
These requirements ensure the dashboard delivers a functional, secure, and valuable experience to its
users.

2.3 Final Requirements

The Smart City Dashboard is a responsive web application designed to provide real-time insights
into urban infrastructure, environment, and services. Below are the finalized requirements:

1. Functional Requirements
• User Authentication
Users must be able to register, log in, and log out securely to access dashboard features.
• City/State Search
Users can enter any city or state to fetch localized data such as traffic, pollution, and weather.
• Traffic Monitoring
The dashboard should display current traffic conditions, average speeds, and congestion levels
using charts and maps.
• Pollution Tracking
Air quality data (e.g., PM2.5, CO2, NO2, O3) should be shown clearly with health indicators and
color-coded alerts.
• Weather Information
Current weather conditions, 5-day forecast, humidity, wind, and temperature should be shown
pg. - 23 -
 with visual icons.
• Energy Consumption
The system should visualize current, average, and peak energy usage, including renewable vs
non-renewable breakdowns.
• Waste Management
Daily waste collection statistics and recycling rates should be displayed, including waste
composition.
• Public Transport Info
Users can input start and end points to get routes and transport service updates with map support.
• Disaster Alerts
Natural disaster warnings like floods or earthquakes should be integrated where available.

2. Non-Functional Requirements
• Responsiveness
The dashboard must work seamlessly on mobile, tablet, and desktop devices.
• Performance
Data loading and visualizations should be optimized for fast rendering and smooth interaction.
• Security
User data should be protected through secure authentication and storage methods.
• Scalability
The system must support integration of future data modules like crime monitoring, public Wi-Fi,
etc.
• Usability
The interface should be intuitive with consistent navigation, tooltips, and visual aids.
• Maintainability
The codebase should be modular and well-documented to allow for future enhancements and bug
fixes.

pg. - 24 -
 Chapter 3

SYSTEM DESIGN

3.1Software requirements

PLATFORM PLATFORM INDEPENDENT

OPERATING SYSTEM WINDOWS 7

FRAMEWORK BOOTSTRAP

FRONT-END HTML

CSS3

JAVASCRIPT

Chart.js/Leaflet.js

BACK-END Node.js

Express.js

API OPENWEATHERMAP

WAQI API

OPENSTREETMAP API

Google Maps API

DATABASE MongoDB

pg. - 25 -
3.1 Hardware Requirements

PROCESSOR INTEL PENTIUM 2.9GHz Other

RAM MINIMUM 4GB

GRAPHICS INTEGRATED GRAPHICS CARD

HARD DISK MINIMUM 500GB

3.1 System Requirements

To know the detailed system requirements an SRS has to be prepared. Software requirement
specification abbreviated as SRS is a means of translating the idea of files into a formal document.
The main features of SRS include:

• Establishing the basis for an agreement between the client and the developer.

• Producing a reference for validation of the final product. SRS assist clients in determining if the
software meets their requirements.

pg. - 26 -
 Mainly there are six requirements which an SRS must satisfy.

(a) It should specify the external behaviour.

(b) It should specify the constraints.

(c) It should be easy to change.

(d) It should be a reference tool.

(e) It should record throughout the lifecycle.

(f) It should have the capacity to expect an undesired event.

3.2Functional Requirements

Functional requirements are the requirements that describe the functionalities of the system
elements. It may involve functional user requirements or functional system requirements.

For example:

Real-Time City Data Integration:

The system shall fetch and display real-time data for traffic, pollution, weather, energy consumption,
and public transport by interacting with APIs or simulated datasets.
City/State Search and Visualization:
Users shall be able to enter a city or state name in the search bar, upon which the dashboard will update
and display location-specific data, including graphs, charts, and maps.

3.3 Design Requirements

Objectives of Input and Output Design

1. Accuracy and Validation:
Ensure that user inputs, such as city or state names, are accurately captured and validated to
prevent errors in data retrieval and display.
2. User-Friendly Interface:
Design input fields (e.g., search bar) and output sections (e.g., graphs, maps, stats) to be intuitive
and easy to navigate for users of all technical levels.
3. Timely and Relevant Output:

pg. - 27 -
 Present real-time, location-specific data in a structured and visually engaging format, helping
users quickly understand conditions like traffic, weather, and pollution.
4. Consistency and Clarity:
Maintain consistent formatting for all inputs and outputs (e.g., units, labels, colors) to improve
readability, reduce confusion, and enhance overall user experience.

pg. - 28 -
 3.4 DATA FLOW DIAGRAM (DFD)

>Level 0 (Context Diagram)

Entities:
• User – interacts with the system via UI (search, login/signup).
• Smart City Dashboard System – core processing unit.
Data Flows:
• Search Requests, Login Data → System
• Dashboard Data (Traffic, Energy, Weather, etc.) → User

>Level 1 DFD Processes:

1. Authenticate User
2. Search City Data
3. Fetch Traffic Info
4. Fetch Energy Stats
5. Fetch Weather & Forecast
6. Fetch Pollution Levels
7. Fetch Waste Management Data
8. Fetch Transport Info
9. Display Dashboard Widgets

pg. - 29 -
Data Stores:
• User Data Store – login/signup info
• City Data Store – preloaded or fetched city metadata
• Cache Store – temporarily stores fetched API data
External Entities:
• User
• External APIs – for traffic, pollution, weather, etc.

pg. - 30 -
 3.5 ER Model:

An Entity-Relationship Diagram (ERD) for a Smart-City Dashboard is the entities and their
relationships within the system.

Entities:

1) User
• user_id (Primary Key)
• username
• email
• password
• dob
2. City
• city_id (Primary Key)
• name
• latitude
• longitude
3. TrafficData
pg. - 31 -
 • traffic_id (Primary Key)
• city_id (Foreign Key → City)
• current_speed
• free_flow_speed
• congestion_level
• timestamp
4. EnergyData
• energy_id (Primary Key)
• city_id (Foreign Key → City)
• current
• peak
• average
• renewable_percent
• timestamp
5. PollutionData
• pollution_id (Primary Key)
• city_id (Foreign Key → City)
• pm25
• co
• no2
• o3
• timestamp
6. WeatherData
• weather_id (Primary Key)
• city_id (Foreign Key → City)
• temperature
• humidity
• pressure
• wind
pg. - 32 -
 • sunrise
• sunset
• timestamp
7. WasteData
• waste_id (Primary Key)
• city_id (Foreign Key → City)
• daily_waste
• recycling_rate
• timestamp
8. TransportData
• transport_id (Primary Key)
• city_id (Foreign Key → City)
• routes
• service_updates
• timestamp
Relation:

All domain data entities (Traffic, Energy, Weather, etc.) are related to the City via a many-to-one
relationship:
Relationship Type Description
City — TrafficData One-to-Many A city has many traffic data records
City — EnergyData One-to-Many A city has many energy usage records
City — PollutionData One-to-Many A city has many pollution readings
City — WeatherData One-to-Many A city has many weather updates
City — WasteData One-to-Many A city has many waste reports
City — TransportData One-to-Many A city has many transport summaries

pg. - 33 -
 Chapter 4

IMPLEMENTATION AND CODING

pg. - 34 -
pg. - 35 -
pg. - 36 -
4.1 OPERATING SYSTEM

Platform Independent: Since the project is done completely in HTML, CSS and JavaScript, it also
executes the main properties of the language. The application is platform-independent.

4.2 Languages used

HTML

The HyperText Markup Language or HTML is the standard markup language for documents
designed to be displayed in a web browser. It can be assisted by technologies such as Cascading
Style Sheets (CSS) and scripting languages such as JavaScript. Web browsers receive HTML
documents from a web server or from local storage and render the documents into multimedia web
pages. HTML describes the structure of a web page semantically and originally included cues for
the appearance of the document.

<section id="traffic" class="dashboard-section">

<h2><i class="fas fa-car-side"></i> Traffic Data</h2>
<div class="toggle-buttons">
<button id="showGraphBtn" class="btn btn-primary btn-sm">Graph</button>
<button id="showMapBtn" class="btn btn-outline-primary btn-sm">Map</button>
</div>
<div id="traffic-graph">
<canvas id="trafficChart"></canvas>
</div>
<div id="traffic-map" style="display: none;">
<h3>Traffic Map</h3>
<div id="leaflet-map" style="height: 240px;"></div>
</div>
</section>

pg. - 37 -
CSS

CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe the
look and formatting of a document written in markup language. It provides an additional feature
to HTML. It is generally used with HTML to change the style of web pages and user interfaces. It
can also be used with any kind of XML documents including plain XML, SVG and XUL. CSS is
used along with HTML and JavaScript in most websites to create user interfaces for web
applications and user interfaces for many mobile applications.

.dashboard-section {
background-color: rgba(255, 255, 255, 0.85);
padding: 25px;
border-radius: 15px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}

.dashboard-section:hover {
transform: translateY(-5px);
}

.toggle-buttons .btn-primary {
background: linear-gradient(90deg, #223a5e, #0984e3, #00b894);
color: white;
border: none;
border-radius: 16px;
}

pg. - 38 -
 JavaScript

JavaScript is a dynamic computer programming language. It is lightweight and most commonly

used as a part of web pages, whose implementations allow client-side script to interact with the
user and make dynamic pages. It is an interpreted programming language with object-oriented
capabilities. JavaScript was first known as LiveScript, but Netscape changed its name to
JavaScript, possibly because of the excitement being generated by Java. JavaScript made its first
appearance in Netscape 2.0 in 1995 with the name LiveScript. The general-purpose core of the
language has been embedded in Netscape, Internet Explorer, and other web browsers.

const showGraphBtn = document.getElementById('showGraphBtn');

const showMapBtn = document.getElementById('showMapBtn');
const trafficGraph = document.getElementById('traffic-graph');
const trafficMap = document.getElementById('traffic-map');

showGraphBtn.addEventListener('click', () => {
trafficGraph.style.display = '';
trafficMap.style.display = 'none';
});

showMapBtn.addEventListener('click', () => {
trafficGraph.style.display = 'none';
trafficMap.style.display = '';
if (window.leafletMap) {
setTimeout(() => window.leafletMap.invalidateSize(), 200);
}
});

pg. - 39 -
Backend

const express = require('express');

const fetch = require('node-fetch');
const cors = require('cors');
const rateLimit = require('express-rate-limit');
const weatherRoutes = require('./weather');
const wasteRoutes = require('./waste');
const transportRoutes = require('./transport');
const mongoose = require('mongoose');

const app = express();

const PORT = 3002;

// Error handling middleware

app.use((err, req, res, next) => {
console.error('Error:', err);
res.status(500).json({ error: err.message });
});

// Rate limiting to prevent abuse

const limiter = rateLimit({
windowMs: 15 * 60 * 1000, // 15 minutes
max: 1000 // or a higher number for dev
});

app.use(cors());
app.use(limiter);
app.use(express.json());

pg. - 40 -
const TOMTOM_API_KEY = 'csbBP06GHADBVaExogDMbv9XW9PbE8l4';
const AIRVISUAL_API_KEY = '8f125439-1c27-4de9-9a7b-34e2a30e3f02';

// Ambee Natural Disaster Alerts Proxy

const AMBEE_API_KEY =
'2c78ab6646b63ac2e6069a3e71bc7f8f69bd00840e2840d6be72d03f77801a1f'; // <-- Replace with your
real key

// Add routes
app.use('/api/weather', weatherRoutes);
app.use('/api/waste', wasteRoutes);
app.use('/api/transport', transportRoutes);

pg. - 41 -
 4.3 Error Handling:

Error handling in a Smart-city Dashboard is crucial for ensuring a smooth user experience,
maintaining reliability, and addressing potential issues effectively. Below are detailed strategies
and best practices for error handling in such an application:
1. Try-Catch Blocks (Async/Await)
Used to catch network or parsing errors during data fetches.

async function getCityCoordinates(cityName) {

try {
const response = await
fetch(`http://localhost:3002/api/geocode?city=${encodeURIComponent(cityName)}`);
const data = await response.json();
if (data && data.length > 0) {
return { lat: data[0].lat, lon: data[0].lon };
}
return null;
} catch (error) {
console.error('Error getting coordinates:', error);
return null;
} }

Fallback Data on Failure

When fetching traffic data fails, it simulates fallback data:

catch (error) {
console.error('Error loading traffic data:', error);
alert('Failed to load traffic data. Using simulated data.');

pg. - 42 -
const simulatedData = {
currentSpeed: 30,
freeFlowSpeed: 50,
travelTime: 300,
freeFlowTravelTime: 240,
timeSeries: [...generate dummy time series...]
};

window.latestTrafficData = simulatedData;
updateTrafficChartTimeSeries(simulatedData, cityName);

pg. - 43 -
 User-Friendly Messages:

o Avoid technical jargon. Instead of "HTTP 500 Error," show: “We’re having
trouble fetching weather data. Please try again later.”

2. Invalid User Inputs

• Location Search:

o Validate user input for location (e.g., check for empty fields, invalid characters,
or unsupported formats).

o Provide suggestions or autocomplete for city names.

o Error message: “Please enter a valid city name or postal code.”

• Unit Preferences:

o Validate input for temperature units (e.g., Celsius vs. Fahrenheit) and notify users
if unsupported units are entered.
3. API Error Check

When the API response contains an error field:

if (data.error) {
console.error('Traffic API Error:', data.error);
if (data.fallback) {
console.log('Using fallback traffic data');
updateTrafficChartTimeSeries(data.fallback, cityName);
return;
}
throw new Error(data.error);

pg. - 44 -
 Chapter 5

TESTING & TEST RESULTS

5.1 SOFTWARE TESTING

Software testing is a critical element of software quality assurance and represents the ultimate
review of specification design and coding. Testing is an exposure of a system to trial input to see
whether the software meets the correct output. Testing cannot be determined whether the
software meets the user’s needs, only whether it appears to conform to requirements. Testing can
show that a system is free of errors, only that it contains errors. Testing finds errors, it does not
correct errors. Software success is a quality product, on time and within cost. Testing can reveal
critical mistakes. Testing should, therefore, Validate Performance Detects Errors Identify
Inconsistencies.

5.2 Test Objective

• There is strong evidence that effective requirement management leads to overall project cost
savings. The three primary reasons for this are,

• Requirement errors typically cost well over 10 times more to repair than other errors.

• Requirement errors typically comprise over 40% of all errors in a software project.
• A small reduction in the number of requirement errors pays a big dividend in avoided
rework costs and schedule delays.

pg. - 45 -
 • Systems are not designed as entire systems nor are they tested as single systems the analyst
must perform both unit and system testing. For this different level of testing are used:

5.2.1 Unit Testing

Frontend (JavaScript):
• Use frameworks like Jest or Mocha to test:
• Data parsing functions
• Chart update logic
• Toggle button behaviors
Example Test (Jest):

test('calculates congestion level correctly', () => {

const current = 30, freeFlow = 60;
const congestion = Math.round((1 - current / freeFlow) * 100);
expect(congestion).toBe(50);
});
5.2.2 Integration Testing

• Ensure proper interaction between modules:

o City search → coordinate lookup → fetch → update UI
o Button click → chart/map toggle → correct display

Tools: Cypress, Playwright, Selenium

Scenario Example:

• Enter "Delhi" in search → check if traffic chart updates correctly with fetched data.

5.2.3 Authentication Testing

Backend API (Login/Signup):
Test valid and invalid logins
Test empty fields, invalid passwords, and SQL/noSQL injections
Test session handling (localStorage in JS)
Manual or Automated tests with Postman / Supertest (Node.js)

pg. - 46 -
 5.2.4 API Testing

Test endpoints such as:

GET /api/traffic?lat=...&lon=...

POST /api/auth/login

POST /api/auth/signup

• Correct status codes (200, 401, 404)

• Valid response structure (JSON)

Tools: Postman, Insomnia, Swagger

5.2.5 UI/UX Testing

• Responsive design check across devices
• Cross-browser compatibility (Chrome, Firefox, Edge)
• Button and navigation click behavior
• Modal visibility and closure

pg. - 47 -
5.2.6 Error Handling Testing
Simulate:
• No internet → fallback data displayed
• API returns error → appropriate alert and logging
• Invalid city name → user alerted, UI doesn’t break
–

pg. - 48 -
 Chapter 6

CONCLUSION

6.1 CONCLUSION

The Smart City Dashboard project successfully demonstrates how modern web technologies can be
harnessed to visualize and manage real-time data for urban environments. By integrating multiple data
streams—such as traffic conditions, energy usage, weather updates, pollution levels, and public transport
information—the system provides a centralized and intuitive interface for monitoring city health and
efficiency.
Key achievements include:
• A responsive and visually engaging interface using HTML, CSS, and JavaScript.
• Real-time data visualization with Chart.js and Leaflet.js for maps.
• Backend support using Node.js and Express, enabling robust API integration and user
authentication.
• Effective error handling, fallback mechanisms, and simulated data to ensure system reliability.
• A modular, scalable design that supports future enhancements like IoT integration, user
personalization, and predictive analytics.
The dashboard not only aids city administrators in decision-making but also empowers citizens with
transparent access to vital civic data. This project reflects a practical application of smart city concepts
and sets the foundation for more advanced urban intelligence systems in the future.

6.2 FUTURE SCOPE

The Smart City Dashboard offers a strong foundation for real-time urban monitoring, and several
enhancements can be implemented to extend its capabilities:

1. Real-Time IoT Integration

• Connect directly with IoT sensors for live traffic, air quality, and energy consumption data.
• Enable smart waste bins and energy meters to push real-time statistics to the dashboard.

2. Predictive Analytics
• Use machine learning to forecast traffic congestion, pollution spikes, or energy demand.
• Provide early alerts and recommendations for city planners or emergency services.

pg. - 49 -
3. GIS and Heatmaps
• Incorporate geospatial analysis to show pollution, traffic, or crime intensity on heatmaps.
• Enable layer toggling for multiple datasets over city maps.

4. User Personalization
• Allow citizens to log in and customize their dashboard with favorite cities or alerts.
• Enable data subscriptions (e.g., daily weather + pollution notifications).

5. Mobile App Development

• Develop a native mobile app version for Android/iOS using frameworks like React Native or
Flutter.
• Include offline viewing and push notifications.

6. Enhanced Security & Admin Tools

• Add role-based access for city administrators.
• Log user actions and implement secure audit trails.

7. Multi-City & Global Scaling

• Expand the system to support multiple countries or global city datasets.
• Provide a comparison mode between cities based on metrics.

This future scope outlines a clear roadmap for turning the dashboard into a full-scale smart governance
platform, aligning with the vision of sustainable and intelligent urban development.

pg. - 50 -
:

BIBLOGRAPHY
• OpenStreetMap / Nominatim API
For geocoding city names into latitude and longitude.
https://nominatim.openstreetmap.org/
• OpenWeatherMap API (or similar)
Used to fetch current weather and forecast data.
https://openweathermap.org/
• WAQI (World Air Quality Index) API
Source of real-time pollution metrics (PM2.5, CO, NO2, O3).
https://aqicn.org/api/
• Leaflet.js
JavaScript library for interactive maps.
https://leafletjs.com/
• Chart.js
Library for responsive data visualizations (line, bar, pie charts).
https://www.chartjs.org/
• Font Awesome
Icon toolkit used for UI navigation and section headers.
https://fontawesome.com/
• Google Fonts (Poppins, Playfair Display)
Used to enhance the visual appeal of typography.
https://fonts.google.com/
• Node.js and Express.js
Backend platform and framework for building REST APIs and handling requests.
https://nodejs.org/
https://expressjs.com/
• MDN Web Docs
Reference for JavaScript, HTML, and CSS standards.
https://developer.mozilla.org/
• W3Schools Tutorials
Used for reference in frontend development and CSS styling.
https://www.w3schools.com/

pg. - 51 -