FireGuard
AI-Based Fire Detection System
By
Muhammad Hanzla
2024-GCUF-120637
Ali Ahad
2024-GCUF-120631
ASSOCIATE DEGREE PROGRAM IN
INFORMATION TECHNOLOGY
DEPARTMENT OF INFORMATION TECHNOLOGY
Government College University Faisalabad
2026
1
FireGuard
AI-Based Fire Detection System
BY
Muhammad Hanzla
2024-GCUF-120637
Ali Ahad
2024-GCUF-120631
Project submitted in fulfillment of the requirement for the degree of
ASSOCIATE DEGREE PROGRAM
IN
INFORMATION TECHNOLOGY
DEPARTMENT OF INFORMATION TECHNOLOGY
GOVERNMENT COLLEGE UNIVERSITY FAISALABAD
2
DECLARATION
We hereby declare that this project, neither as a whole nor as a part, has been copied out
from any source. We have developed this project and the accompanied report entirely on
the basis of our personal efforts made under the sincere guidance of our supervisor. If any
part of this project is proved to be copied out from any source, we will stand by all the
consequences. No portion of the work presented in this document has been submitted in
support of any application for any other degree of this or any other university or institute of
learning.
Signature of the Student
Name: MUHAMMAD HANZLA
Registration No: 2024-GCUF-120637
Department: Information Technology
Signature of the Student
Name: ALI AHAD
Registration No: 2024-GCUF-120631
Department: Information Technology
3
PROJECT COMPLETION REPORT
Title of the project: FireGuard – AI-Based Fire Detection System
Project ID: ___________________
Student Name: Muhammad Hanzla
Student Name: Ali Ahad
Session: 2024-2026
Program: Associate Degree Program in Information Technology
It is to certify that the title and proposal submitted by the students are clear and according
to the project scope.
It is further certifying that the project of the students may kindly be processed for external
examiner / viva voce.
Project Coordinator
Signature: ___________________
Chairman
Department of Information Technology
Government College University Faisalabad
4
CERTIFICATE BY THE PROJECT SUPERVISOR
This is to certify that the final year project of ADP(IT) "FIREGUARD – AI-BASED FIRE
DETECTION SYSTEM" was developed by "Muhammad Hanzla” and "Ali Ahad",
supervised by "
" and that in his/her opinion it is fully adequate for the
degree of Associate Degree Program in Information Technology.
Internal Examiner
External Examiner
Name: _______________
Name: _______________
Signature: _______________
Signature: _______________
Chairman:
Department of Information Technology
Government College University Faisalabad
5
ACKNOWLEDGMENT
We would like to express our deepest gratitude to our project supervisor
for his/her invaluable guidance, continuous support, and encouragement
throughout the duration of this project. His/her expert advice and constructive feedback
were instrumental in shaping the direction and quality of this work.
We extend our sincere thanks to the Head and faculty members of the Department of
Information Technology at Government College University Faisalabad for providing us with
the resources, knowledge, and academic environment necessary to undertake this project.
We would also like to acknowledge the developers and communities behind React.js,
Firebase, and Roboflow for their powerful platforms and well-documented APIs that made
the development of FireGuard possible.
Finally, we are deeply grateful to our families and friends whose unwavering support,
patience, and prayers kept us motivated throughout this challenging yet rewarding journey.
6
DEDICATION
We dedicate this project to Allah Almighty, our creator, our strong pillar, and our source
of inspiration, wisdom, knowledge and understanding. He has been the source of our
strength throughout this entire program. Without His blessings, the completion of this work
would not have been possible.
We also dedicate this work to our families, especially our beloved fathers and mothers,
whose endless prayers, sacrifices, and motivation encouraged us at every step of the way.
Their encouragement has ensured that we give our very best to finish what we started.
This project is further dedicated to our teachers and mentors at Government College
University Faisalabad who equipped us with the knowledge and skills required to bring this
project to life.
May Allah bless you all with good health, happiness, and success. Ameen.
7
Table of Contents
CHAPTER-1: INTRODUCTION TO THE PROBLEM ........................... 1
1.1 Introduction ............................................. 2
1.2 Background ............................................... 3
1.3 Purpose of Document ...................................... 4
1.4 Project Scope ............................................ 4
1.5 Objectives ............................................... 5
1.6 Intended Audience ........................................ 5
1.7 Document Convention ...................................... 6
CHAPTER-2: SOFTWARE REQUIREMENT AND SPECIFICATION ................ 7
2.1 Overall Description ...................................... 8
2.1.1 Product Perspectives ................................... 8
2.1.2 Product Features ....................................... 9
2.1.3 Design and Implementation Constraints .................. 11
2.1.4 Assumptions and Dependencies ........................... 12
2.2 System Features .......................................... 13
2.2.1 User Authentication .................................... 13
2.2.2 Real-Time Fire Detection ............................... 15
2.2.3 Real-Time Alarm System ................................. 17
2.2.4 Alert History Dashboard ................................ 19
2.2.5 Browser Notification System ............................ 21
2.2.6 User Profile Management ................................ 22
2.2.7 Logout ................................................. 23
2.3 External Interface Requirements .......................... 24
2.4 Other Nonfunctional Requirements ......................... 26
CHAPTER-3: ANALYSIS (USE CASE MODEL) ............................. 29
3.1 Identifying Actors and Use Cases ......................... 30
3.2 Use Case Diagrams ........................................ 31
3.3 Detailed Use Case Descriptions ........................... 33
CHAPTER-4: DESIGN ................................................ 36
4.1 Architecture Diagram ..................................... 37
4.2 Entity Relational Diagram (ERD) .......................... 39
4.3 Data Flow Diagram ........................................ 41
4.4 Class Diagram ............................................ 42
8
4.5 Object Diagram ........................................... 44
4.6 Sequence Diagram ......................................... 45
4.7 Activity Diagram ......................................... 47
4.8 Collaboration Diagram .................................... 48
4.9 State Transition Diagram ................................. 49
CHAPTER-5: IMPLEMENTATION ........................................ 50
5.1 Implementation Phases .................................... 51
5.2 Component Diagram ........................................ 53
5.3 Deployment Diagram ....................................... 54
5.4 Database Architecture .................................... 55
5.5 WBS Project Management ................................... 57
CHAPTER-6: TESTING (SOFTWARE QUALITY ATTRIBUTES) ................. 59
6.1 Black Box Test Cases ..................................... 60
6.2 White Box Testing ........................................ 62
6.3 Unit Testing ............................................. 64
6.4 Functional Testing ....................................... 66
6.5 Compatibility Testing .................................... 68
6.6 Performance Testing ...................................... 69
6.7 Security Testing ......................................... 70
CHAPTER-7: TOOLS AND TECHNOLOGIES ................................ 71
7.1 Programming Languages .................................... 72
7.2 Frameworks and Libraries ................................. 73
7.3 APIs and Services ........................................ 74
7.4 Development Tools ........................................ 76
7.5 Operating Environment .................................... 77
APPENDIX A: Glossary ............................................. 78
APPENDIX B: User Documentation ................................... 80
APPENDIX C: Source Code .......................................... 83
9
CHAPTER-1
INTRODUCTION TO THE PROBLEM
10
1.1 INTRODUCTION
Fire is one of the most catastrophic and life-threatening disasters that humanity faces on a
daily basis. Every year, thousands of lives are lost and billions of rupees worth of property
is destroyed due to fire incidents that were either detected too late or not detected at all. In
industrial settings, residential buildings, educational institutions, and commercial spaces,
fire can spread with alarming speed, leaving very little time for evacuation or emergency
response.
Traditional fire detection systems, such as smoke detectors and heat sensors, have
served us well for decades. However, these systems come with significant limitations.
They rely on physical proximity to smoke or heat sources, meaning that the fire must have
already grown to a considerable size before an alarm is triggered. Furthermore, these
sensors are prone to false alarms triggered by cooking smoke, steam, or dust, leading to
alarm fatigue where people begin to ignore alerts.
FireGuard is an innovative AI-based real-time fire detection web application that
addresses these limitations by using computer vision and artificial intelligence to detect fire
visually at an early stage. The system uses a live webcam feed to continuously capture
frames from the environment and sends them to the Roboflow Vision API for fire
detection inference. The Roboflow model, trained on thousands of fire and smoke images,
can identify the presence of fire with high accuracy and return detection results in real
time.
When fire is detected, FireGuard immediately triggers an alarm sound in the browser and
sends a browser-based push notification to alert the user. The detection event is
simultaneously saved to Firebase Firestore with a timestamp and confidence score,
creating a permanent log of all fire detection events. The system also updates the
Firebase Realtime Database with the current status — either FIRE or SAFE.
The frontend of FireGuard is built using React.js with Vite as the build tool, providing a
fast, responsive, and modern user interface. User authentication is handled by Firebase
Authentication, supporting both email/password login and Google Sign-In via OAuth 2.0.
The application is deployed on Vercel and the source code is maintained on GitHub.
1.2 Background
The idea for FireGuard arose from the growing need for intelligent, software-based
surveillance systems that can operate continuously without human intervention and
without the need for expensive hardware installations. In Pakistan and many developing
countries, fire safety infrastructure is often inadequate. Many buildings lack proper fire
detection systems, and even where systems exist, they are often outdated or poorly
maintained.
11
With the rapid advancement of artificial intelligence, computer vision, and cloud
computing, it has become feasible to develop powerful fire detection systems using
nothing more than a standard webcam and an internet connection. Roboflow provides a
platform for training, deploying, and calling custom machine learning models via a simple
REST API. This makes it accessible for web developers to integrate state-of-the-art fire
detection capabilities into their applications without requiring deep expertise in machine
learning.
Firebase, Google's Backend-as-a-Service platform, provides a complete suite of backend
services including authentication, real-time database, cloud Firestore, and storage. By
combining React.js for the frontend, Roboflow for AI inference, and Firebase for backend
services, FireGuard delivers a complete, production-ready fire detection solution
accessible from any device with a modern web browser.
The project was developed as a Final Year Project for the Associate Degree Program in
Information Technology at Government College University Faisalabad. The development
team consisted of two members: Muhammad Hanzla, who was responsible for all frontend
development including UI design, component architecture, webcam integration, and
Roboflow API integration, and Ali Ahad, who was responsible for Firebase integration
including authentication setup, Firestore database design, Realtime Database
configuration, and security rules.
1.3 Purpose of Document
This document serves as the complete Software Requirements Specification (SRS) and
design documentation for the FireGuard system. The purpose of this document is to
provide a comprehensive and detailed description of the system, covering all aspects from
requirements gathering to implementation and testing.
The document is intended to serve multiple purposes. For academic evaluators and
supervisors, it provides a thorough understanding of the project scope, objectives, design
decisions, and technical implementation. For future developers who may wish to extend or
maintain the system, it provides detailed technical specifications, architecture diagrams,
and database schemas. For testers, it provides a complete set of functional and
non-functional requirements against which the system can be validated.
This document follows the standard Software Requirements Specification format as taught
in the Software Engineering curriculum at GCUF. All requirements are labeled with REQ
prefix for traceability. Diagrams include use case diagrams, entity relationship diagrams,
class diagrams, sequence diagrams, activity diagrams, and state transition diagrams.
1.4 Project Scope
FireGuard is a web-based AI fire detection application. The system operates entirely within
a web browser and requires no additional hardware beyond a standard webcam. The
12
scope of the FireGuard system encompasses the following major functional areas:
• User Authentication: Complete user registration and login system using Firebase
Authentication with support for email/password credentials and Google Sign-In via
OAuth 2.0.
• Real-Time Fire Detection: Continuous webcam monitoring with automatic frame
capture at regular intervals. Captured frames are sent to the Roboflow Vision API for
fire detection inference.
• Alarm System: Immediate audio alarm triggered in the browser upon fire detection,
with a visual alert displayed prominently on the screen.
• Browser Notification System: Push notifications sent to the user's browser when fire
is detected, even if the application tab is not in focus.
• Firebase Realtime Database Integration: Current detection status (FIRE or SAFE) is
updated in real-time to Firebase Realtime Database.
• Alert History Management: All fire detection events are stored in Firebase Firestore
with timestamps and confidence scores, providing a complete historical log.
• Dashboard: A centralized dashboard displaying detection statistics, recent alert
history, and system status overview.
• User Profile Management: Users can view and manage their profile information
stored in Firebase.
Figure # 1.4.1: FireGuard Project Scope
Module
Description
User Authentication
Firebase Auth — Email/Password + Google Sign-In
Fire Detection
Roboflow Vision API — Real-time webcam frame analysis
Alarm System
HTML5 Audio + Browser Notification API
Alert Storage
Firebase Firestore — Persistent alert history
Real-Time Status
Firebase Realtime Database — FIRE/SAFE status
Dashboard
React.js — Statistics and alert history display
Profile
Firebase Auth — User profile information
Deployment
Vercel + GitHub
1.5 Objectives
The primary and secondary objectives of the FireGuard system are listed below:
13
• To develop a real-time AI-based fire detection system that uses live webcam feed
and Roboflow Vision API for accurate fire identification.
• To trigger an immediate audio and visual alarm upon fire detection to alert users as
quickly as possible.
• To send browser-based push notifications to the user when fire is detected,
ensuring alerts are received even when the browser tab is minimized.
• To update Firebase Realtime Database with the current fire detection status in real
time.
• To store all fire detection events permanently in Firebase Firestore with timestamps
and confidence scores.
• To provide a user-friendly dashboard that displays detection history, statistics, and
system status.
• To implement secure user authentication using Firebase Authentication, supporting
email/password and Google Sign-In.
• To deploy a fully functional, accessible web application that works on any modern
browser without requiring software installation.
• To follow clean code practices with modular React.js component architecture for
maintainability and extensibility.
1.6 Intended Audience and Reading Suggestion
This document is intended for the following audience:
• Academic Supervisors and Evaluators: Faculty members and external examiners
evaluating the FireGuard project as part of the ADP IT program at GCUF. They
should read all chapters to get a complete understanding of the system.
• Development Team: Muhammad Hanzla and Ali Ahad, the developers of FireGuard.
This document serves as a reference guide throughout the development process.
• Future Developers: Developers who may wish to extend, maintain, or improve
FireGuard. They should focus on Chapters 4, 5, and 7 for technical details.
• Testers: QA engineers responsible for verifying that the system meets all specified
requirements. They should focus on Chapter 6.
Readers are advised to follow the document sequentially for the best understanding. The
Introduction provides context and background. Chapter 2 covers detailed requirements.
Chapters 3 and 4 cover analysis and design. Chapter 5 covers implementation. Chapter 6
covers testing. Chapter 7 covers tools and technologies.
1.7 Document Convention
This document follows standard SRS formatting conventions adopted by the Department
of Information Technology at GCUF. The following conventions apply throughout this
document:
14
Term/Abbreviation
Definition
FireGuard
The AI-based fire detection web application described in this document
API
Application Programming Interface
UI
User Interface
DB
Database
React.js
JavaScript library for building user interfaces (Meta/Facebook)
Vite
Next-generation frontend build tool for React.js
Firebase
Google's Backend-as-a-Service platform
Firestore
Firebase's NoSQL cloud document database
RTDB
Firebase Realtime Database
Roboflow
AI model training and deployment platform used for fire detection
WebRTC
Web Real-Time Communication — browser API for webcam access
OAuth 2.0
Authorization protocol used for Google Sign-In
ADP
Associate Degree Program
GCUF
Government College University Faisalabad
REQ
Prefix used for labeling functional requirements
SRS
Software Requirements Specification
NVM
Node Version Manager
15
CHAPTER-2
SOFTWARE REQUIREMENT AND SPECIFICATION
16
2.1 Overall Description
2.1.1 Product Perspectives
FireGuard is a standalone web-based application that integrates three major external
services to deliver a complete AI-powered fire detection solution. The product operates
entirely within a standard web browser, making it platform-independent and requiring no
additional hardware installation beyond a webcam.
The system is composed of four primary layers. The Presentation Layer consists of the
React.js frontend application, which is responsible for rendering the user interface,
handling user interactions, displaying the webcam feed, showing detection results, and
managing navigation. The Authentication Layer is powered by Firebase Authentication,
which manages user identities, sessions, and access control. The AI Inference Layer is
provided by the Roboflow Vision API, which receives base64-encoded images from the
frontend and returns fire detection results in JSON format. The Data Layer consists of
Firebase Firestore for storing alert history and user data, and Firebase Realtime Database
for maintaining the current detection status.
The React.js frontend communicates with Firebase services using the official Firebase
JavaScript SDK (version 9.x). Webcam access is handled through the react-webcam
library, which provides a React component wrapping the browser's WebRTC
getUserMedia API. Communication with the Roboflow API is done via standard HTTP
POST requests with the image data encoded as base64 in the request body.
Figure # 2.1.1.1: Product Architecture Overview
Layer
Component
Technology
Purpose
Presentation
React.js App
React.js 18 + Vite
User interface, webcam feed,
detection display
Authentication Firebase Auth
Firebase SDK 9.x
User login, registration,
session management
AI Inference
Fire Detector
Roboflow Vision API v1
Fire detection on captured
webcam frames
Data Storage
Alert History
Firebase Firestore
Store fire detection alerts
with timestamps
Real-Time
Status Monitor
Firebase Realtime DB
Real-time FIRE/SAFE status updates
Deployment
Static Host
Vercel CDN
Serve the React.js build globally
Dev & CI/CD
Code Repository
GitHub
Source code management and
collaboration
2.1.2 Product Features
The complete list of features provided by the FireGuard web application is as follows:
17
• User Registration and Login: New users can create an account using their email
address and a password. Existing users can log in with their registered credentials.
Both registration and login are handled securely by Firebase Authentication. The
system also supports one-click Google Sign-In using OAuth 2.0.
• Live Webcam Feed Display: The application uses the react-webcam library to
access the user's webcam through the browser's WebRTC API. The live video feed is
displayed prominently on the Webcam Detection page, giving the user a clear view of
what is being monitored.
• Automatic Image Capture at Regular Intervals: Once fire detection is started, the
system automatically captures a still image from the webcam feed at regular intervals
(every 8 seconds). This continuous monitoring ensures that any fire that appears in
the camera's field of view is detected promptly.
• AI Fire Detection via Roboflow Vision API: Each captured image is encoded in
base64 format and sent to the Roboflow Vision API endpoint via an HTTP POST
request. The Roboflow model analyzes the image and returns a JSON response
containing detection predictions, confidence scores, and bounding box coordinates.
• Real-Time Audio Alarm: When the Roboflow API returns a positive fire detection
result, the system immediately plays an alert sound in the browser to notify the user
of the danger.
• Browser Push Notification: In addition to the audio alarm, the system sends a
browser-based push notification with a fire alert message, ensuring the user is
notified even if the FireGuard application tab is not currently in focus.
• Firebase Realtime Database Status Update: Upon fire detection, the system
updates the Firebase Realtime Database with the current status field set to 'fire'.
When no fire is detected, the status is set to 'safe'.
• Alert History Storage in Firestore: Every fire detection event is saved as a
document in Firebase Firestore, containing the user's ID, the timestamp of detection,
the confidence score from Roboflow, and the alert status.
• Alert History Dashboard: The dashboard page retrieves and displays all past fire
detection alerts from Firestore in a tabular format, showing the date, time, and
confidence score for each event.
• User Profile Management: Authenticated users can view their profile information,
including their display name and email address, which are stored in Firebase.
2.1.3 Design and Implementation Constraints
The following design and implementation constraints apply to the FireGuard system:
• Internet Connectivity Requirement: FireGuard requires a stable internet
connection at all times during active monitoring. The system depends on the
Roboflow Vision API for fire detection inference and Firebase for data storage and
authentication.
• Webcam Availability and Permission: The system requires a functional webcam
connected to the user's device. The user must grant webcam access permission in
18
the browser for the system to work.
• Roboflow API Rate Limits: The Roboflow Vision API enforces rate limits based on
the subscription plan. The free tier allows a limited number of API calls per month.
• Firebase Free Tier Limits: Firebase Firestore and Realtime Database on the Spark
(free) plan have daily limits on read and write operations.
• Browser Compatibility: The system requires a modern web browser that supports
WebRTC, the Web Notifications API, and ES6+ JavaScript. Internet Explorer is not
supported.
• API Key Security: The Roboflow API key must be stored in environment variables
and must not be exposed in the client-side code bundle. Vite's environment variable
system is used for this purpose.
Figure # 2.1.3.1: Design Constraints Summary
Constraint
Type
Impact
Mitigation
Internet required
Technical
Detection fails offline
Show offline warning message
Webcam permission
needed
Technical
No video feed without
permission
Clear permission request UI
Roboflow API rate limit Technical
Limited monthly detections Optimize frame capture interval
Firebase free tier limits Technical
Limited daily read/writes
Efficient Firestore queries
Browser compatibility
Technical
May not work on old
browsers
Test on Chrome, Firefox,
Edge
API key exposure risk
Security
Unauthorized API access
Use .env environment variables
2.1.4 Assumptions and Dependencies
The following assumptions have been made during the design and development of
FireGuard:
• Users have access to a modern web browser (Google Chrome 90+, Mozilla Firefox
88+, or Microsoft Edge 90+) that supports WebRTC and the Web Notifications API.
• Users have a functional webcam, either built into their device or connected via USB.
• Users have a stable broadband internet connection.
• The Roboflow Vision API service will remain accessible and operational throughout
the project period.
• Firebase services will remain operational and within the free tier usage limits.
• The Roboflow fire detection model has been pre-trained and is capable of detecting
fire with acceptable accuracy.
Figure # 2.1.4.1: External Dependencies
Dependency
Version
Source
Purpose
19
React.js
18.x
npm (react)
Frontend UI framework
Vite
5.x
npm (vite)
Build tool and dev server
Firebase SDK
9.x
npm (firebase)
Auth, Firestore, Realtime DB
react-webcam
7.x
npm (react-webcam)
Webcam access in React
Roboflow Vision API
v1
api.roboflow.com
Fire detection AI inference
Firebase Auth
9.x
Firebase Console
User authentication
Firebase Firestore
9.x
Firebase Console
Alert history storage
Firebase Realtime
DB
9.x
Firebase Console
Real-time status updates
Vercel
Latest
vercel.com
Frontend deployment
GitHub
Latest
github.com
Source code hosting
2.2 System Features
The FireGuard system provides the following major system features. Each feature is
described with its priority level, stimulus/response sequences, and functional
requirements.
2.2.1 User Authentication
2.2.1.1 Description and Priority
The User Authentication feature provides registered users with the ability to create
accounts and securely log into the FireGuard system. Authentication is handled entirely by
Firebase Authentication, which provides industry-standard security including password
hashing, token-based sessions, and OAuth 2.0 for Google Sign-In.
Priority = 9 (High)
2.2.1.2 Stimulus/Response Sequences
Stimulus: A new user navigates to the Signup page.
Response: The signup form is displayed with fields for full name, email address, and
password.
Stimulus: User fills in all required fields and clicks the Register button.
Response: Firebase Authentication creates a new user account. User is automatically
logged in and redirected to the Dashboard.
Stimulus: An existing user navigates to the Login page.
Response: The login form is displayed with email/password fields and a Google
Sign-In button.
20
Stimulus: User enters valid credentials and clicks Login.
Response: Firebase validates credentials and returns an auth token. User is
redirected to the Dashboard.
Stimulus: User enters incorrect credentials.
Response: Firebase returns an error. An error message is displayed below the form.
Stimulus: User clicks the Google Sign-In button.
Response: Google OAuth popup opens. User selects their Google account. Firebase
creates or retrieves the user account. User is redirected to Dashboard.
Stimulus: An unauthenticated user tries to access a protected route (e.g.,
/dashboard).
Response: The ProtectedRoute component detects no authentication and redirects
the user to the Login page.
2.2.1.3 Functional Requirements
• REQ-1: The system shall provide a registration page with fields for full name, email
address, and password.
• REQ-2: The system shall validate that the email address is in a valid format before
submitting.
• REQ-3: The system shall enforce a minimum password length of 6 characters as
required by Firebase Authentication.
• REQ-4: The system shall use Firebase Authentication to create new user accounts
with email and password.
• REQ-5: The system shall provide a login page with email address and password
fields.
• REQ-6: The system shall authenticate existing users via Firebase Authentication.
• REQ-7: The system shall provide a Google Sign-In option using Firebase
Authentication with GoogleAuthProvider.
• REQ-8: The system shall display appropriate error messages for invalid credentials,
duplicate emails, or weak passwords.
• REQ-9: The system shall redirect authenticated users to the Dashboard after
successful login.
• REQ-10: The system shall protect all routes except Login and Signup using a
ProtectedRoute component.
• REQ-11: The system shall persist user authentication state across browser
sessions using Firebase's session persistence.
Figure # 2.2.1.1: User Authentication System Flow
Action
Actor
System Response
Navigate to Signup
Guest User
Signup form displayed
21
Enter valid details + Register
Guest User
Account created, redirected to Dashboard
Enter existing email
Guest User
Error: Email already in use
Enter weak password
Guest User
Error: Password must be 6+ characters
Navigate to Login
Guest User
Login form displayed
Enter valid credentials
Registered User
Auth token issued, redirected to Dashboard
Enter wrong password
Registered User
Error: Invalid email or password
Click Google Sign-In
Guest/Registered
Google OAuth popup, account created
Access /dashboard without
loginGuest User
Guest User
Redirected to Login page
2.2.2 Real-Time Fire Detection
2.2.2.1 Description and Priority
The Real-Time Fire Detection feature is the core and most critical functionality of the
FireGuard system. This feature continuously captures frames from the user's live webcam
feed and sends them to the Roboflow Vision API for fire detection inference. The system
processes the API response and determines whether fire is present in the current frame.
Priority = 10 (Critical)
2.2.2.2 Stimulus/Response Sequences
Stimulus: Authenticated user navigates to the Webcam Detection page.
Response: The system requests webcam access permission from the browser. Live
webcam feed is displayed in a video element on the page.
Stimulus: The system automatically begins detection when the page loads.
Response: A frame is captured from the webcam every 8 seconds using
react-webcam's getScreenshot() method.
Stimulus: A frame is captured from the webcam.
Response: The captured frame (as a base64-encoded JPEG image) is sent via HTTP
POST
request to the Roboflow Vision API endpoint.
.
Stimulus: Roboflow API returns a JSON response with no fire predictions.
Response: The system displays 'SAFE' status on the screen in green color. No alarm
is triggered.
Stimulus: Roboflow API returns a JSON response with fire detected (confidence >
0.5).
Response: The system immediately displays 'FIRE DETECTED' status in red. Audio
alarm plays. Browser notification is sent. Alert is saved to Firestore. Firebase RTDB
status updated to 'fire'.
22
Stimulus: User clicks 'Retake' button.
Response: The detection loop is stopped. Webcam feed continues to display. Status
returns to idle state.
2.2.2.3 Functional Requirements
• REQ-12: The system shall access the user's webcam using the react-webcam
library and display the live feed on the Webcam Detection page.
• REQ-13: The system shall automatically begin detection when page loads
• REQ-14: automatically captures a screenshot every 8 seconds using setInterval
and getScreenshot() method.
• REQ-15: The captured screenshot shall be encoded in base64 JPEG format for
transmission to the Roboflow API.
• REQ-16: The system shall send the base64-encoded image to the Roboflow Vision
API via HTTP POST request with the appropriate API key.
• REQ-17: The system shall parse the JSON response from the Roboflow API and
extract the predictions array.
• REQ-18: The system shall consider fire as detected if any prediction has class 'fire'
and confidence score greater than 0.5.
• REQ-19: The system shall display 'SAFE' status in green when no fire is detected
and 'FIRE DETECTED' in red when fire is detected.
• REQ-20: The system shall provide a 'Stop Detection' button that halts the detection
loop while keeping the webcam feed active.
• REQ-21: The system shall handle API errors gracefully and display appropriate
error messages without crashing.
Figure # 2.2.2.1: Real-Time Fire Detection Flow
Step Action
Technology Used
Output
1
User navigates to Webcam
Detection page
React Router
Page rendered
2
Webcam permission
requestedBrowserI
WebRTC API
Video feed displayed
4
Detection starts automatically
React useState
on page load
react-webcam
Frame captured from
getScreenshot()
webcam
5
Image sent to Roboflow API
HTTP POST / fetch API
API call made
6
API response parsed
JavaScript JSON.parse()
Predictions array extracted
7a
No fire detected
React setState
SAFE status shown (green)
7b
Fire detected (confidence > 0) React setState
3
23
Detection loop initiated
Base64 JPEG image
FIRE DETECTED shown (red)
8
Alarm triggered (if fire)
HTML5 Audio API
Alert sound plays
9
Notification sent (if fire)
Browser Notification API
Push notification displayed
10
Alert saved to Firestore (if fire) Firebase addDoc()
Alert document created
11
RTDB status updated (if fire)
Status = 'fire'
Firebase set()
2.2.3 Real-Time Alarm System
2.2.3.1 Description and Priority
The Real-Time Alarm System feature ensures that users are immediately and prominently
notified when fire is detected by the system. The alarm system consists of two
components: an audio alarm played directly in the browser using the HTML5 Audio API,
and a browser-based push notification delivered via the Web Notifications API.
Priority = 9 (High)
2.2.3.2 Stimulus/Response Sequences
Stimulus: Roboflow API returns fire detection result with confidence above threshold.
Response: The system immediately triggers the audio alarm by calling play() on the
HTML5 Audio object.
Stimulus: Fire detection event occurs.
Response: System checks if browser notification permission has been granted. If
granted, a notification with title 'FIRE ALERT!' is displayed.
Stimulus: User clicks 'Acknowledge' or 'Stop Alarm' button.
Response: Audio alarm is stopped by calling pause() and resetting the audio
currentTime to 0.
2.2.3.3 Functional Requirements
• REQ-22: The system shall play an audio alarm sound immediately upon fire
detection using the HTML5 Audio API.
• REQ-23: The alarm sound shall be stored as a static asset in the React application's
public folder.
• REQ-24: The system shall request browser notification permission from the user
when they first access the Webcam Detection page.
• REQ-25: The system shall send a browser push notification with title 'FIRE ALERT!'
upon fire detection.
• REQ-26: The browser notification shall include the fire detection confidence score
and timestamp.
• REQ-27: The system shall update Firebase Realtime Database with status 'fire'
upon detection and status 'safe' when no fire is detected.
24
• REQ-28: The system shall provide a mechanism for the user to stop the alarm
sound after acknowledgment.
Figure # 2.2.3.1: Alarm System Flow
Event
Action
API Used
Result
Fire detected
Play alarm sound
HTML5 Audio API
Alert sound plays in browser
Fire detected
Send push notification
Web Notifications API
Browser notification displayed
Fire detected
Update RTDB
Firebase set()
Status = 'fire' in database
No fire / Safe
Update RTDB
Firebase set()
Status = 'safe' in database
User acknowledges
Stop alarm sound
Audio.pause()
Sound stops playing
2.2.4 Alert History Dashboard
2.2.4.1 Description and Priority
The Alert History Dashboard feature provides users with a comprehensive overview of all
past fire detection events. Whenever a fire detection event occurs, a document is created
in Firebase Firestore. The Dashboard page retrieves all alerts for the currently logged-in
user and displays them in a tabular format, along with summary statistics.
Priority = 8 (Medium-High)
2.2.4.2 Stimulus/Response Sequences
Stimulus: Authenticated user navigates to the Dashboard page.
Response: Dashboard component mounts and useEffect hook fires a Firestore query
to retrieve all alerts for the current user, ordered by timestamp descending.
Stimulus: Firestore query returns alert documents.
Response: Alert data is stored in React state. Dashboard renders statistics and a
table showing all past alerts.
2.2.4.3 Functional Requirements
• REQ-29: The Dashboard shall display the total number of fire detection alerts for the
logged-in user.
• REQ-30: The Dashboard shall display detection statistics including total alerts count
and alerts recorded today.
• REQ-31: The Dashboard shall retrieve all alert documents from Firestore where the
userId field matches the currently logged-in user's UID.
• REQ-32: The alerts shall be displayed in a table with columns for Serial Number,
Date, Time, Confidence Score, and Status.
25
• REQ-33: The alerts shall be ordered by timestamp in descending order (most recent
first).
• REQ-34: The system shall display a 'No alerts recorded yet' message when no
alerts exist for the user.
• REQ-35: The Dashboard shall provide quick navigation links to the Webcam
Detection page and Profile page.
Figure # 2.2.4.1: Dashboard Structure
Dashboard Section
Content
Data Source
Statistics Cards
Total Alerts Count, Alerts Today,
System Status
Firebase Firestore (aggregated)
Alert History Table
S.No, Date, Time, Confidence, Status
Firebase Firestore (alerts collection)
Quick Actions
Navigate to Webcam Detection, Profile
React Router navigation
User Info
Logged-in user name and email
Firebase Auth currentUser
2.2.5 Browser Notification System
2.2.5.1 Description and Priority
The Browser Notification System feature ensures that users receive fire alerts through the
browser's native notification system. This is particularly important because users may
have the FireGuard tab open in the background while working on other tasks. Browser
notifications appear as system-level alerts even when the browser tab is minimized.
Priority = 8 (Medium-High)
2.2.5.2 Stimulus/Response Sequences
Stimulus: User visits the Webcam Detection page for the first time.
Response: System calls Notification.requestPermission() to request browser
notification permission.
Stimulus: Fire is detected by Roboflow API.
Response: If permission is 'granted', system creates a new Notification object with fire
alert title and message.
2.2.5.3 Functional Requirements
• REQ-36: The system shall request browser notification permission using
Notification.requestPermission() API.
• REQ-37: The system shall check permission status before attempting to send
notifications.
• REQ-38: The system shall create a browser Notification with title 'FireGuard Alert FIRE DETECTED!' upon fire detection.
26
• REQ-39: The notification body shall include the timestamp and confidence score of
the detection event.
• REQ-40: The system shall handle the case where notification permission is denied
without crashing.
2.2.6 User Profile Management
2.2.6.1 Description and Priority
The User Profile Management feature allows authenticated users to view their profile
information stored in Firebase, including their display name, email address, and account
creation date.
Priority = 6 (Medium)
2.2.6.2 Stimulus/Response Sequences
Stimulus: User clicks on 'Profile' link in the sidebar navigation.
Response: Profile page is displayed showing the user's display name, email address,
and UID from Firebase Auth.
2.2.6.3 Functional Requirements
• REQ-41: The Profile page shall display the user's display name as stored in
Firebase Authentication.
• REQ-42: The Profile page shall display the user's email address.
• REQ-43: The Profile page shall display the user's Firebase UID.
• REQ-44: Profile data shall be retrieved from Firebase Auth's currentUser object.
2.2.7 Logout
2.2.7.1 Description and Priority
The Logout feature allows authenticated users to securely end their session. Logging out
clears the Firebase Authentication session and redirects the user to the Login page.
Priority = 9 (High)
2.2.7.2 Stimulus/Response Sequences
Stimulus: User clicks the 'Logout' button in the sidebar navigation.
Response: Firebase signOut() function is called, clearing the authentication session.
User is redirected to the Login page.
2.2.7.3 Functional Requirements
• REQ-45: The system shall provide a Logout button in the sidebar navigation
accessible from all protected pages.
27
• REQ-46: The system shall call Firebase's signOut() function to clear the
authentication session.
• REQ-47: The system shall redirect the user to the Login page after successful
logout.
• REQ-48: After logout, all protected routes shall be inaccessible and redirect to Login
if accessed directly.
Figure # 2.2.7.1: Logout Flow
Actor
Action
System Response
Authenticated User
Clicks Logout in sidebar
signOut() called on Firebase Auth
Firebase Auth
Session cleared
Auth state changed to null
ProtectedRoute
Detects null auth state
Redirects all protected routes to Login
System
Logout complete
User sees Login page
2.3 External Interface Requirements
2.3.1 User Interfaces
FireGuard provides the following user interface pages, each designed with a dark navy
(#111827) primary background, crimson red (#D93030) accent color, and Poppins font
family:
Page/Component URL Route
Description
Key UI Elements
Login Page
/login
Entry point for existing
users
Email field, Password field, Login button,
Google Sign-In, , Link to Signup
Signup Page
/signup
Registration form for new
users
Name field, Email field, Password field,
Register button, Link to Login
Dashboard
/dashboard
Main overview after login
Stats cards, Alert history table, Sidebar
navigation, User welcome message
Webcam Detection /detection
Core fire detection
interface
Live webcam feed, Start/Stop button,
Detection status display, Alarmindicator
Profile Page
/profile
User account information
Display name, Email, UID display
Sidebar
Navigation on all protected Nav links, FireGuard logo, Logout button
(component) pages
2.3.2 Hardware Interfaces
FireGuard does not directly interface with any physical hardware components. However,
the following hardware is required for full system functionality:
Hardware
Requirement
Purpose
28
Interface Method
Webcam
Built-in or USB webcam
Capture live video feed
for fire detection
Browser WebRTC
getUserMedia API
Processor
Run React.js application
Intel Core i3 or equivalent smoothly
N/A (host machine)
RAM
Minimum 4GB
Support browser and
application execution
N/A (host machine)
Internet Connection Broadband (5 Mbps+)
Firebase and Roboflow
API communication
Network interface card
Display
Any monitor/screen
Display webcam feed
UI Browser rendering
Audio Output
Speakers or headphones
Play fire alarm sound
HTML5 Audio API
2.3.3 Software Interfaces
Software/API
Version
Interface Type
Purpose
Roboflow Vision API
v1
REST API
Fire detection inference on captured
frames
Firebase Authentication
SDK 9.x
Firebase JS SDK
User registration, login, session
management
Firebase Firestore
SDK 9.x
Firebase JS SDK
Store and retrieve fire alert history
Firebase Realtime
Database
SDK 9.x
Firebase JS SDK
Real-time fire/safe status updates
Google OAuth 2.0
v2
Firebase Google
AuthProvider
Google Sign-In functionality
Browser Notification API
Web Standard
JavaScript API
Browser push notifications for fire alerts
WebRTC getUserMedia
Web Standard
JavaScript API
Access user's webcam stream
HTML5 Audio API
Web Standard
JavaScript API
Play alarm sound on fire detection
Vercel
Latest
HTTP/HTTPS
Host and serve React.js build
GitHub
Latest
Git protocol
Source code version control
2.3.4 Communications Interfaces
All communications between FireGuard and external services occur over HTTPS, ensuring
data encryption in transit:
• HTTPS/REST: All API calls to the Roboflow Vision API are made via HTTPS POST
requests. The base64-encoded image data is sent in the request body, and
JSON-formatted detection results are received in the response.
• Firebase WebSocket: Firebase Realtime Database uses WebSocket connections
for real-time bidirectional communication. This enables instant status updates
(FIRE/SAFE) to be reflected in the UI without polling.
• Firebase HTTPS: Firebase Authentication and Firestore communicate with
Firebase servers via HTTPS using the Firebase JavaScript SDK.
29
• Browser Notification API: Push notifications are delivered through the browser's
built-in notification system using the Web Notifications API, which operates locally
within the browser environment.
2.4 Other Nonfunctional Requirements
2.4.1 Performance Requirements
Requirement
Metric
Target Value
Measurement Method
Fire Detection Response
Time from frame capture
to alarm trigger
< 5 seconds
Manual timing test
Roboflow API Response
API call round-trip time
< 3 seconds per call
Network timing in
DevTools
Dashboard Load Time
Time to load and display
alert history
< 3 seconds
Browser performance
timing
Login/Signup Response
Time to authenticate via
Firebase
< 2 seconds
Manual timing test
Webcam Feed Display
Frame rate of live video
display
30 FPS minimum
Browser DevTools
Firestore Write Time
Time to save alert
document
< 1 second
Firebase console
timing
2.4.2 Safety Requirements
• No Permanent Image Storage: FireGuard does not permanently store raw
webcam images or video footage. Only metadata (timestamp, confidence score,
status) is stored in Firestore. This protects user privacy.
• False Positive Minimization: The fire detection threshold is set at confidence > 0.5
(50%) to minimize false positive alarms.
• Clear Status Display: The system always clearly displays the current detection
status (FIRE DETECTED in red or SAFE in green).
• Graceful Degradation: If the Roboflow API is unavailable, the system displays an
error message rather than silently failing.
• User Data Isolation: Firebase Security Rules ensure that each user can only
access their own alert data.
2.4.3 Security Requirements
• Authentication Enforcement: Firebase Authentication is used to enforce that only
registered and logged-in users can access the detection, dashboard, and profile
features.
• API Key Protection: The Roboflow API key is stored as a Vite environment variable
(VITE_ROBOFLOW_API_KEY) in the .env file, excluded from version control via
.gitignore.
• Firebase Security Rules: Firestore and Realtime Database security rules allow
users to read and write only their own documents (userId == request.auth.uid).
30
• HTTPS Enforcement: Vercel automatically enforces HTTPS for all requests to the
deployed application.
• Password Security: Firebase Authentication handles all password hashing and
storage. FireGuard never handles or stores raw passwords.
• OAuth 2.0 Security: Google Sign-In is implemented using Firebase's
GoogleAuthProvider, following the OAuth 2.0 protocol.
2.4.4 Software Quality Attributes
Quality Attribute
Description
How Achieved in FireGuard
Reliability
System maintains consistent
performance
Firebase SLA 99.9% uptime,
Roboflow cloud infrastructure
Easy to learn and use
interface
Code easy to modify and
Extend
Works across platforms and
browsers
Intuitive sidebar navigation, clear status
indicators
Testability
Web-based application, no OS-specific
dependencies
Firebase auto-scales,
Can handle growing user base
Vercel CDN for static assets
Component-based React architecture
Easy to write and run tests
supports unit testing
Performance
Responds quickly to user
actions
Vite build optimization, Firebase connection
pooling
Usability
Maintainability
Portability
Scalability
31
Intuitive sidebar navigation, clear status
indicators
CHAPTER-3
Analysis (Use Case Model)
32
3.1 Identifying Actors and Use Cases using Textual Analysis
Use case analysis is a technique used to identify the interactions between external entities
(actors) and the system. By analyzing the system requirements textually, the following
actors and use cases have been identified for the FireGuard system.
3.1.1 Actors
Actor
Type
Description
Guest User
Primary Actor
An unauthenticated visitor who can only access the Login and
Signup pages. Cannot access any detection or dashboard features.
Authenticated User
Primary Actor
A registered and logged-in user who has full access to all FireGuard
features including Webcam Detection, Dashboard, and Profile.
Firebase Authentication External System
Google's Firebase Authentication service that validates user
credentials and manages authentication tokens and sessions.
Roboflow Vision API
External System
Roboflow's AI model inference API that receives image data and
returns fire detection predictions with confidence scores.
Firebase Firestore
External System
Google's cloud NoSQL database that stores and retrieves fire alert
history documents for each user.
Firebase Realtime DB
External System
Google's real-time database that maintains the current fire/safe
status with WebSocket synchronization.
Browser Notification
System
External System
The host operating system's notification service used to display
push notifications to the user.
3.1.2 Use Cases Summary
Figure # 3.1.1: Use Cases Summary Table
Use Case IDUse Case Name
Primary Actor
Priority
UC-01
Register New Account
Guest User
High
UC-02
Login with Email/Password
Guest/Registered User
High
UC-03
Login with Google
Guest/Registered User
High
UC-04
View Dashboard
Authenticated User
High
UC-05
Start Webcam Fire Detection
Authenticated User
Critical
UC-06
Stop Fire Detection
Authenticated User
High
UC-07
Receive Fire Alarm (Audio)
Authenticated User
High
UC-08
Receive Browser Notification
Authenticated User
Medium
UC-09
View Alert History
Authenticated User
Medium-High
UC-10
View User Profile
Authenticated User
Medium
UC-11
Logout from System
Authenticated User
High
33
UC-12
Validate User Credentials
Firebase Auth
High
UC-13
Perform Fire Inference
Roboflow API
Critical
UC-14
Save Alert to Database
Firebase Firestore
High
UC-15
Update Real-Time Status
Firebase Realtime DB
High
3.2 Forming Use Case Diagrams with Candidate Use Cases
3.2.1 Use Case Diagram (Authenticated User)
The Authenticated User is the primary actor of the FireGuard system. After successful
login, this actor can access all system features including the Dashboard, Webcam
Detection, Alert History, Profile Management, and Logout.
Figure # 3.2.1.1: Use Case Diagram (Authenticated User)
Use Case
Description
Includes / Extends
View Dashboard
View statistics and alert history
overview
Vite build optimization, Firebase
connection pooling
Start Fire Detection
Initiate webcam-based fire monitoring
Includes: Capture Frame, Call
Roboflow API
Stop Fire Detection
Halt the detection loop
—
Receive Fire Alarm
Hear audio alarm when fire detected
Extends: Start Fire Detection
Receive Notification
Get browser push notification for fire
Extends: Start Fire Detection
View Alert History
See all past fire detection events
Includes: Query Firestore
View Profile
See account information
Includes: Fetch Firebase Auth
Data
Logout
End the authenticated session
Includes: Firebase signOut()
3.2.2 Use Case Diagram (Guest User)
The Guest User is an unauthenticated visitor to the FireGuard application. This actor can
only interact with the public-facing pages of the system. All protected routes are
inaccessible and will redirect to the Login page if accessed directly.
Figure # 3.2.2.1: Use Case Diagram (Guest User)
Use Case
Description
Precondition
Register New Account
Create a new FireGuard user account with
email and password
User is not registered
Login with Email/Password
Authenticate with existing email and
password credentials
User has registered account
34
Login with Google
Authenticate using Google OAuth 2.0
through Firebase
User has a Google account
3.2.3 Use Case Diagram (External Systems)
Figure # 3.2.3.1: Use Case Diagram (External Systems)
External System
Use Case
Triggered By
Returns
Firebase Authentication Validate Credentials
Login/Signup action
Auth token or error
Firebase Authentication Create User Account
Register action
New user UID
Firebase Authentication Revoke Session
Logout action
Confirmation
Roboflow Vision API
Perform Fire Inference
Frame capture event
JSON predictions array
Firebase Firestore
Save Alert Document
Fire detection event
Document reference
Firebase Firestore
Retrieve Alert History
Dashboard load
Array of alert documents
Firebase Realtime DB
Update Fire Status
Detection result
Confirmation
Browser Notification
Display Fire Alert
Fire detection event
Notification shown
3.3 Detailed Use Case Descriptions
3.3.1 Use Case: Start Webcam Fire Detection (UC-05)
Field
Description
Use Case ID
UC-05
Use Case Name
Start Webcam Fire Detection
Primary Actor
Authenticated User
Secondary Actors
Roboflow Vision API, Firebase Firestore, Firebase Realtime DB,
Browser Notification System
Preconditions
Postconditions
1. User is authenticated and logged in
2. User is on the Webcam Detection page
3. Webcam is available and browser permission granted
4. Internet connection is active
Detection loop is running. If fire detected, alert saved to Firestore and
alarm triggered.
35
Main Success Scenario
1. Detection starts automatically on page load
2. System begins frame capture loop
3. Frame captured from webcam every 3 seconds
4. Frame encoded as base64 JPEG
5. HTTP POST sent to Roboflow API
6. API returns JSON with predictions
7. System checks confidence score
8. If confidence > 0.5: fire detected
9. Audio alarm triggers
10. Browser notification sent
11. Alert saved to Firestore
12. RTDB status updated to fire
13. UI shows FIRE DETECTED in red
Alternative Flow A
If Roboflow API returns empty predictions: System shows SAFE status.
RTDB updated to safe.
Alternative Flow B
If API call fails with network error: Error caught by try/catch.
Error message displayed. Detection loop continues.
Exception Flow
If notification permission denied: Audio alarm still plays. No browser
notification sent.
If webcam access denied: Error message displayed. Start Detection
button disabled.
Priority
Critical (10/10)
Alternative Flow C
3.3.2 Use Case: User Registration (UC-01)
Field
Description
Use Case ID
UC-01
Use Case Name
Register New Account
Primary Actor
Guest User
Secondary Actors
Firebase Authentication, Firebase Firestore
Preconditions
User is not registered. User is on the Signup page.
Postconditions
New user account created. User profile saved to Firestore. User redirected
to Dashboard.
Main Success Scenario
1. Guest user navigates to /signup
2. User enters full name, email, and password
3. User clicks Register button
4. Firebase Auth creates new user account
5. Display name updated via updateProfile()
6. User document saved to Firestore users collection
7. User automatically logged in
8. User redirected to /dashboard
Alternative Flow A
If email is already registered: Firebase returns error.
Message 'Email already in use' displayed.
Alternative Flow B
If password is less than 6 characters: Firebase returns error.
Message shown.
36
Priority
High (9/10)
3.3.3 Use Case: View Alert History (UC-09)
Field
Description
Use Case ID
UC-09
Use Case Name
View Alert History
Primary Actor
Authenticated User
Secondary Actors
Firebase Firestore
Preconditions
User is authenticated. User navigates to Dashboard page.
Postconditions
All past fire detection alerts are displayed in a table.
Main Success Scenario
1. User navigates to /dashboard
2. Dashboard component mounts
3. useEffect fires Firestore query
4. Query filters alerts by userId == currentUser.uid
5. Results ordered by timestamp descending
6. Alerts rendered in HTML table
7. Statistics calculated and displayed
Alternative Flow
If no alerts exist: 'No alerts recorded yet' message displayed.
Priority
Medium-High (8/10)
37
CHAPTER-4
Design
38
4.1 Architecture Diagram
The FireGuard system follows a modern client-server architecture with cloud-based
backend services. The architecture is designed to be scalable, maintainable, and reliable.
All backend services are managed by Google Firebase and Roboflow, eliminating the
need for the development team to manage server infrastructure.
The architecture consists of four major layers that work together to deliver the complete
fire detection experience: the Client Layer (React.js SPA), the Authentication Layer
(Firebase Auth), the AI Inference Layer (Roboflow API), and the Data Layer (Firestore +
Realtime DB).
Figure # 4.1.1: FireGuard System Architecture Diagram
Layer
Components
Technology
Communication
Protocol
Client Layer
React App, Webcam Module,
Detection Module
React.js 18 + Vite
Rendered in browser
Authentication Layer
Firebase Auth Service,
GoogleAuthProvider
Firebase SDK 9.x
HTTPS/Firebase SDK
AI Inference Layer
Roboflow Fire Detection Model Roboflow Vision API v1 HTTPS REST (POST)
Firestore Collections
Data Layer - Persistent (users, alerts)
Firebase Firestore
HTTPS/Firebase SDK
Data Layer - Real-Time RTDB status node
Firebase Realtime DB
WebSocket
Hosting Layer
Static React Build
Vercel CDN
HTTPS
Dev and CI/CD
Source Code Repository
GitHub
Git protocol
Figure # 4.1.2: Component Communication Flow
From Component
To Service
Data Sent
Data Received
Login.jsx
Firebase Auth
Email + Password
Auth Token / Error
Login.jsx
Firebase Auth (Google)
OAuth Request
Auth Token / User Info
WebcamDetection.jsx
Roboflow API
Base64 JPEG Image
JSON Predictions
WebcamDetection.jsx
Firebase Firestore
Alert Document
Document Reference
WebcamDetection.jsx
Firebase Realtime DB
Status String
Confirmation
Dashboard.jsx
Firebase Firestore
Query (userId filter)
Array of Alert Docs
Profile.jsx
Firebase Auth
currentUser request
User Object
Sidebar.jsx
Firebase Auth
signOut() request
Confirmation
39
App.jsx
Firebase Auth
onAuthStateChanged
User / null
4.2 Entity Relational Diagram (ERD) with Data Dictionary
FireGuard uses Firebase Firestore as its primary persistent database (NoSQL document
database) and Firebase Realtime Database for real-time status. The following collections
and data structures are used:
4.2.1 Firestore Collections
Figure # 4.2.1: Firestore Database Schema
Collection
Document Key
Description
users
Firebase Auth UID
Stores user profile information for each
registered user
alerts
Auto-generated ID
Stores each fire detection event with metadata
4.2.2 Data Dictionary — users Collection
Figure # 4.2.2: users Collection Data Dictionary
Field Name
Data Type
Required
Description
Example Value
uid
String
Yes
Firebase Auth User ID — serves
as the document ID
abc123xyz456
displayName
String
Yes
User's full display name
Hanzla Mughal
email
String
Yes
User's email address used for
authentication
hanzla@email.com
photoURL
String
No
Profile photo URL
(for Google Sign-In users)
https://...
createdAt
Timestamp
Yes
Account creation timestamp
(server timestamp)
2026-04-25 10:30
lastLogin
Timestamp
No
Timestamp of user's most recent
login
2026-05-01 08:15
4.2.3 Data Dictionary — alerts Collection
Figure # 4.2.3: alerts Collection Data Dictionary
Field Name
Data Type
Required
Description
alertId
String
Yes
Auto-generated Firestore document ID xK9mP2qR8sT
userId
String
Yes
Firebase Auth UID of the user who
triggered the alert
abc123xyz456
timestamp
Timestamp
Yes
Server timestamp of when the fire was
detected
2026-05-01 14:22
confidence
Number
Yes
Roboflow detection confidence score
(0.0 to 1.0)
0.87
40
Example Value
status
String
Yes
Alert status: active or resolved
active
detectionClass
String
No
Object class returned by Roboflow
(fire or smoke)
fire
imageUrl
String
No
URL of captured frame in Firebase
Storage (if enabled)
https://...
4.2.4 Firebase Realtime Database Structure
Figure # 4.2.4: Firebase Realtime Database Schema
Node Path
Data Type
Values
Description
status/current
String
fire or safe
Current fire detection status updated in real time
status/lastUpdated
String
ISO timestamp string
Timestamp of last status update
status/userId
String
Firebase UID
UID of user whose detection session is active
4.3 Data Flow Diagram
4.3.1 Level 0 DFD (Context Diagram)
At the highest level, FireGuard receives two types of input: user interactions (login
credentials, webcam feed) and AI inference results (from Roboflow API). The system
produces three types of output: authentication responses, fire detection alerts, and
dashboard data displays.
Figure # 4.3.1: Level 0 Data Flow Diagram
External Entity
Input to System
Output from System
User (Browser)
Login credentials, Webcam feed,
User actions
Authentication status, Detection status,
Alert history, Profile data
Firebase Auth
(Receives) Base64 image from system JSON detection predictions with
confidence scores
Authentication tokens, User objects,
(Receives) Credentials from system
Error responses
Firebase Firestore
(Receives) Alert documents from
system
Firebase Realtime DB
(Receives) Status updates from system Real-time status confirmations
Browser OS
(Receives) Notification requests from
system
Roboflow Vision API
Stored alert history, Query results
Displayed push notifications
4.3.2 Level 1 DFD
Figure # 4.3.2: Level 1 Data Flow Diagram
ID
Process Name
Input Data
Output Data
41
Data Store
Credentials, OAuth Auth token,
token
User session
P1
User Authentication
P2
Webcam Management Browser permission Video stream
Browser memory
P3
Frame Capture
Video stream
Base64 image data
Temporary buffer
P4
Fire Detection
Inference
Base64 image
JSON predictions
N/A (API call)
P5
Alarm Triggering
Fire detected flag
Audio playback,
Notification
N/A
P6
Alert Storage
Detection result +
User ID
Firestore document
Firestore alerts
P7
Status Update
Fire/safe flag
RTDB node update
Firebase Realtime DB
P8
Dashboard Display
Firestore query
results
Rendered UI table
Firestore alerts
Firebase Auth
4.4 Class Diagram
The FireGuard React.js application follows a component-based architecture. The following
class diagram describes the main components, their state variables, and their key
methods:
Figure # 4.4.1: FireGuard Class Diagram
Component
/Module
State Variables
Key Methods
Dependencies
App.jsx
currentUser: User|null,
loading: boolean
UseEffect
(onAuthStateChanged)
Firebase Auth,
React Router
Login.jsx
email: string, password:
string, error: string
Signup.jsx
name, email, password,
error: string
handleLogin(), handleGoogle
Login(),handleInputChange()
HandleSignup(),
handleInputChange()
Dashboard.jsx
alerts: Alert
fetchAlerts(), calculateStats(),
formatDate()
WebcamDetection
Status: 'Fire Detected' |
'Safe' | 'Loading...'"
startDetection(), stopDetection(), React-webcam,
captureFrame()
Firestore, fetch API
Profile.jsx
userProfile: User
fetchProfile()
Firebase Auth
currentUser
Sidebar.jsx
activeLink: string
handleLogout(),
handleNavigation()
Firebase Auth,
useNavigate
ProtectedRoute.jsx (uses context)
render (conditional redirect)
firebase.js
initializeApp(), getAuth(),
getFirestore(), getDatabase()
Firebase Auth, React
Router Navigate
(module)
Firebase Auth
Firebase Auth
Firebase Firestore,
Firebase Auth
Firebase SDK
4.5 Object Diagram
The object diagram shows concrete instances of the main classes at runtime during a
typical fire detection session:
Figure # 4.5.1: Object Diagram — Fire Detection Session
42
Object Instance
Class
Attribute Values
currentUser
Firebase User
uid: abc123, email: hanzla@email.com,
displayName: Hanzla Mughal
detectionSession
WebcamDetection
fireAlert1
Firestore Document
StateisDetecting: true, detectionStatus: FIRE DETECTED,
alertTriggered: true, confidence: 0.87
alertId: xK9mP2, userId: abc123, timestamp: 2026-05-01
14:22, confidence: 0.87, status: active
rtdbStatus
RTDB Node
status/current: fire, status/
lastUpdated: 2026-05-01T14:22:35Z
alarmAudio
HTML Audio
src: /alarm.mp3, playing: true, volume: 1.0
fireNotification
Browser Notification
title: FireGuard Alert!, body: Fire detected!
Confidence: 87%
4.6 Sequence Diagram
The sequence diagram illustrates the chronological order of interactions between system
components during the primary fire detection use case (UC-05):
Figure # 4.6.1: Fire Detection Sequence Diagram
Seq # From
To
Message / Action
Response
1
User
WebcamDetection
Page loads, detection starts
automatically
—
2
WebcamDetection
Browser WebRTC
request webcam access
video stream returned
3
WebcamDetection
react-webcam
display video feed
live feed displayed
4
WebcamDetection
setInterval()
start detection loop (every 8s)
timer started
5
WebcamDetection
react-webcam
getScreenshot()
base64 JPEG image
6
WebcamDetection
Roboflow API
POST /detect with base64 image JSON predictions
7
WebcamDetection
JavaScript
parse JSON response
predictions array
8
WebcamDetection
React State
setStatus(SAFE)
UI shows green SAFE
8
WebcamDetection
React State
setStatus(FIRE DETECTED)
UI shows red FIRE
9
WebcamDetection
HTML Audio
alarm.play()
alarm sound plays
10
WebcamDetection
Notification API
new Notification(FIRE!)
push notification shown
11
WebcamDetection
Firebase Firestore
addDoc(alerts, alertData)
document reference
12
WebcamDetection
Firebase RTDB
set(statusRef, fire)
status updated
13
User
WebcamDetection
clicks Retake Button
—
43
14
WebcamDetection
setInterval()
clearInterval(intervalId)
detection loop stopped
4.7 Activity Diagram
Figure # 4.7.1: FireGuard Main Activity Diagram
Activity State
Description
Transition Condition
Next State
START
User opens FireGuard
application
Always
Check Authentication
Check Authentication
App checks Firebase auth state User authenticated
Dashboard
Check Authentication
App checks Firebase auth state User not authenticated
Login Page
Login Page
User sees login form
Login successful
Dashboard
Login Page
User sees login form
No account
Signup Page
Signup Page
User creates account
Registration successful Dashboard
Dashboard
User views stats and alerts
Navigate to detection
Webcam Detection
Page
Webcam Detection
Webcam feed displayed
Page loads
Detection Active
automatically
Detection Active
Frames captured every 20sec
Fire detected
Fire Alert State
Detection Active
Frames captured every 20sec
No fire detected
Continue Detection
Fire Alert State
Alarm, Firestore save
User acknowledges
Continue Detection
Continue Detection
Loop continues
Click Retake
Detection Idle
Logout
signOut() called
Always
Login Page
END
Session terminated
—
—
4.8 Collaboration Diagram
Figure # 4.8.1: FireGuard Collaboration Diagram
Object
Collaborates With
Collaboration Type
Message Exchanged
App.jsx
Firebase Auth
Observer Pattern
onAuthStateChanged listener
App.jsx
React Router
Routing
Provides routes and Protected
Route wrapper
App.jsx
All Page Components
Parent-Child
Passes currentUser
via context/props
Sidebar.jsx
Firebase Auth
Direct Call
signOut() on logout
44
Sidebar.jsx
React Router
Navigation
useNavigate for link clicks
WebcamDetection.jsx
react-webcam
Ref Pattern
automatically capture frames
WebcamDetection.jsx
Roboflow API
HTTP Client
fetch() POST with base64
image
WebcamDetection.jsx
Firebase Firestore
Direct Call
addDoc() to save alerts
WebcamDetection.jsx
Firebase Realtime DB
Direct Call
set() to update status
WebcamDetection.jsx
HTML Audio API
Direct Call
autoplay sound if fire
detected pause when safe
WebcamDetection.jsx
Notification API
Direct Call
new Notification() for fire alert
Dashboard.jsx
Firebase Firestore
Query
getDocs() with where() filter
firebase.js
All Components
Module Export
Exports auth, db, rtdb
instances
4.9 State Transition Diagram
Figure # 4.9.1: FireGuard State Transition Diagram
Current State
Event / Trigger
Guard Condition
Next State
Action Performed
Initial
App Loaded
Firebase Auth
Checking Auth
Show loading spinner
Checking Auth
Auth: authenticated
currentUser != null
Authenticated Idle
Redirect to Dashboard
Checking Auth
Auth: not authenticated currentUser == null
Unauthenticated
Show Login page
Unauthenticated
Login success
Valid credentials
Authenticated Idle
Store auth token, redirect
Dashboard
Unauthenticated
Signup success
New user created
Authenticated Idle
Store auth token, redirect
Dashboard
Authenticated Idle
Page loads
User on detection
Detection Idle
Initialize webcam stream
Detection Idle
Webcam permission
granted
Webcam Active
Display video feed
Webcam Active
Webcam stream
validation ready
getUserMedia
success
hasUserPermission
== false
Detection Active
Start setInterval capture loop
Detection Active
API result: SAFE
confidence <= 0.5
Detection Active
Show SAFE status (green)
Detection Active
API result: FIRE
confidence > 0.5
Fire Alert Active
Trigger alarm, save to
Firestore
Fire Alert Active
User acknowledges
alert
Acknowledge
action
Detection Active
Stop alarm sound
Detection Active
Click Retake
isDetecting == true
Webcam Active
Clear interval, stop detection
Any Auth State
Logout clicked
User authenticated
Unauthenticated
signOut(), redirect Login
45
CHAPTER-5
Implementation
46
5.1 Implementation
The implementation of FireGuard was carried out following an Agile development
methodology with iterative development cycles. The project was executed over an 8-week
period, with each week focused on a specific aspect of the system. The development team
of two members — Muhammad Hanzla (Frontend) and Ali Ahad (Backend/Firebase) —
worked in close collaboration throughout the entire process.
The Agile approach was chosen because it provided the structured milestones required for
academic project management while allowing flexibility for design changes as the project
evolved. Each phase of development was reviewed before moving to the next phase.
Version control through GitHub ensured that all code changes were tracked and the team
could collaborate effectively.
Table # 5.1.1: Implementation Phases
Phase
Description
Duration
Responsible
Requirement
Gathered all functional and non-functional r
equirements.
Week 1
Both
Planning
the technology stack: React.js, Vite, Firebase,
Roboflow. Responsibilities between members
Week 1-2
Both
UI Design and Designed wireframes for all pages. Initialized
React.js project with Vite.
React Setup
Week 2
Muhamad Hanzla
Firebase
Integration
Week 3
Ali Ahad
Week 4
Muhammad Hanzla
Webcam and
Roboflow
Configured project in Firebase Console.
Implemented Authentication with email/password
Integrated react-webcam library for webcam
access. Implemented frame capture .
Alarm
Implemented HTML5 Audio alarm onfire detection.
Implemented Firebase Realtime Database status Week 5
Both
Built Dashboard component with Firestore queries.
Week 6
Implemented alert history table.
Both
Performed unit testing on all components. Fixed
bugs identified during testing.
Week 7
Both
Deployed React.js build to Vercel. Set up GitHub
Documentation repository as CI/CD trigger.
Week 8
Both
Alert History
Dashboard
Testing and
Bug Fixing
5.2 Component Diagram
The component diagram illustrates the structural organization of the FireGuard React.js
application, showing how the different modules and components are organized and how
they interface with each other and with external services.
Figure # 5.2.1: FireGuard Component Diagram
Component
Type
Interfaces With
Responsibility
App.jsx
Root
Component
Firebase Auth, React Router,
All Pages
Application root, auth state
management, route configuration
47
HOC
Component
Layout
Component
Firebase Auth, React Router
Navigate
Protects private routes, redirects
unauthenticated users
Firebase Auth, React Router
Navigation, logout functionality,
active link highlighting
Login.jsx
Page
Component
Firebase Auth, GoogleAuth
Provider
Email/password login, Google
OAuth login
Signup.jsx
Page
Component
Firebase Auth
New user registration with
email/password
Dashboard.jsx
Page
Component
Firebase Firestore, Auth
Display alert stats and history table
Detection.jsx
Page
Component
react-webcam, Roboflow API,
Firestore, RTDB, Audio API
Core fire detection, alarm, and
alert storage
Profile.jsx
Page
Component
Firebase Auth
Display user profile information
firebase.js
Config Module Firebase SDK
Initialize Firebase app, export auth,
db, rtdb
alarm.mp3
Static Asset
HTML5 Audio API
Alert sound file played on fire
detection
.env
Config File
Vite
Store Roboflow API key and
Firebase config securely
Route.jsx
Sidebar.jsx
5.3 Deployment Diagram
The deployment diagram shows the physical and logical distribution of FireGuard
components across different nodes (machines, services, and environments).
Figure # 5.3.1: FireGuard Deployment Diagram
Node
Type
User Device (Browser) Client Node
Components Deployed
Access Method
React SPA, Webcam Stream, Chrome/Firefox/Edge
browser via HTTPS
Local Audio
Vercel CDN
Cloud Hosting Node Static React.js Build (HTML,
CSS, JS bundles)
HTTPS from user browser
Firebase Auth Server
Google Cloud Node Authentication Service, User
Accounts Database
Firebase SDK over
HTTPS
Firebase Firestore
alerts collection, users
Google Cloud Node collection
Firebase Realtime DB
Google Cloud Node status node (fire/safe)
Firebase SDK over
HTTPS
Firebase SDK over
WebSocket
Roboflow API Server
Roboflow Cloud
HTTPS REST API
(POST)
GitHub Repository
Development Node Source Code, CI/CD Pipeline
Fire Detection ML Model
Git protocol / HTTPS
5.4 Database Architecture
FireGuard uses a dual-database architecture combining Firebase Firestore (for persistent
data storage) and Firebase Realtime Database (for real-time status synchronization). This
architecture was chosen because each database type excels at a different use case.
48
5.4.1 Firebase Firestore Architecture
Figure # 5.4.1: Firestore Database Architecture
Collection
Documents
Sub-collections
Indexed Fields
users
{userId} document per user
None
email (for queries)
alerts
Auto-ID document per detection None
userId (for filtering), timestamp
(for ordering)
Firebase Security Rules for Firestore are configured to allow authenticated users to read
and write only documents where the userId field matches their own Firebase Auth UID.
Unauthenticated requests are completely rejected. This ensures complete data isolation
between different users of the system.
5.4.2 Firebase Realtime Database Architecture
Figure # 5.4.2: Firebase Realtime Database Architecture
Node Path
Data Type
Example Value
Update Frequency
status/current
String
fire or safe
Every 8 seconds (each detection cycle)
status/lastUpdated
String
2026-05-01T14:22:35Z
Every 8 seconds (each detection cycle)
status/userId
String
abc123xyz456
On detection session start
5.4.3 Database Architecture Summary
Figure # 5.4.3: Complete Database Architecture Summary
Feature
Database Used
Reason
User Profile Storage
Firebase Firestore
Persistent, structured data, rarely changes
Alert History Log
Firebase Firestore
Persistent, queryable, ordered by
timestamp
Real-Time Fire Status
Firebase Realtime DB
WebSocket-based, sub-second updates
needed
Authentication Tokens
Firebase Auth (internal)
Managed by Firebase, not stored manually
Webcam Images
Not stored (privacy)
Raw images not persisted to protect user
privacy
5.5 WBS Project Management
The Work Breakdown Structure (WBS) provides a hierarchical decomposition of all work
required to complete the FireGuard project. Each work package is assigned to a
responsible team member.
Table # 5.5.1: Work Breakdown Structure
49
WBS ID Work Package
Sub-Tasks
Responsible
Duration
1.0
Project Planning
Requirement gathering,
Technology, GitHub setup,
Both
Week 1
2.0
Frontend UI
Development
All frontend components
Hanzla
Week 2-3
2.1
Login Page
Form UI, validation, error
messages
Hanzla
2 days
2.2
Signup Page
Form UI, validation, error
messages
Hanzla
1 day
2.3
Sidebar Component
Navigation links, styling,
fixed positioning, logout button
Hanzla
2 days
2.4
React Router Setup
Route configuration,
ProtectedRoute HOC
Hanzla
1 day
2.5
Dashboard Page UI
Stats cards, alert table,
layout design
Hanzla
3 days
2.6
Webcam Detection
Page UI
Webcam component,
status display, start/stop buttons
Hanzla
2 days
2.7
Profile Page UI
User info display card
Hanzla
1 day
3.0
Firebase Backend
Integration
All Firebase services setup
Ali
Week 3-4
3.1
Firebase Auth Setup
Project config, email/password
auth, Google OAuth
Ali
2 days
3.2
Firestore Setup
Collections creation, security rules, Ali
indexes
2 days
3.3
Realtime DB Setup
3.4
Node structure, security rules
configuration
.env
setup, Vite config for
Environment Variables
environment variables
Ali
1 day
Both
1 day
4.0
Roboflow API
AI fire detection integration
Hanzla
Week 4
4.1
API Integration
HTTP POST with base64 image,
response parsing
Hanzla
2 days
4.2
Detection Logic
Confidence threshold, fire/safe
decision logic
Hanzla
1 day
4.3
Alert Save to Firestore addDoc() with alert data on fire
detection
set() on status node on each
RTDB Status Update
detection cycle
Both
1 day
Ali
1 day
Both
Week 5
Both
Week 7
Both
Week 8
Both
Week 8
4.4
Audio alarm, browser notification,
visual alert
5.0
Alarm and Notification
6.0
Testing and Bug Fixing Unit tests, integration tests,
browser testing
7.0
Deployment
8.0
Documentation
Vercel deployment, environment
variables, CI/CD
FYP documentation writing,
formatting, and submission
Table # 5.5.2: Work Distribution Summary
Team Member
Responsibility
WBS IDs
50
Ali Cheema
1.0, 2.0, 2.1, 2.2, 2.3, 2.4, 2.5, 2.6,
All Frontend Development, React.js
Components, Roboflow API Integration 2.7, 4.0, 4.1, 4.2
Firebase Backend Integration,
1.0, 3.0, 3.1, 3.2, 3.3, 3.4, 4.3, 4.4
Firestore, RTDB, Auth Rules
Both
Project Planning, Testing, 4
Deployment, Documentation
Hanzla Mughal
51
1.0, 5.0, 6.0, 7.0, 8.0
CHAPTER-6
Testing (Software Quality Attributes)
52
Software testing is a critical phase in the Software Development Life Cycle (SDLC) that
ensures the FireGuard system meets all specified functional and non-functional
requirements. A comprehensive testing strategy was applied to FireGuard, covering both
black box and white box testing methodologies. Testing was performed by both team
members throughout the development process, with formal testing conducted in Week 7 of
the project schedule.
The testing strategy for FireGuard is designed to validate that all system features — user
authentication, webcam fire detection, alarm triggering, Firestore alert storage, browser
notifications, dashboard display, and profile management — work correctly under normal
conditions, boundary conditions, and error conditions.
6.1 Black Box Test Cases
6.1.1 Boundary Value Analysis (BVA)
Boundary Value Analysis was applied to test the behavior of the system at the boundaries
of input ranges. The following boundary values were identified and tested:
Table # 6.1.1: Boundary Value Analysis Test Cases
Input Field
Min Boundary
Email (Login/Signup)
Max Boundary
Boundary Test
Expected Result
1 char before @ 254 characters
Empty string
Error: Email required
Password (Firebase)
6 characters
No maximum
5 characters
Error: Password too
short
Password (Firebase)
6 characters
No maximum
6 characters
Registration accepted
Roboflow confidence
0.0
(no confidence)
1.0
(100% )
0.5 (threshold)
Fire detected at
exactly 0.5
Roboflow confidence
0.0
1.0
0.49
SAFE — no alarm
triggered
Roboflow confidence
0.0
1.0
0.51
FIRE DETECTED —
alarm triggered
Alert history table
0 alerts
Unlimited
0 alerts for new user Display No alerts
recorded yet
6.1.2 Equivalence Class Partitioning
Equivalence Class Partitioning was used to divide the input space into valid and invalid
equivalence classes:
Table # 6.1.2: Equivalence Class Partitioning
Input
Valid Class
Invalid Class 1
Email Address
Valid format: user@domain Missing @ symbol:
userdomain.com
.com
53
Invalid Class 2
Missing domain: user@
Less than 6 characters
(Firebase rejects)
Password
6 or more characters
Empty string
Webcam Permission
Permission granted by user Permission denied by user
Webcam not available
Roboflow API Key
Valid API key in .env file
Invalid/expired API key
Missing API key
Detection Confidence
Between 0.5 and 1.0 (fire)
Between 0.0 and 0.49 N/A
(API always returns 0-1)
Firebase Connection
Connected to internet
No internet connection
Firestore rules deny access
Browser Notification
Permission granted
Permission denied
Browser does not support
API
6.1.3 State Transition Testing
Table # 6.1.3: State Transition Test Cases
Test ID
From State
Event
Expected Next State
Result
ST-01
Unauthenticated
Authenticated Idle
Valid login (email/password) (Dashboard)
ST-02
Unauthenticated
Invalid login credentials
Unauthenticated
(error shown)
Pass
ST-03
Unauthenticated
Google Sign-In success
Authenticated Idle
(Dashboard)
Pass
ST-04
Unauthenticated
Access /dashboard directly
Unauthenticated
(redirected to Login)
Pass
ST-05
Detection Idle
Click Start Detection
Detection Active
Pass
ST-06
Detection Active
Fire detected
(confidence > 0.5)
Fire Alert Active
Pass
ST-07
Detection Active
No fire (confidence <= 0.5)
Detection Active
(SAFE status)
Pass
ST-08
Fire Alert Active
User acknowledges alarm
Detection Active
(alarm stopped)
Pass
ST-09
Detection Active
Click Stop Detection
Webcam Active
(detection stopped)
Pass
ST-10
Any Authenticated
Click Logout
Unauthenticated
Pass
ST-11
Authenticated Idle
Navigate to /detection
Webcam Active
Pass
ST-12
Authenticated Idle
Navigate to /profile
Profile Page
Pass
Pass
6.1.4 Decision Table Testing
Table # 6.1.4: Decision Table for Fire Detection Logic
Rule #
API Success Fire Detected
Confidence > 0.5 Notification Perm Expected Action
Rule 1
Yes
Yes
Yes
Granted
54
Alarm + Notification + Save Firestore
+ RTDB=fire
Rule 2
Yes
Yes
Yes
Denied
Alarm only + Save Firestore +
RTDB=fire
Rule 3
Yes
Yes
No
Granted
SAFE status — no alarm, RTDB=safe
Rule 4
Yes
No
N/A
Any
SAFE status — no alarm, RTDB=safe
Rule 5
No
N/A
N/A
Any
Show error message — detection
continues
Rule 6
No
N/A
N/A
Any
Show API error — detection paused
6.2 White Box Testing
6.2.1 Statement Coverage
Statement coverage testing was performed to ensure all executable statements in the
critical modules were executed at least once during testing:
• All statements in the captureAndDetect() function of WebcamDetection.jsx were
executed, including the try block, catch block, and the conditional fire detection logic.
• All statements in handleLogin() and handleSignup() were executed, covering both
success and error paths.
• The saveAlertToFirestore() function was fully executed, including the addDoc() call
and the error handling catch block.
• All statements in the ProtectedRoute component were executed for both
authenticated and unauthenticated users.
6.2.2 Branch Coverage
Table # 6.2.2: Branch Coverage Test Cases
Function
Condition
True Branch Tested
False Branch Tested
Detect() automatic
if (!webcamRef.current ||
!isDetecting)
Stop detection early
Continue detection
captureAndDetect()
if (fireDetected)
Trigger alarm and
save (true)
Show SAFE status
captureAndDetect()
if (p.confidence > 0.5)
Fire detected (true)
Not fire (false)
handleLogin()
try/catch
Login success (try)
Login fail (catch)
handleSignup()
try/catch
Signup success (try)
Signup fail (catch)
sendNotification()
if (Notification.permission
=== granted)
Send notification (true) Skip notification (false)
ProtectedRoute
if (currentUser)
Render protected page Redirect to login
Dashboard fetchAlerts()
if (docs.empty)
Show no alerts
message (true)
55
Render alerts table
6.2.3 Path Coverage
• Path 1: Detection not active — function returns early without capturing frame.
• Path 2: Detection active, frame captured, API call successful, no fire detected —
SAFE status shown.
• Path 3: Detection active, frame captured, API call successful, fire detected — full
alarm sequence triggered.
• Path 4: Detection active, frame captured, API call fails with network error — error
message shown.
• Path 5: Detection active, webcam not available — error message shown, detection
stops.
6.3 Unit Testing
Table # 6.3.1: Complete Unit Test Cases
Test ID
Component
Test Description
UT-01
Login.jsx
Valid email and password login Redirect to /dashboard
Pass
UT-02
Login.jsx
Invalid password entered
Error message displayed
Pass
UT-03
Login.jsx
Empty email field submitted
Email required error shown
Pass
UT-04
Login.jsx
Invalid email format entered
Invalid email error shown
Pass
UT-05
Login.jsx
Google Sign-In button clicked
Google OAuth popup opens Pass
UT-06
Signup.jsx
New valid user registration
Account created, redirected Pass
UT-07
Signup.jsx
Duplicate email registration
Error: Email already in use
Pass
UT-08
Signup.jsx
Password less than 6 chars
Error: Password too short
Pass
UT-09
WebcamDetection.jsx
Webcam access granted
Video feed displayed
Pass
UT-10
WebcamDetection.jsx
Webcam access denied
Error message shown
Pass
UT-11
WebcamDetection.jsx
WebcamCapture component
mounts successfully
Automatic background
8-second evaluation
Pass
UT-12
WebcamDetection.jsx
Fire detected by Roboflow
FIRE DETECTED shown,
alarm plays
Pass
UT-13
WebcamDetection.jsx
No fire detected (conf: 0.2)
SAFE status shown, no
alarm
Pass
UT-14
WebcamDetection.jsx
Roboflow API network error
Error message displayed
Pass
UT-15
WebcamDetection.jsx
Retake button clicked
Background interval cleared Pass
UT-16
WebcamDetection.jsx
Fire detected — alert save
Document created in
Firestore
56
Expected Output
Status
Pass
UT-17
WebcamDetection.jsx
Fire detected — RTDB update RTDB status = fire
Pass
UT-18
Dashboard.jsx
Load alert history — user has
alerts
Alerts table rendered
Pass
UT-19
Dashboard.jsx
Load alert history — no alerts
No alerts recorded yet
show
Pass
UT-20
Dashboard.jsx
Total alert count displayed
Correct count shown
Pass
UT-21
Profile.jsx
Load user profile
Name and email displayed
Pass
UT-22
Sidebar.jsx
Logout button clicked
signOut() called, redirect
to /login
Pass
UT-23
ProtectedRoute.jsx
Redirect to /login
Pass
UT-24
ProtectedRoute.jsx
Access dashboard
unauthenticated
Access dashboard
authenticated
Dashboard rendered
Pass
6.4 Functional Testing
Table # 6.4.1: Functional Test Cases
Test ID
Feature Tested
Test Steps
FT-01
User Registration
1. Navigate to /signup
New account created,
2. Enter name, email, password redirected to Dashboard
3. Click Register
Pass
FT-02
Email/Password
1. Navigate to /login
2. Enter credentials
3. Click Login
Logged in, redirected to
Dashboard
Pass
Logged in, Dashboard
shown
Pass
Login
Expected Result
Status
FT-03
Google Sign-In
1. Click Google Sign-In
2. Select Google account
FT-04
Fire Detection —
No Fire
1. Start detection automatically SAFE status displayed in
2. Point webcam at safe scene green
Pass
FT-05
Fire Detection —
Fire
1. Start detection automatically FIRE DETECTED shown,
alarm plays
Pass
FT-06
Audio Alarm
1. Trigger fire detection
Alarm sound plays through
speakers
Pass
FT-07
Browser Notification 1. Grant notification permission Browser push notification
appears
2. Trigger fire detection
Pass
FT-08
Alert Saved to
Firestore
1. Trigger fire detection
2. Check Firestore console
Alert document created
with timestamp
Pass
FT-09
RTDB Status
1. Trigger fire detection
2. Check RTDB console
status/current = fire
Pass
FT-10
View Alert History
1. Navigate to Dashboard
All past alerts displayed in
table
Pass
57
FT-11
View Profile
1. Click Profile in sidebar
Name and email displayed
Pass
FT-12
Logout
1. Click Logout in sidebar
Redirected to Login,
session cleared
Pass
FT-13
Protected Routes
1. Log out
2. Try accessing /dashboard
directly
Redirected to /login
Pass
6.5 Compatibility Testing
Table # 6.5.1: Browser Compatibility Test Results
Browser
Version
Platform
Webcam
Fire Detection Login/Signup
Dashboard
Status
Google Chrome
124+
Windows/
Linux
Pass
Pass
Pass
Pass
Pass
Mozilla Firefox
125+
Windows/
Linux
Pass
Pass
Pass
Pass
Pass
Microsoft Edge
124+
Windows
Pass
Pass
Pass
Pass
Pass
Safari
17+
macOS
Pass
Pass
Pass
Pass
Pass
Internet Explorer
11
Windows
Fail
Fail
Fail
Fail
Not
Supported
6.6 Performance Testing
Table # 6.6.1: Performance Test Results
Performance Test
Measurement Method
Roboflow API Response
Time
Browser DevTools
Network tab
Manual stopwatch from
End-to-End Detection Time frame capture to alarm
Target
Actual Result
Status
< 8 seconds
1.2 - 2.8 seconds
Pass
< 5 seconds
2.5 - 4.2 seconds
Pass
Dashboard Load Time
Browser performance t
iming API
< 3 seconds
0.8 - 1.5 seconds
Pass
Login Response Time
Manual timing from click to
redirect
< 2 seconds
0.5 - 1.2 seconds
Pass
Firestore Alert Save Time
Firebase console timing
< 1 second
0.3 - 0.8 seconds
Pass
Browser DevTools
Webcam Feed Frame Rate performance tab
30 FPS
28 - 30 FPS
Pass
Application Bundle Size
< 5 MB
2.3 MB
(zipped: 0.8 MB)
Pass
Vite build output
6.7 Security Testing
Table # 6.7.1: Security Test Results
Test IDt
I
SEC-01
Security Requirement Tested
Test Method
Protected routes inaccessible Navigate to /dashboard
without auth
without login
58
Expected Result
Status
Redirect to /login
Pass
SEC-02
Firestore rules prevent
cross-user access
Query another user's
alerts
Access denied by
Firebase rules
Pass
SEC-03
API key not exposed in
browser
Inspect browser
JavaScript bundle
API key not visible in
source
Pass
SEC-04
HTTPS enforced on Vercel
Check URL protocol
https:// in all URLs
Pass
SEC-05
Password not stored in
plaintext
Check Firestore/RTDB
forpasswords
No passwords in
database
Pass
SEC-06
Google OAuth secure flow
Inspect Google
Sign-In request
OAuth 2.0 flow used
Pass
SEC-07
Firebase session cleared on
logout
Logout and check
auth state
currentUser = null
Pass
59
Literature Review and Related Work
60
Background Literature
Fire detection has been an active area of research for several decades. The evolution of
fire detection systems can be broadly categorized into three generations: traditional
sensor-based systems, image processing-based systems, and modern AI/deep
learning-based systems. FireGuard represents the third generation of fire detection
technology, leveraging the power of deep learning and cloud computing to deliver a
practical, accessible solution.
Traditional Sensor-Based Fire Detection Systems
The first generation of fire detection systems relied on physical sensors to detect the
presence of fire. Ionization smoke detectors, photoelectric smoke detectors, heat
detectors, and carbon monoxide detectors are the most common examples. These
systems have been in widespread use since the 1970s and have saved countless lives.
However, traditional sensor-based systems have well-documented limitations. They
require physical proximity to the fire or smoke source, meaning detection only occurs after
the fire has already grown significantly. False alarms are common due to cooking smoke,
dust, steam, or humidity. Installation and maintenance require physical hardware, making
them expensive to deploy at scale. They also cannot provide visual information about the
fire's location or spread.
Detector Type
Detection Method
Advantages
Disadvantages
Ionization Smoke
Detector
Detects particles using
ionized air
Detects light scattering
from smoke particles
Fast response to flaming
fires
High false alarm rate
from cooking smoke
Slower response to
flaming fires
Photoelectric
Smoke Detector
Better at detecting
smoldering fires
No false alarms from
smoke
Carbon Monoxide
Detector
Detects temperature rise
above threshold
Detects CO gas from
incomplete combustion
Detects invisible danger
Only triggers after fire
is large
Does not detect all fire
types
AI Vision
(FireGuard)
Detects visual fire patterns
using ML model
Early detection, no
hardware needed
Requires internet and
webcam
Heat Detector
Image Processing-Based Fire Detection
The second generation of fire detection systems emerged in the late 1990s and early
2000s with the availability of affordable digital cameras and computer vision algorithms.
These systems analyze video or image feeds to detect visual characteristics associated
with fire, such as color, flickering motion, and shape.
Early image processing approaches used rule-based algorithms that looked for pixels in
the red-orange color range combined with motion analysis. While these systems improved
on sensor-based detection by providing earlier and more spatially accurate alerts, they
suffered from high false positive rates caused by objects like red lights, sunsets, or
61
orange-colored objects appearing in the camera's field of view.
More sophisticated image processing approaches introduced texture analysis, wavelet
transforms, and optical flow algorithms to better distinguish fire from non-fire regions.
These improvements reduced false positives but required significant computational
resources and expert tuning.
Deep Learning-Based Fire Detection
The third and current generation of fire detection systems uses deep learning, specifically
Convolutional Neural Networks (CNNs), to detect fire in images and video streams. Deep
learning models learn complex features from large datasets of labeled fire and non-fire
images, enabling them to distinguish fire from visually similar objects with much higher
accuracy than rule-based approaches.
Recent research has demonstrated that CNN-based fire detection models can achieve
accuracy rates exceeding 95% on benchmark datasets. Models like YOLO (You Only Look
Once), SSD (Single Shot MultiBox Detector), and Faster R-CNN have been successfully
applied to real-time fire detection tasks. Roboflow's fire detection model, used in
FireGuard, is based on these state-of-the-art architectures and is trained on thousands of
fire and smoke images.
Approach
Technology
Accuracy
Real-Time
Hardware Required
Traditional Sensors
Physical electronics
High
Yes
Yes — dedicated hardware
Rule-Based Vision
Color/motion algorithms Medium (60-75%) Yes
Classical ML Vision
SVM, Random Forest
Medium-High
(75-85%)
Limited
Camera + powerful CPU
Deep Learning (CNN)
YOLO, Faster R-CNN
High (90-97%)
Yes (with GPU)
Camera + internet
FireGuard (Roboflow)
Cloud-based CNN
inference
High (>90%)
Yes
Camera + internet only
Camera only
Comparison with Existing Systems
FireGuard differentiates itself from existing fire detection systems in several important
ways:
• Accessibility: Unlike hardware-based systems that require professional
installation, FireGuard requires only a webcam and an internet connection. Any user
with a laptop or desktop computer can deploy FireGuard immediately.
• Cost Effectiveness: Traditional fire detection hardware can cost hundreds to
thousands of dollars to install and maintain. FireGuard leverages free-tier cloud
services (Firebase, Roboflow) and free hosting (Vercel), making it essentially free to
deploy for typical usage.
62
• Cloud Integration: FireGuard integrates with Firebase for real-time status
monitoring and alert history, capabilities that traditional systems cannot easily
provide.
• Remote Monitoring: The web-based nature of FireGuard means alert history can
be accessed from anywhere, unlike local alarm systems that only alert users on-site.
• Scalability: Being web-based, FireGuard can be scaled to monitor multiple
locations simply by opening the application on different devices, without any
additional hardware investment.
Problem Statement
The problem that FireGuard addresses can be formally stated as follows: In Pakistan and
many developing countries, affordable and intelligent fire detection systems are
largely unavailable to small businesses, educational institutions, and residential
users. Traditional fire detection hardware is either too expensive, requires
professional installation, or is unavailable in many localities. This leaves a
significant portion of the population without adequate fire safety measures.
Furthermore, existing software-based fire detection solutions are either too complex for
non-technical users, require expensive cloud subscriptions, or are designed for large
enterprise deployments rather than individual use. There is a clear gap in the market for a
simple, affordable, web-based fire detection solution that any user with a webcam and
internet connection can deploy immediately.
FireGuard addresses this problem by providing a free, open-source, web-based fire
detection application that uses the Roboflow Vision API for AI-powered fire detection,
Firebase for backend services, and React.js for a modern, user-friendly interface. The
system requires no hardware installation, no technical expertise to deploy, and works on
any device with a modern web browser and a webcam.
Methodology
The development of FireGuard followed a systematic methodology combining software
engineering best practices with agile development principles. The methodology consisted
of the following phases:
Phase
Methodology
Problem
Analysis
Literature review, user Research papers, web
needs analysis
resources
Comparative analysis Firebase, Roboflow,
of technologies
React.js
Component-based
Draw.io, whiteboard
architecture design
sessions
Technology
Selection
System
Design
Tools Used
63
Outcome
Defined problem statement and
objectives
Selected optimal tech stack
Architecture and database design
Frontend
Development
Development with
React.js
Backend
Integration
Service integration
with Firebase
VS Code, Vite, React
DevTools
Firebase Console,
Firebase SDK docs
AI Integration
REST API integration
with Roboflow
Postman, Roboflow
Dashboard
Fire detection working
Testing
Black box + white box
testing
CI/CD pipeline with
GitHub and Vercel
Browser DevTools,
manual testing
All test cases passed
Deployment
Documentation SRS format
GitHub, Vercel
Dashboard
Python format
ReportLab, Word
64
Complete frontend application
Auth, Firestore, RTDB integration
Live production deployment
This FYP document
CHAPTER-7
Tools and Technologies
65
7.1 Programming Languages
JavaScript (ES6+)
JavaScript is the primary programming language used for the entire FireGuard frontend.
The project uses modern ES6+ syntax including arrow functions, destructuring
assignment, spread operators, template literals, async/await for asynchronous operations,
and ES6 modules (import/export). JavaScript handles all UI interactions, API calls,
webcam frame processing, Firebase SDK operations, and state management.
JSX (JavaScript XML)
JSX is the syntax extension used in React.js that allows writing HTML-like markup directly
within JavaScript code. All React components in FireGuard are written using JSX, which is
compiled to regular JavaScript by Vite's build pipeline. JSX enables the declarative UI
programming model that makes React components easy to read and maintain.
CSS3
Custom CSS is used for styling all FireGuard components. The design follows a dark
theme with dark navy (#111827) as the primary background color and crimson red
(#D93030) as the accent color for fire-related alerts and action buttons. The Poppins font
family (Bold weight) is used for headings and navigation elements. CSS Flexbox and Grid
are used for responsive layouts.
Table # 7.1.1: Programming Languages Used
Language
Version
Usage in FireGuard
Key Features Used
JavaScript
ES2022+
All application logic, API calls,
Firebase operations
async/await, arrow functions,
destructuring, modules, fetch API
JSX
React 18
standard
All React component templates Component syntax, expressions,
conditional rendering
CSS3
Modern
Styling all UI components
JSON
Standard
Firebase data format, Roboflow Data serialization,
API request/response
API communication
HTML5
HTML5
Semantic structure via JSX
Flexbox, Grid, CSS variables,
transitions, media queries
Audio element, Video element,
Notification API
7.2 Frameworks and Libraries
React.js (Version 18)
React.js is a JavaScript library for building user interfaces, developed and maintained by
Meta (formerly Facebook). FireGuard uses React.js version 18, which introduced
concurrent rendering features, automatic batching, and improved performance. React's
component-based architecture allows the UI to be broken down into reusable,
self-contained components such as Sidebar, WebcamDetection, Dashboard, and
66
ProtectedRoute. Key React concepts used include useState, useEffect, useRef,
useNavigate, and useLocation.
Vite (Version 5)
Vite is a next-generation frontend build tool developed by Evan You (creator of Vue.js).
FireGuard uses Vite as its development server and production build tool. Vite provides
extremely fast hot module replacement (HMR) during development. For production builds,
Vite uses Rollup to produce highly optimized and code-split bundles. Vite also handles
environment variables through the VITE_ prefix convention, which is used to securely
store the Roboflow API key.
React Router DOM (Version 6)
React Router DOM is the standard routing library for React applications. FireGuard uses
React Router v6 for client-side navigation between pages. Routes configured: / (redirects
to /login), /login (Login page), /signup (Signup page), /dashboard (protected), /detection
(protected), /profile (protected). The ProtectedRoute component wraps all private routes to
enforce authentication.
react-webcam
react-webcam is a React component library that provides easy access to the device's
webcam through the browser's getUserMedia WebRTC API. FireGuard uses
react-webcam to display the live video feed and to capture still screenshots using
getScreenshot() for sending to the Roboflow API. The component handles all webcam
initialization, permission requests, and stream management.
Table # 7.2.1: Frameworks and Libraries
Library/Framework
Version
npm Package
Purpose
React.js
18.x
react, react-dom
UI component library and rendering
Vite
5.x
vite, @vitejs/plugin-react
Build tool and development server
React Router DOM
6.x
react-router-dom
Client-side routing and navigation
react-webcam
7.x
react-webcam
Webcam access and screenshot
capture
Firebase SDK
9.x
firebase
Auth, Firestore, Realtime DB
integration
7.3 APIs and Services
Roboflow Vision API
67
Roboflow is a computer vision platform that provides tools for training, testing, and
deploying machine learning models. FireGuard uses the Roboflow Inference API to
perform fire detection on webcam frames. The API is called via an HTTP POST request to
the endpoint: https://detect.roboflow.com/{model_id}/{version}?api_key={key}. The request
body contains the base64-encoded JPEG image. The response is a JSON object
containing a predictions array where each prediction has: x, y (bounding box center),
width, height (bounding box dimensions), confidence (0.0 to 1.0), and class label (fire or
smoke).
Firebase Authentication
Firebase Authentication is Google's identity service that provides complete user
authentication functionality. FireGuard uses Firebase Authentication for email/password
registration and login, and Google Sign-In via OAuth 2.0 through the GoogleAuthProvider.
Firebase Authentication handles all security aspects including password hashing, token
generation, session management, and secure token refresh.
Firebase Firestore
Firebase Firestore is a flexible, scalable NoSQL cloud database from Google Firebase. It
stores data as documents organized in collections. FireGuard uses Firestore for persistent
storage of fire alert history and user profile data. Firestore's real-time listeners can be used
for live updates, though FireGuard primarily uses one-time queries for the alert history
dashboard. Firestore security rules ensure data isolation between users.
Firebase Realtime Database
Firebase Realtime Database is Google's original real-time database solution. Unlike
Firestore, Realtime Database uses a simple JSON tree structure and provides
WebSocket-based real-time synchronization. FireGuard uses Realtime Database
specifically for the fire/safe status field, which needs to be updated and read with minimal
latency on each detection cycle.
Table # 7.3.1: APIs and External Services
API/Service
Provider
Type
Auth Method
68
Response Format
Roboflow Vision API
Roboflow
REST API (HTTPS) API Key in query string JSON (predictions array)
Firebase Authentication Google
Firebase SDK
Firebase App Config
Auth Token / User Object
Firebase Firestore
Google
Firebase SDK
Firebase Auth Token
Document Snapshots
Firebase Realtime DB
Google
Firebase SDK /
WebSocket
Firebase Auth Token
JSON Data
Web Notifications API
Browser
JavaScript Browser User Permission Grant Notification Object
API
WebRTC
getUserMedia
Browser
JavaScript Browser User Permission Grant MediaStream Object
API
7.4 Development Tools
Table # 7.4.1: Development Tools Used
Tool
Version
Purpose
Usage in FireGuard
Visual Studio Code
1.88+
Primary code editor
Writing all React.js, CSS, and
configuration files
Git
2.40+
Version control system Tracking code changes, branching,
committing
GitHub
Cloud
Remote repository
hosting
Code storage, collaboration, CI/CD trigger
for Vercel
Vercel
Cloud
Frontend deployment
platform
Hosting the React.js production build
with CDN
Node.js
v20.x
(via NVM)
JavaScript runtime
Running Vite dev server and npm
commands
NVM
Latest
Node Version Manager Managing Node.js versions on Linux Mint
npm
10.x
Package manager
Installing and managing project
dependencies
Firebase Console
Web
Firebase project
management
Creating Firebase project, monitoring
database, setting security rules
Roboflow Dashboard
Web
AI model management Accessing fire detection model, getting
API key
Chrome DevTools
Built-in
Browser debugging
Network inspection, performance profiling,
webcam testing
Postman
10.x
API testing
Testing Roboflow API endpoints before
integration
7.5 Operating Environment
Development Environment
Component
Specification
Details
Operating System
Linux Mint 21.x
Primary development OS for Hanzla Mughal
Code Editor
Visual Studio Code 1.88+
With extensions: ESLint, Prettier, GitLens
69
Node.js Runtime
v20.x LTS
Managed via NVM (Node Version Manager)
Package Manager
npm 10.x
For installing project dependencies
Browser for Testing
Google Chrome 124+
Primary testing browser with DevTools
Version Control
Git 2.40 + GitHub
Source code management and collaboration
Terminal
Bash (Linux Mint default)
Running npm commands and Git operations
Production Environment
Component
Technology
Provider
Details
Frontend Hosting
Vercel CDN
Vercel Inc.
Static React.js build served globally
via CDN
User Authentication Firebase Auth
Google Cloud
Managed authentication service
Alert Database
Firebase Firestore
Google Cloud
NoSQL cloud database for alert
history
Real-Time Status
Firebase Realtime DB
Google Cloud
WebSocket real-time database
AI Fire Detection
Roboflow Inference
Roboflow Inc.
Cloud-hosted ML model inference
Source Control
GitHub
Microsoft
Code repository and CI/CD
integration
Domain / HTTPS
Vercel
Vercel Inc.
Automatic HTTPS certificate
70
APPENDIX
Appendix A: Glossary
71
Term
Definition
AI
Artificial Intelligence — the simulation of human intelligence processes by
computer systems
ADP
Associate Degree Program — a two-year undergraduate degree program
API
Application Programming Interface — a set of rules and protocols for
building software applications
Base64
Authentication Token — a digital credential issued by Firebase Auth after
successful login
An encoding scheme that converts binary data (images) to ASCII text
format for transmission
Browser Notification
A system-level notification displayed by the browser outside the
application tab
CI/CD
Continuous Integration / Continuous Deployment — automated pipeline
from code to deployment
CDN
Content Delivery Network — distributed servers that deliver web content
closest to the user
Component
A reusable, self-contained piece of React.js UI with its own state and
render logic
Confidence Score
A value between 0.0 and 1.0 returned by Roboflow indicating detection
certainty
Firestore
Firebase's flexible, scalable NoSQL cloud document database
Firebase
Google's Backend-as-a-Service platform providing auth, database,
storage, and hosting
FYP
Final Year Project — the capstone project for the ADP IT program at GCUF
GCUF
Government College University Faisalabad
GitHub
A web-based platform for version control and collaboration using Git
Google OAuth
Open Authorization protocol used for Google Sign-In
HTTPS
Hypertext Transfer Protocol Secure — HTTP with TLS encryption
HMR
Hot Module Replacement — Vite feature that updates modules without full
reload
JSX
JavaScript XML — a syntax extension for JavaScript used in React.js
ML Model
Machine Learning Model — a mathematical model trained on data to
make predictions
NVM
Node Version Manager — a tool for managing multiple versions of Node.js
NoSQL
Not only SQL — a type of database storing data in non-tabular formats
OAuth 2.0
An authorization framework for granting applications access to user
accounts
Prediction
An output from Roboflow model with class label, confidence score,
and bounding box
Protected Route
A React Router route that redirects unauthenticated users to login
Auth Token
72
React.js
Realtime Database
A JavaScript library for building user interfaces using component-based
architecture
Firebase's original database with WebSocket-based real-time
synchronization
REQ
Requirement — prefix used to label functional requirements for traceability
REST API
Representational State Transfer API — an architectural style for web APIs
Roboflow
An AI platform for computer vision model training, management, and
deployment
SRS
Software Requirements Specification — document describing system
requirements
SPA
Single Page Application — a web app that loads once and updates
dynamically
UID
User ID — a unique identifier assigned to each user by Firebase
Authentication
Vercel
A cloud platform for deploying and hosting frontend web applications
Vite
A modern frontend build tool for fast development server and optimized
builds
WebRTC
Web Real-Time Communication — browser technology enabling webcam
access
WebSocket
A protocol providing full-duplex communication over a single TCP
connection
73
Appendix B: User Documentation
74
B.1 Objective
FireGuard is an AI-based real-time fire detection web application designed to monitor
environments through a webcam and immediately alert users when fire is detected. The
system provides a complete fire monitoring solution accessible from any modern web
browser without requiring any software installation.
• Monitor your home, office, or any environment for fire in real time using your
device's webcam.
• Receive immediate audio and visual alerts when fire is detected by the AI system.
• Get browser push notifications for fire alerts even when the application tab is not in
focus.
• View a complete history of all past fire detection events on the Dashboard.
• Secure your account with email/password or Google Sign-In authentication.
B.2 System Requirements for End Users
Requirement
Minimum
Recommended
Web Browser
Google Chrome 90+,
Firefox 88+, Edge 90+
Latest Google Chrome
Internet Connection
Broadband (5 Mbps)
Broadband (10 Mbps+)
Webcam
Any standard USB or
built-in webcam
HD webcam (720p or higher)
RAM
4 GB
8 GB
Operating System
Windows 10, Linux,
macOS 10.15
Windows 11, Linux Mint 21, macOS 13
Audio
Speakers or headphones
Speakers (for alarm sound)
B.3 Step-by-Step User Guide
Step 1: Access the Application
Open your web browser and navigate to the FireGuard application URL. The Login page
will be displayed as the default landing page.
Step 2: Create an Account (New Users)
Click the 'Sign Up' link on the Login page. Enter your full name, a valid email address, and
a password (minimum 6 characters). Click 'Register'. Your account will be created and you
will be automatically logged in and redirected to the Dashboard. Alternatively, click 'Sign in
with Google' to create an account instantly using your Google credentials.
Step 3: Log In (Existing Users)
75
On the Login page, enter your registered email address and password, then click 'Login'.
You will be redirected to the Dashboard upon successful authentication. You can also use
'Sign in with Google' for quick access.
Step 4: Explore the Dashboard
After login, you will see the Dashboard. The Dashboard displays your fire detection
statistics including the total number of alerts recorded and the number of alerts detected
today. Below the statistics, you will see a table showing all your past fire detection events.
Step 5: Start Fire Detection
Click on 'Webcam Detection' in the sidebar navigation. The Webcam Detection page will
load and request your browser's permission to access your webcam. Click 'Allow' when
prompted. You will see your live webcam feed displayed on the screen. Click the 'Start
Detection' button to begin fire monitoring.
Step 6: Monitor Detection Status
While detection is active, you will see the current status displayed below the webcam feed.
A green 'SAFE' indicator means no fire has been detected. If fire is detected, the status will
change to red 'FIRE DETECTED'.
Step 7: Receiving a Fire Alert
When fire is detected, the following will happen simultaneously:
• An alarm sound will play through your device's speakers or headphones.
• A red 'FIRE DETECTED' status with the confidence percentage will appear on
screen.
• A browser push notification will appear in your system's notification area.
• The detection event will be automatically saved to your alert history in the database.
Step 8: View Alert History
Return to the Dashboard at any time to view your complete alert history. The table shows
all past fire detection events with the exact date, time, and confidence score for each
detection.
Step 9: Logout
To end your session, click the 'Logout' button at the bottom of the sidebar navigation. Your
session will be securely cleared and you will be returned to the Login page.
B.4 Troubleshooting
76
Problem
Possible Cause
Solution
Webcam feed not
showing
Browser denied webcam
permission
Click camera icon in browser address bar,
allow access, refresh page
No alarm sound
System volume muted
Check device volume settings
Notifications not
appearing
Notification permission
denied
Click notification icon in browser address bar and
allow notifications
Alert history not loading Internet connection issue
Check internet connection and refresh page
Login not working
Incorrect credentials
Double-check email and password
API error message
Roboflow rate limit
reached
Wait a few minutes and try again
77
Appendix C: Source Code
78
C.1 Firebase Configuration (firebase.js)
// firebase.js — Firebase configuration and initialization
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
const firebaseConfig = {
apiKey: import.meta.env.VITE_API_KEY ,
authDomain: "fireguard-57574.firebaseapp.com",
projectId: "fireguard-57574",
storageBucket: "fireguard-57574.firebasestorage.app",
messagingSenderId: "292693547961", appId:
"1:292693547961:web:b58504713d8f5588def468",
measurementId: "G-GMDZ13SP4B"};
const app = initializeApp(firebaseConfig);
export const auth=getAuth(app);
export const db=getFirestore(app);
export default app;
C.2 Login Component — Core Authentication Functions
// Login.jsx — Email/password and Google authentication handlers
import { signInWithEmailAndPassword, signInWithPopup,
GoogleAuthProvider } from "firebase/auth";
import { auth } from "../firebase";
import { useNavigate } from "react-router-dom";
const handleLogin = async () => {
setError(""); setLoading(true);
try {
await signInWithEmailAndPassword(auth, email, password);
navigate("/dashboard");
} catch (error) {
setError(error.message);
} finally { setLoading(false); }
};
const handleGoogleLogin = async () => {
const provider = new GoogleAuthProvider();
try {
await signInWithPopup(auth, provider);
navigate("/dashboard");
} catch (error) { setError(error.message); }
};
C.3 WebcamDetection — Core Fire Detection Function
79
// WebcamDetection.jsx — Main fire detection and alarm logic
const WebcamCapture = () => {
const webcamRef = useRef(null);
const audioRef = useRef(null);
const [status, setstatus] = useState("Loading...");
const [img, setImg] = useState(null);
const auth = getAuth(app);
const user = auth.currentUser;
const detectFire = useCallback(async () => {
let fireFound = false;
let smokeFound = false;
try {
const imageSrc = webcamRef.current?.getScreenshot();
if (!imageSrc) return;
const base64Image = imageSrc.split(",")[1];
const response = await fetch(
`https://serverless.roboflow.com/firedetection-upd0y/1?api_key=$
{import.meta.env.VITE_ROBOFLOW_KEY}`,
{
method: "POST",
body: base64Image,
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
},
);
const data = await response.json();
try {
if (data.predictions.length > 0) {
data.predictions.forEach((p) => {
if (p.class.toLowerCase() === "fire") fireFound = true;
if (p.class.toLowerCase() === "smoke") smokeFound = true;
80
});
🔥
if (fireFound) {
setstatus("
Fire Detected");
audioRef.current.pause();
audioRef.current.currentTime = 0;
audioRef.current.play();
} else if (smokeFound) {
setstatus("
Smoke Detected");
}
} else {
setstatus("
Safe");
if (audioRef.current) {
audioRef.current.pause();
audioRef.current.currentTime = 0;
}
}
} catch (err) {
console.error(err);
}
if (fireFound || smokeFound) {
await addDoc(collection(db, "alerts"), {
timeStamp: new Date(),
id: user?.uid || "anonymous",
status: fireFound ? "fire" : "smoke",
});
}
} catch (err) {
console.error(err);
}
}, []);
//retake
const retake = () => {
setImg(null);
setstatus("Loading...");
audioRef.current.pause();
audioRef.current.currentTime = 0;
};
useEffect(() => {
const interval = setInterval(() => {
detectFire();
}, 8000);
return () => clearInterval(interval);
}, [detectFire]);
💨
✅
81
C.5 History
const History = () => {
const [alerts, setAlerts] = useState([]);
useEffect(() => {
const fetchAlerts = async () => {
const q = query(collection(db, "alerts"), orderBy("timeStamp", "desc"));
const querySnapshot = await getDocs(q);
setAlerts(querySnapshot.docs.map(doc =>
({ id: doc.id, ...doc.data() })));
};
fetchAlerts();
}, []);
};
C.6 Browser Notification Function
// WebcamDetection.jsx — Send browser push notification
const sendFireNotification = (confidence) => {
if (Notification.permission === "granted") {
new Notification("FireGuard Alert — FIRE DETECTED!", {
body: `Fire detected with ${Math.round(confidence * 100)}%
confidence. Take immediate action!`,
icon: "/fire-icon.png",
tag: "fire-alert",
});
}
};
useEffect(() => {
if (Notification.permission === "default") {
Notification.requestPermission();
}
}, []);
C.7 Dashboard — Fetch Alert History from Firestore
// Dashboard.jsx — Fetch all alerts for current user
const Dashboard = () => {
const auth = getAuth(app);
const user = auth.currentUser;
const navigate = useNavigate();
const [alerts, setAlerts] = useState([]);
useEffect(() => {
const fetchData = async () => {
try {
const querySnapshot = await getDocs(collection(db, "alerts"));
const data = querySnapshot.docs.map(doc => ({
id: doc.id,
...doc.data()
}));
setAlerts(data);
console.log("Data:", data);
}
82
catch (error) {
console.error("Error fetching documents: ", error);
}
};
fetchData();
}, []);
const total = alerts.length;
const fire = alerts.filter(item => item.status?.toLowerCase() ===
"fire").length;
const safe = alerts.filter(item => item.status?.toLowerCase() ===
"safe").length;
C.8 Application Routing Configuration
const App=()=>{
return(
<div>
<Routes>
<Route path='/' element={<Layout/>}>
<Route index element={<Dashboard/>}/>
<Route path="/Login" element={<Login/>}/>
<Route path="/account" element={<Account/>}/>
<Route path="/profile" element={<Profile/>}/>
<Route path='/detection' element={<WebcamCapture/>}/>
<Route path="/history" element={<History/>}/>
<Route path="/safety"
element={<SafetyInstructions/>}/>
</Route>
</Routes>
</div>
)
}
export default App
C.9 Signup Component — User Registration
import { useState } from "react";
import { FcGoogle } from "react-icons/fc";
import {
getAuth,
createUserWithEmailAndPassword,
updateProfile,
} from "firebase/auth";
import app from "./firebase";
import { GoogleAuthProvider, signInWithPopup } from "firebase/auth";
import { useNavigate } from "react-router-dom";
const Account = () => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [reapeat, setRepeat] = useState("");
83
const [name, setName] = useState("");
const [error, setError] = useState("");
const provider = new GoogleAuthProvider();
const navigate = useNavigate();
const auth = getAuth(app);
function handleSubmit(e) {
e.preventDefault();
if (password != reapeat) {
setError("Please match the password");
} else {
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
const user = userCredential.user;
return updateProfile(user, { displayName: name });
})
.then(() => {
alert("Account created!");
navigate("/login");
})
.catch((error) => {
setError(error.message);
});
}
}
function GoogleSignIn() {
signInWithPopup(auth, provider)
.then((result) => {
const user = result.user;
console.log(user);
navigate("/");
})
.catch((error) => {
alert(error.message);
});
}
84
const [name, setName] = useState("");
const [error, setError] = useState("");
const provider = new GoogleAuthProvider();
const navigate = useNavigate();
const auth = getAuth(app);
function handleSubmit(e) {
e.preventDefault();
if (password != reapeat) {
setError("Please match the password");
} else {
createUserWithEmailAndPassword(auth, email, password)
.then((userCredential) => {
const user = userCredential.user;
return updateProfile(user, { displayName: name });
})
.then(() => {
alert("Account created!");
navigate("/login");
})
.catch((error) => {
setError(error.message);
});
}
}
function GoogleSignIn() {
signInWithPopup(auth, provider)
.then((result) => {
const user = result.user;
console.log(user);
navigate("/");
})
.catch((error) => {
alert(error.message);
});
}
84