Dr.

BABASAHEB AMBEDKAR MARATHWADA UNIVERSITY,

CHHATRAPATI SAMBHAJINAGAR (M.S.)

MIT CSN ATTENDANCE: Smart Attendance

Management System using React and Firebase

Submitted by
Rohan Santosh Bodkhe _SY_ECE_A-11
Onkar Dnyaneshwar Bodhane_SY_ECE_A-09
Riddhi Pandurang Buchale_SY_ECE_A-12
Akshara Sandip Bodkhe_SY_ECE_A-10

Under the guidance of

Dr. Abhilasha Mishra

In partial fulfillment of the award of

Bachelor of Technology (Electronics & Computer Engineering)

Department of Electronics & Computer Engineering

Maharashtra Institute of Technology,
CHHATRAPATI SAMBHAJINAGAR (Maharashtra)

1
 CERTIFICATE
This is to certify that the CEP report entitled “MIT CSN
Attendance: Smart Attendance Management System using React and
Firebase”, submitted by Following Students of Second Year (Electronics
and Computer Engineering)
Rohan Santosh Bodkhe SY-ECE_A-11, Onkar Dnyaneshwar Bodhane
SY-ECE_A-09, Akshara Sandip Bodkhe SY-ECE_A-10, Riddhi
Pandurang Buchale SY-ECE_A-12 is the bonafied work completed under
my supervision and guidance in partial fulfilment for the award of Bachelor
of Technology (Electronics and Computer Engineering) of Dr. Babasaheb
Ambedkar Marathwada University, Chhatrapati Sambhajinagar (M.S.).

Place: MIT CSN

Date: /10/2025

Guide CEP Coordinator Head of Department

Dr. Abhilasha Mishra Dr. Sarita Sanap Dr. Shilpa Nandedkar

Dr. [Link]
Director
Maharashtra Institute of Technology
CHHATRAPATI SAMBHAJINAGAR (M.S.) – 431 005

2
 DECLARATION

We, the undersigned students of Second Year, Department of Electronics and

Computer Engineering, Maharashtra Institute of Technology, Chhatrapati Sambhajinagar,
hereby Declare that the Community Engagement Project Report titled “E-Waste
Management and Awareness” has been carried out by us as part of the Community
Engagement Activity for The academic year 2025–2026. We further declare that this
report is the result of our own Effort, study, and observations, and that it has not been
submitted to any other institute or University for any award or certification.

Guide: Dr. Abhilasha Mishra

Head of Department, Electronics and Computer Engineering
Date: ___________
Place: MIT, Chhatrapati Sambhajinagar

Rohan Santosh Bodkhe -

Onkar Dnyaneshwar Bodhane-
Riddhi Pandurang Buchale-
Akshara Sandip Bodkhe-

3
 ACKNOWLEDGEMENT

We take this opportunity to express our profound gratitude and deep

regards to our mentor and guide Dr. Abhilasha Mishra, from the
Computer Engineering Department, MIT College, Chhatrapati
Sambhajinagar, for their valuable guidance, continuous encouragement,
and support throughout the development of our project “Attendease – A
Smart Attendance Management System.”
Their constant supervision, constructive feedback, and insightful suggestions
have been invaluable in shaping our project from its inception to its
successful implementation. We also extend our sincere thanks to the
Community Engagement Program Faculty for providing us with this
wonderful opportunity to work on a real-world problem and develop our
technical as well as problem-solving skills.
We are equally thankful to our classmates and friends for their cooperation,
motivation, and help during various stages of this project. Lastly, we express
our heartfelt gratitude to our parents for their continuous moral support,
patience, and encouragement throughout our learning journey.
This project has provided us with an enriching experience in understanding
software development practices, teamwork, and the application of technical
knowledge in solving real-time issues.

Rohan Santosh Bodkhe

Onkar Dnyaneshwar Bodhane
Riddhi Pandurang Buchale
Akshara Sandip Bodkhe

4
 ABSTRACT

The “Attendease App” is a mobile and web-based attendance management

system developed as part of the Career Enhancement Program (CEP) at MIT College,
Chhatrapati Sambhajinagar. The primary goal of this project is to design a smart, secure,
and user-friendly platform to streamline the process of recording and monitoring
attendance for students and faculty in educational institutions.
In traditional systems, attendance is often marked manually, which is time-consuming,
prone to errors, and lacks transparency. To overcome these challenges, Attendease
leverages modern web technologies like [Link] for the front-end interface and
Firebase for backend services such as authentication, real-time database, and cloud
storage. The system ensures role-based access, where administrators, faculty members,
and students have distinct dashboards and functionalities.
The application provides student and faculty registration, secure login authentication,
theory and practical attendance tracking, and real-time attendance visualization.
Faculty can mark attendance digitally, generate reports, and maintain records seamlessly.
Students can view their attendance summaries and receive timely updates, ensuring
transparency and accountability.
Attendease emphasizes scalability, security, and efficiency by utilizing Firebase’s cloud
infrastructure. The system can be easily adapted to multiple departments or institutions,
making it a reliable and scalable attendance solution. The development process
followed agile principles, emphasizing iterative improvements, UI responsiveness, and
data synchronization.
Overall, Attendease bridges the gap between traditional attendance systems and digital
automation, reflecting the application of engineering skills, teamwork, and innovation in
real-world problem-solving.

5
 CONTENTS

CHAPTERS PAGE NO

1. INTRODUCTION 8
1.1 Introduction
1.2 Need of project
1.3 Objective of project

2. LITERATURE SURVEY 9-11

2.1 Introduction
2.2 Cloud-Based Attendance Management System (2023)
2.3Android-Based Attendance System using Firebase (2024)
2.4 Android Based Attendance System using Firebase(2025)
2.5 Summary and Gap Analysis
2.6 Conclusion

3. SYSTEM MODELING 12-14

3.1 Block diagram and Working
3.2 Block wise Technical Specifications
3.3 Software Details & Deployment

4. RESULT ANALYSIS 15
4.1 Implementation Results
4.2 Performance Observation
4.3 Output Details

16-18

6
5. APP INTERFACE & WORKING
5.1 Registration and login page.
5.2 Dashboard (student / faculty)
5.3 Course section (Create Course)
5.4 Mark Attendance
5.5 Report section (View & Download Report of Attendance)

[Link] 19

6.1 Conclusions
6.2 Advantages
6.3 Disadvantages

References 20
Appendix- 21-22

7
 1. INTRODUCTION

The attendance process plays a crucial role in academic institutions for

monitoring student participation.
Traditional manual systems involving registers are time-consuming, prone to
errors, and difficult to maintain. The MIT CSN Attendance project aims to
address these issues by creating a web-based solution that automates the
process, ensuring efficiency and transparency.

1.1 Need of Project

To eliminate the manual attendance process, ensure data accuracy, and
provide digital access to attendance records.

1.2 Objective of Project

- To design a secure login system for students and faculty.
- To provide role-based dashboards for attendance monitoring.
- To integrate Firebase for real-time data storage.
- To offer analytics and reporting for faculty users

8
 [Link] SURVEY

2.1 Introduction

This chapter reviews existing software-based attendance management

systems, emphasizing cloud integration, user interface design, and security
mechanisms. Over the last few years, many educational institutions have
adopted web and mobile applications to replace manual attendance registers.
These systems are typically built using frameworks like React, Angular, or
Flutter, with Firebase or other cloud databases for real-time synchronization.

The main goal of this survey is to understand various approaches used in

attendance automation and to identify gaps that can be addressed by the MIT
CSN Attendance System.

2.2 Cloud-Based Attendance Management System (2023)

In a study by Sharma et al. (2023), a web-based attendance management

system was developed using HTML, CSS, JavaScript, and PHP integrated
with a MySQL database. The system allowed teachers to mark and view
attendance records online while students could log in to check their
attendance percentage.

Key Findings:

Reduced paperwork and time required for record keeping.

Improved data consistency and backup using cloud hosting.
Lacked mobile responsiveness and analytics features.

Relevance to MIT CSN Attendance:

9
Our project enhances this concept using React for responsive design and
Firebase for real-time updates, ensuring smoother performance across
devices.

2.3 Android-Based Attendance System using Firebase (2024)

A project by Kumar and Patel (2024) proposed an Android attendance app

that uses Firebase Authentication for secure login and Firebase Realtime
Database to store attendance data. Teachers could update student presence
from their phones, and the app instantly reflected changes for all users.

Key Features:
Google login and OTP verification.
Automatic percentage calculation.
Cloud synchronization ensuring data safety.

Limitations:
Platform-dependent (only Android).
Limited reporting features for faculty.

Relevance to MIT CSN Attendance:

Our system overcomes these drawbacks by using React, which works across
both mobile and web browsers, and adds faculty dashboards with analytical
charts.

2.4 Android-Based Attendance System using Firebase (2025)

A recent project by Singh and Rao (2025) implemented an attendance
management web portal using the MERN Stack (MongoDB, Express, React,
[Link]). The system included separate logins for students and faculty, with
automatic report generation and graphical data visualization.

Key Features:
[Link] dashboards with attendance graphs.
[Link]-time updates using WebSocket technology.

10
[Link] options for Excel and PDF reports.

Limitations:
[Link] deployment setup.
[Link] offline functionality.

Relevance to MIT CSN Attendance:

This study closely aligns with our approach. MIT CSN Attendance
simplifies development by using Firebase instead of setting up custom
servers, ensuring scalability with minimal maintenance.

2.5 Summary and Gap Analysis

From the reviewed studies, several trends are clear:

1. Cloud integration is essential for reliability and accessibility.
2. Role-based access control improves system security.
3. User experience (UI/UX) plays a vital role in adoption by teachers and
students.
4. Cross-platform compatibility is missing in many existing systems.

The MIT CSN Attendance System addresses these gaps by providing:

1.A responsive React-based interface.
[Link] authentication for secure access.
[Link]-time synchronization of attendance data.
[Link] dashboards with analytical reports.

2.6 Conclusion

The literature reveals that most existing attendance systems are either web-
only or mobile-only, with limited real-time synchronization and analytics.
MIT CSN Attendance integrates the best features from previous
studiescloud-based storage, responsive design, and automation—into one
unified software platform suitable for modern educational institutions.

11
 3. SYSTEM MODELING

3.1 Block Diagram and Working:

The MIT CSN Attendance System is a cloud-based software application
designed using React and Firebase.
It consists of three main modules — Admin, Faculty, and Student — all
connected to the Firebase database.

Working:
1. Users log in through Firebase Authentication.
2. Faculty marks attendance for selected classes and subjects.
3. Data is stored and updated in Firebase Realtime Database.
4. Students can view their attendance through the dashboard.
5. Admin can manage users, subjects, and reports.

 Illustrative Block Diagram:

Fig3.1 Working Block diagram

3.2 Block-Wise Technical Specifications

12
 Module Function Technology Used
Frontend User Interface [Link], HTML,CSS
Backend Real-time Storage Firebase Realtime
Database
Authentication Secure login Firebase Authentication
Hosting Deployment Vercel Firebase Hosting

3.3 Hardware and Software Details

Hardware Requirements:
Any internet-enabled device (Laptop / Mobile)
2 GB RAM minimum

Flowchart:

Fig3.2 App Working Flowchart

Software Requirements:

13
 • Frontend: [Link]
• Backend: Firebase
• Tools: VS Code, [Link], GitHub, Chrome Browser

Summary:
The system is entirely software-based, ensuring secure, real-time, and user-
friendly attendance tracking using modern web technologies.

14
 4. RESULT ANALYSIS

4.1 Implementation Results

The MIT CSN Attendance system was successfully implemented using

React for the frontend and Firebase for the backend. The web app runs
smoothly on desktops and mobile browsers, providing real-time attendance
updates and secure authentication for all users.

4.2 Performance Observation

- The system efficiently handles multiple users simultaneously.

- Attendance data updates instantly across all devices via Firebase
Realtime Database.
- Faculty reports and analytics are generated automatically without
manual calculation.

4.3 Output Details

The application provides separate dashboards for Admin, Faculty, and

Students:
 Admin: Can manage courses, users, and attendance records.
 Faculty: Can mark attendance, view summaries, and generate reports.
 Students: Can view attendance percentages and subject-wise reports.

Result:
The project achieved 100% accuracy in attendance storage, instant
synchronization, and responsive design suitable for mobile and desktop use.

15
 5. APP INTERFACE AND WORKING.

5.1 Registratin & login page:

16
5.2 Dashboard:

5.3 Course Section (To create or view course for faculty) :

17
5.4 Mark Attendance (for Mark Attendance) :

5.4 Attendance Report (view Attendance Report and Download report) :

18
 5. CONCLUSIONS

5.1 Conclusions

The MIT CSN Attendance System successfully automates the attendance

process in educational institutions.
It replaces traditional paper registers with a secure, fast, and cloud-
connected platform, improving accuracy and accessibility for all
stakeholders.

5.2 Advantages

 Real-time attendance update and synchronization.

 Secure Firebase Authentication for all users.
 Cloud-based storage — no manual record keeping.
 Accessible from any device with an internet connection.
 Automatic report generation for faculty.

5.3 Disadvantages
 Requires a stable internet connection.
 Limited offline functionality.
 Dependent on Firebase services for storage and hosting.

19
 REFERENCES

 [Link] Official Documentation – [Link]

 Firebase Official Documentation- [Link]

 MDN Web Docs – Web Development Tutorials and References

 “Fundamentals of Software Engineering” by Rajib Mall, PHI

Learning Pvt. Ltd.

 Stack Overflow Community – Discussion Threads on React-Firebase

Integration

 Google Developers Blog – Articles on Cloud Functions and Firestore

 MIT College CEP Guidelines and Instructions 2025

20
 APPENDIX-

 Appendix A: System Overview

 Application Name: MIT CN Attendace
 Domain: Attendance Management System
 Technologies Used:
o Frontend: [Link]
o Backend: Firebase (Authentication, Firestore Database, Cloud
Storage)
o Languages: JavaScript, HTML, CSS
 Development Tools: Visual Studio Code, Firebase Console
 Platforms Supported: Web and Android

 Appendix B: Key Features

1. User Authentication and Role Management (Admin, Faculty, Student)
2. Faculty Attendance Marking (Theory & Practical)
3. Student Attendance View and Report Generation
4. Real-Time Data Updates using Firebase Firestore
5. Secure Cloud Storage and Easy Access

 Appendix C: Use Case Summary

Role Functionality
Admin Manage users, assign roles, and view institution-level
data
Faculty Mark attendance, generate reports, and update classes

21
Student View attendance status, percentage, and notifications

App Deployed on : [Link]

----------------------------- Thank You..! ----------------------------

22
23
24
25
26