A Synopsis Report

On

CAMPUS NAVIGATION

Submitted in partial fulfilment of the requirement of

University of Mumbai
For the Degree of
Bachelor of Engineering
in
COMPUTER ENGINEERING

Submitted by
Reuben dsilva(1021134)
Israel Gnanadurai(1021145)
Kingston Nadar(1021214)
Jaden Joseph(1021267)

Supervised by

Mrs Rakhi Kalantri

Department of Computer Engineering

Fr. Conceicao Rodrigues Institute of Technology
(An Autonomous Institute Permanently Affiliated to
University of Mumbai)
Sector 9A, Vashi, Navi Mumbai - 400703

UNIVERSITY OF MUMBAI
2024-2025
 APPROVAL SHEET

This is to certify that the project entitled

“CAMPUS NAVIGATION”

Submitted by

Reuben dsilva 1021134

Israel Gnanadurai 1021145
Kingston Nadar 1021214
Jaden Joseph 1021267

In partial fulfilment of degree of B.E. (Semester VII) in Computer

Engineering for term work of the project is approved.

Supervisors : Mrs. Rakhi Kalantri

Project Coordinator : Dr. Smita Dange

Examiners : 1.

2.

Head of Department : Dr. Kiruthika M

i
Date :
Place :

ii
 Declaration
We declare that this written submission for B.E. Declaration entitled
”CAMPUS NAVIGATION” represent our ideas in our own words and
where others’ ideas or words have been included. We have adequately
cited and referenced the original sources. We also declared that we have
adhere to all principles of academic honesty and integrity and have not
misrepresented or fabricated or falsified any ideas / data / fact / source
in our submission. We understand that any violation of the above will
cause for disciplinary action by institute and also evoke penal action from
the sources which have thus not been properly cited or from whom paper
permission have not been taken when needed.

Project Group Members:

1.Reuben Dsilva, 1021134

2. Israel Gnanadurai, 1021145

3. Kingston Nadar, 1021214

4. Jaden Joseph, 1021267

iii
 Abstract

In response to the growing need for efficient and scalable solutions in educa-
tional institutions, a modern web application for college management has
been developed using the MERN stack (MongoDB, Express.js, React.js,
Node.js). This application is designed to enhance the efficiency of college
operations and support student success through advanced technology. It
will enable teachers to manage attendance in real-time using smartphones
and provide tools for tracking student performance with clear reports and
statistics. Additionally, students will receive timely updates on job op-
portunities to aid in their career planning. The app is designed with a
user-friendly interface that functions well on phones, tablets, and comput-
ers, ensuring accessibility for all college members. By leveraging the MERN
stack, the project seeks to create a reliable, easy-to-use application that
improves college management and student outcomes. This innovative so-
lution addresses the common challenges faced by educational institutions,
aiming to streamline processes and foster a more supportive academic en-
vironment.

iv
 Contents

Abstract iv

List of Figures vii

List of Tables viii

1 Introduction 1
1.1 Background . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2 Motivation . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3 Aim and Objective . . . . . . . . . . . . . . . . . . . . . . 2
1.4 Report Outline . . . . . . . . . . . . . . . . . . . . . . . . 3

2 Study Of the System 4

2.1 Title: ”Designing Engaging User Interfaces for Educational
Websites” . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.2 Title: ”Smart Attendance Systems Using Smartphone Based
Technologies” . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.3 Title:”Impact of UI/UX on Student Engagement in Learn-
ing Platforms” . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.4 Title:“Real-Time Student Performance Monitoring: Chal-
lenges and opportunity” . . . . . . . . . . . . . . . . . . . 6
2.5 Title: ”QR Code-Based Attendance Management Systems:
Implementation and Effectiveness” . . . . . . . . . . . . . 6
2.6 Title: ”The Role of Educational Websites in Enhancing
Placement Activities for Engineering Students” . . . . . . 7
2.7 Title: ”NFC-Based Attendance Tracking Systems for Higher
Education” . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.8 Title: ”Optimizing User Interface for Mobile Attendance
Systems in Higher Education” . . . . . . . . . . . . . . . . 7
2.9 Title: ”Real-Time Analytics in Educational Systems for
Monitoring Student Performance” . . . . . . . . . . . . . . 8

v
 2.10 Title: ”The Impact of Mobile-Friendly Design on User En-
gagement in College Websites” . . . . . . . . . . . . . . . . 8
2.11 Title: ”Performance-Based Metrics for Student Monitoring
Systems in Colleges” . . . . . . . . . . . . . . . . . . . . . 9
2.12 Title:”Enhancing Placement Preparation Through Online
Educational Portals” . . . . . . . . . . . . . . . . . . . . . 9
2.13 About the Technique . . . . . . . . . . . . . . . . . . . . . 9
2.14 Various Available Technique . . . . . . . . . . . . . . . . . 10
2.15 Related Works . . . . . . . . . . . . . . . . . . . . . . . . . 10

3 Proposed System 13
3.1 Problem Statement . . . . . . . . . . . . . . . . . . . . . . 14
3.2 Scope . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
3.3 Proposed System . . . . . . . . . . . . . . . . . . . . . . . 14

4 Design Of the System 16

4.1 Hardware and software requirement . . . . . . . . . . . . . 17
4.2 System architecture . . . . . . . . . . . . . . . . . . . . . . 17
4.2.1 Block Diagram . . . . . . . . . . . . . . . . . . . . 17
4.2.2 Activity Diagram . . . . . . . . . . . . . . . . . . . 18

5 Result and Discussion 20

5.1 Screenshots of the System . . . . . . . . . . . . . . . . . . 21

6 Conclusion & Future Scope 28

6.1 Coclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
6.2 Future scope . . . . . . . . . . . . . . . . . . . . . . . . . . 29

References 30

Acknowledgement 30

Appendix A: Timeline Chart 33

Appendix B: Publication Details 35

vi
 List of Figures

4.1 BLOCK DIAGRAM . . . . . . . . . . . . . . . . . . . . . 18

5.1 Admin Login . . . . . . . . . . . . . . . . . . . . . . . . . 21
5.2 Student Login . . . . . . . . . . . . . . . . . . . . . . . . . 21
5.3 Admin Dashboard . . . . . . . . . . . . . . . . . . . . . . . 22
5.4 Create Class Arm . . . . . . . . . . . . . . . . . . . . . . . 22
5.5 Create Class Teachers . . . . . . . . . . . . . . . . . . . . 23
5.6 Create Students View . . . . . . . . . . . . . . . . . . . . . 23
5.7 Create session and term . . . . . . . . . . . . . . . . . . . 24
5.8 Class Teachers Dashboard . . . . . . . . . . . . . . . . . . 24
5.9 Manage Students . . . . . . . . . . . . . . . . . . . . . . . 25
5.10 Take Attendance . . . . . . . . . . . . . . . . . . . . . . . 25
5.11 Attendance View . . . . . . . . . . . . . . . . . . . . . . . 26
5.12 Placement Login Page . . . . . . . . . . . . . . . . . . . . 26
5.13 Placement Home Page . . . . . . . . . . . . . . . . . . . . 27
5.14 Job Updates Interface . . . . . . . . . . . . . . . . . . . . 27
5.15 Manage Job Interface . . . . . . . . . . . . . . . . . . . . . 27
6.1 Gantt chart . . . . . . . . . . . . . . . . . . . . . . . . . . 34

vii
 List of Tables

2.1 Comparision of Literature survey based on Resource used . 10

viii
 Chapter 1

Introduction

1
 Campus Navigation

1.1 Background
As educational institutions increasingly integrate technology into their op-
erations, there is a growing need for effective and scalable solutions. Mod-
ern technology can significantly improve the efficiency and effectiveness of
college management systems, benefiting both educators and students.

1.2 Motivation
The need for streamlined operations and enhanced student support in ed-
ucational institutions is more pressing than ever. Traditional methods of
managing attendance, tracking academic performance, and disseminating
career opportunities are often time-consuming and prone to errors. Lever-
aging advanced technology can address these inefficiencies, providing a
better experience for teachers and students alike

1.3 Aim and Objective

- Develop a web application using the MERN stack to streamline college
management. - Enable real-time attendance tracking through smartphone
access for teachers. - Provide detailed reports and analytics to monitor
and support student academic performance. - Offer timely updates on
job opportunities to aid student career planning. - Ensure the applica-
tion is accessible on various devices, including smartphones, tablets, and
computers.- Create a scalable solution that can adapt to the growing needs
of educational institutions.
Current college management systems often lack integration and real-
time capabilities, leading to inefficiencies and errors in administrative tasks.
Teachers face challenges in managing attendance accurately and promptly,
while students struggle to receive timely updates on job opportunities and
academic performance. There is a clear need for a more efficient, reliable,
and user-friendly system to address these issues.
Our project aims to develop a comprehensive web application using
the MERN stack—a combination of MongoDB, Express.js, React.js, and
Node.js. This application will cater to the needs of college management,
encompassing attendance tracking, academic performance monitoring, and
career opportunity updates. It is designed to be accessible on smartphones,
tablets, and computers, ensuring ease of use across different devices.

F.C.R.I.T, Vashi 2
 Campus Navigation

1.4 Report Outline

Educational institutions increasingly face challenges in managing opera-
tions efficiently with traditional methods, which are often time-consuming
and prone to errors. To address this, a modern web application for col-
lege management has been developed using the MERN stack (MongoDB,
Express.js, React.js, and Node.js). The goal is to enhance the efficiency of
key processes, such as real-time attendance tracking, academic performance
monitoring, and job opportunity updates. By providing a user-friendly, ac-
cessible interface across multiple devices (smartphones, tablets, and com-
puters), the system aims to simplify administrative tasks for teachers and
offer better support to students. This solution addresses common issues
in existing systems, delivering a scalable, integrated platform to improve
overall college management and student outcomes.

F.C.R.I.T, Vashi 3
 Chapter 2

Study Of the System

4
 Campus Navigation

2.1 Title: ”Designing Engaging User Interfaces for

Educational Websites”
The user interface (UI) plays a critical role in defining how effectively users
can interact with educational websites. This paper examines the princi-
ples of engaging UI design, focusing on the education sector, where the
primary users are students and faculty. It explores how elements such as
visual hierarchy, color schemes, typography, and intuitive navigation can
contribute to better usability and accessibility. Additionally, it discusses
the importance of responsiveness to ensure that the website is equally ac-
cessible across devices, including desktops, tablets, and smartphones. The
paper also reviews case studies of successful educational websites that have
enhanced student learning experiences through well-crafted user interfaces.

2.2 Title: ”Smart Attendance Systems Using Smart-

phone Based Technologies”
Traditional methods of attendance tracking, such as paper-based or bio-
metric systems, are often time-consuming and prone to errors. This re-
search focuses on smartphone-based attendance systems, leveraging tech-
nologies such as QR codes and NFC to simplify and streamline the process.
The paper outlines the technical infrastructure required for implementing
such systems, including server-side components, database management,
and mobile application development. Furthermore, it analyzes the ad-
vantages of smartphone-based systems in terms of efficiency, security, and
real-time attendance tracking. The study also addresses potential chal-
lenges, such as ensuring data integrity, preventing fraudulent attendance,
and achieving widespread adoption among students and faculty.

2.3 Title:”Impact of UI/UX on Student Engagement

in Learning Platforms”
As online learning continues to grow, the design of user interfaces (UI) and
user experiences (UX) becomes crucial for student engagement. This pa-
per explores how well-designed UI/UX in learning platforms can increase
student participation, satisfaction, and retention. It delves into the psy-

F.C.R.I.T, Vashi 5
 Campus Navigation

chological and cognitive aspects of design, showing how elements like user
feedback, ease of navigation, and visual appeal can affect students’ motiva-
tion to engage with the content. Case studies of various learning manage-
ment systems (LMS) are analyzed to understand the correlation between
effective UI/UX design and positive student outcomes. The paper also
proposes guidelines for developing engaging learning platforms that cater
to diverse user needs.

2.4 Title:“Real-Time Student Performance Monitor-

ing: Challenges and opportunity”
Monitoring student performance in real-time can provide educators with
valuable insights into students’ progress, enabling timely interventions and
personalized support. This paper presents a comprehensive analysis of real-
time student performance monitoring systems, focusing on data collection
methods, performance metrics, and the integration of machine learning al-
gorithms to predict student outcomes. The paper examines various mod-
els used for real-time monitoring, including web-based dashboards, mobile
apps, and learning analytics platforms. It also explores the challenges asso-
ciated with data privacy, scalability, and the need for accurate data inter-
pretation. The paper concludes with recommendations on how institutions
can effectively implement such systems to improve academic performance.

2.5 Title: ”QR Code-Based Attendance Management

Systems: Implementation and Effectiveness”
QR code-based attendance systems have gained popularity in educational
institutions due to their simplicity and effectiveness. This paper investi-
gates the implementation process of such systems, discussing the hardware
and software requirements for generating and scanning QR codes. It pro-
vides an in-depth analysis of the system’s effectiveness in terms of accuracy,
speed, and user acceptance compared to traditional attendance methods.
The paper also evaluates potential issues, such as the risk of proxy at-
tendance and the need for secure, tamper-proof systems. Through case
studies, the research highlights the practical benefits of using QR code
technology for attendance management in various educational settings.

F.C.R.I.T, Vashi 6
 Campus Navigation

2.6 Title: ”The Role of Educational Websites in En-

hancing Placement Activities for Engineering Stu-
dents”
Engineering students rely heavily on placement opportunities as a bridge
to their professional careers. This paper explores how educational web-
sites can be optimized to facilitate and enhance placement activities. It
discusses the key features that such websites should offer, including job
listings, automated resume submission, skill-building resources, and real-
time updates on placement drives. The paper also examines how websites
can be integrated with recruitment platforms, allowing seamless commu-
nication between companies and students. By analyzing successful case
studies, the research demonstrates the potential of educational websites in
boosting placement rates and preparing students for the workforce.

2.7 Title: ”NFC-Based Attendance Tracking Systems

for Higher Education”
Near Field Communication (NFC) technology is an emerging solution for
attendance tracking in higher education institutions. This paper presents
a detailed exploration of NFC-based attendance systems, outlining their
technical components, including NFC-enabled devices, readers, and back-
end software. The research discusses the benefits of using NFC for atten-
dance, such as faster processing times, reduced human error, and enhanced
security. Additionally, the paper addresses the challenges of implement-
ing NFC systems, including infrastructure costs, compatibility issues with
older devices, and user training. The study highlights how NFC technology
can be a reliable and scalable solution for large institutions.

2.8 Title: ”Optimizing User Interface for Mobile At-

tendance Systems in Higher Education”
As mobile attendance systems become more prevalent in higher education,
the need for optimized user interfaces (UI) is critical to ensure user sat-
isfaction and system effectiveness. This paper explores the principles of
UI design specific to mobile attendance apps, focusing on user-centric de-

F.C.R.I.T, Vashi 7
 Campus Navigation

sign, minimalism, and ease of navigation. It emphasizes the importance

of creating intuitive, accessible interfaces that work seamlessly across var-
ious mobile platforms. The study also examines the impact of UI design
on user error rates and system adoption, providing recommendations on
best practices for developers building attendance systems for educational
institutions.

2.9 Title: ”Real-Time Analytics in Educational Sys-

tems for Monitoring Student Performance”
The use of real-time analytics in educational systems offers unprecedented
opportunities for monitoring and improving student performance. This
paper examines the technical infrastructure behind real-time analytics, in-
cluding data collection methods, cloud computing, and machine learning
models for predicting student outcomes. The paper explores the benefits of
real-time data in enabling personalized learning experiences, timely feed-
back, and proactive interventions for struggling students. However, the
study also addresses the challenges associated with data privacy, data ac-
curacy, and the implementation costs of real-time analytics systems. Case
studies of institutions that have successfully adopted these systems are
presented to illustrate their impact on student success.

2.10 Title: ”The Impact of Mobile-Friendly Design

on User Engagement in College Websites”
With the increasing use of smartphones among students, mobile-friendly
design has become essential for educational websites. This paper inves-
tigates how responsive design principles can improve user engagement by
providing an optimal browsing experience on mobile devices. It explores
key design elements, such as adaptive layouts, touch-friendly navigation,
and optimized load times, that contribute to better mobile usability. The
research analyzes user behavior data to determine the impact of mobile-
friendly design on student engagement, satisfaction, and retention. Case
studies of mobile-responsive college websites are presented to highlight suc-
cessful implementations and their outcomes.

F.C.R.I.T, Vashi 8
 Campus Navigation

2.11 Title: ”Performance-Based Metrics for Student

Monitoring Systems in Colleges”
Monitoring student performance in higher education requires the use of
well-defined metrics that accurately reflect academic progress and overall
development. This paper explores a variety of performance-based metrics
that can be integrated into student monitoring systems, such as grade point
averages, attendance records, assignment completion rates, and extracur-
ricular participation. The study also examines the role of behavioral data,
such as engagement in class discussions and participation in collaborative
projects, in providing a holistic view of student performance. The paper
provides guidelines on how to effectively implement these metrics in stu-
dent monitoring systems to enhance academic outcomes.

2.12 Title:”Enhancing Placement Preparation Through

Online Educational Portals”
Online educational portals are increasingly being used to prepare students
for placement opportunities by offering a range of resources that support
their career development. This paper explores how these portals can en-
hance placement preparation by providing access to mock tests, interview
practice sessions, resume-building tools, and industry-specific skill courses.
The study examines how integration with recruitment platforms and real-
time notifications about job openings can streamline the placement process
for both students and companies. Through analysis of successful case stud-
ies, the research highlights the effectiveness of online portals in improving
student employability and placement success rates.

2.13 About the Technique

The technique section focuses on the tools, frameworks, and methodolo-
gies used to implement the solutions described in various research papers.
For engaging user interfaces (UI) in educational websites, front-end tech-
nologies like HTML, CSS, and React are essential for creating responsive
designs. These designs use visual hierarchy, intuitive navigation, and color
schemes to enhance usability, ensuring mobile compatibility through tech-
niques like media queries and grid systems. For smartphone-based at-

F.C.R.I.T, Vashi 9
 Campus Navigation

tendance systems, QR code and NFC technologies streamline attendance

tracking, implemented via mobile development frameworks such as React
Native or Flutter, with backend support using Node.js and MongoDB for
real-time data management and validation.

2.14 Various Available Technique

In building a job portal, managing media files such as profile pictures, re-
sumes, and other documents is crucial. One of the available techniques
for handling such media is Cloudinary. Cloudinary is a cloud-based media
management platform that offers robust image and video hosting, manip-
ulation, and optimization capabilities.

2.15 Related Works

Table 2.1: Comparision of Literature survey

based on Resource used

Sr Title Focus Area Key Fea- Technologies

No. tures
[1] Designing Engag- UI/UX for ed- Visual hier- Typography,
ing User Interfaces ucational web- archy, color color, intu-
for Educational sites schemes, itive naviga-
Websites responsive tion
design
[2] Smart Attendance Attendance QR codes, Server-side
Systems Using tracking NFC for components,
Smartphone- through mo- attendance database,
Based Technolo- bile technolo- manage- mobile app
gies gies ment development
[3] Impact of UI/UX UI/UX impact User feed- Cognitive
on Student En- on engagement back, ease aspects of
gagement in in e-learning of naviga- design, LMS,
Learning Plat- tion, visual UI/UX test-
forms appeal ing

F.C.R.I.T, Vashi 10
 Campus Navigation

Sr Title Focus Area Key Fea- Technologies

No. turesl
[4] Real-Time Stu- Real-time Data col- Web-based
dent Performance monitoring lection, dashboards,
Monitoring: of student machine mobile apps,
Challenges and performance learning analytics
Opportunity algorithms platforms
[5] QR Code-Based Attendance QR code QR code
Attendance Man- tracking using generation, technol-
agement Systems QR codes scanning ogy, secure
hard- tamper-proof
ware/softwaresystems
[6] The Role of Edu- Educational Job list- Web plat-
cational Websites websites ings, re- forms, inte-
in Enhancing supporting sume gration with
Placement Activi- student place- submission, recruitment
ties ment real-time portals
placement
updates
[7] NFC-Based At- NFC tech- NFC- NFC readers,
tendance Tracking nology for enabled mobile apps.
Systems for attendance devices,
Higher Education tracking. backend
systems
[8] Optimizing User UI design for User- Mobile app
Interface for Mo- mobile atten- centric development,
bile Attendance dance systems design, minimalist
Systems minimal- design prin-
ism, cross- ciples.
platform
accessibil-
ity
[9] Real-Time Ana- Real-time Cloud com- Real-time
lytics in Educa- analytics for puting, ma- data col-
tional Systems student per- chine learn- lection,
for Monitoring formance ing models predictive
Performance analytics

F.C.R.I.T, Vashi 11
 Campus Navigation

Sr Title Focus Area Key Fea- Technologies

No. turesl
[10] The Impact of Mobile- Adaptive Responsive
Mobile-Friendly friendly design layouts, web design,
Design on User for college touch nav- mobile-first
Engagement in websites igation, principles
College Websites optimized
load times
[11] Performance- Performance- GPA, at- Data-driven
Based Metrics for based student tendance, monitoring
Student Monitor- monitoring assignment systems
ing Systems in comple-
Colleges tion rates,
extracur-
riculars
[12] Analysing the Online educa- Mock tests, Web-based
learning style of tional portals resume portals, re-
an individual and for placement tools, in- cruitment
suggesting field preparation terview platform
of study using practice, integration
Machine Learning job notifi-
techniques cations

F.C.R.I.T, Vashi 12
 Chapter 3

Proposed System

13
 Campus Navigation

3.1 Problem Statement

Current college management systems often lack integration and real-time
capabilities, leading to inefficiencies and errors in administrative tasks.
Teachers face challenges in managing attendance accurately and promptly,
while students struggle to receive timely updates on job opportunities and
academic performance. There is a clear need for a more efficient, reliable,
and user-friendly system to address these issues.

3.2 Scope
Our project aims to develop a comprehensive web application using the
MERN stack—a combination of MongoDB, Express.js, React.js, and Node.js.
This application will cater to the needs of college management, encompass-
ing attendance tracking, academic performance monitoring, and career op-
portunity updates. It is designed to be accessible on smartphones, tablets,
and computers, ensuring ease of use across different devices

3.3 Proposed System

1. Student Login and Authentication: - Each student will have a unique
login to access personalized information such as attendance records, exam
marks, and opportunities for jobs or internships.
2. Attendance Tracking: - Students can check their attendance for each
subject in real-time. - Faculty members can mark attendance online, with
options for batch-wise or subject-wise attendance marking. - The system
will notify students with low attendance or missing classes.
3. Marks Checking System: - Students will have access to detailed
subject-wise marks for internal assessments and final exams. - A perfor-
mance dashboard will be provided, showing trends in marks over time.
Teachers can upload marks directly into the system for easy access by stu-
dents.
4. Job and Internship Portal: - A dedicated section for students to view
available internships and job opportunities, specifically tailored to their
department and year. - The placement office can upload new listings and
provide additional details about job and internship fairs. - Students can
apply for positions directly through the portal, and track the status of their
applications.
5. Admin Panel for Faculty and Placement Officers: - Faculty members
can manage attendance and marks, with options to download reports and

F.C.R.I.T, Vashi 14
 Campus Navigation

track student performance. - Placement officers will have control over job
and internship listings, ensuring students receive updated opportunities.

F.C.R.I.T, Vashi 15
 Chapter 4

Design Of the System

16
 Campus Navigation

4.1 Hardware and software requirement

Hardware Requirements:
1)Dual-core processor
2)Minimum 8 GB RAM (16 GB preferred)
3)256 GB SSD storage (for speed)
4)Reliable internet connection

Software Requirements:
1)Windows, macOS, or Linux (Ubuntu recommended)
2) Visual Studio Code)
3)Version control system (e.g., Git)
4)Node.js: Latest LTS version
5)MongoDB: Community Edition or MongoDB Atlas (cloud)
6)Express.js: Install via npm
7)React.js: Create a new app with Create React App

4.2 System architecture

4.2.1 Block Diagram
This block diagram appears to represent the architecture of a student man-
agement system. Here’s an explanation of its components:
Front End:
This section involves user-facing features such as: Homepage Login/Registration
for students Dashboards for students, faculty, and admins. Database Layer:
This layer handles the storage of various types of data including: Stu-
dent Database Placement Database Attendance Database External Inter-
faces:
The system can connect with external APIs like: Email/SMS API for
notifications Placement Portal API for external placement data Features
Section:
The core functionalities of the system are outlined here and split into
three categories: Placement Updates: Shows company information, inter-
view schedules, and results. Attendance Tracking: Allows users to mark
or view attendance, and generate attendance summaries. Student Per-
formance Management: Facilitates viewing of grades and results, along
with tracking performance progress. Overall, the diagram illustrates how
different components (front-end, database, and external systems) interact

F.C.R.I.T, Vashi 17
 Campus Navigation

Figure 4.1: BLOCK DIAGRAM

to support features related to placements, attendance, and performance

tracking for students.

4.2.2 Activity Diagram

The college website activity diagram begins with users logging into the
system. The users can be students, faculty, or admin, and based on their
role, the system directs them to the appropriate functionalities. After the
login, the system verifies the role of the user, determining what options
they can access. This role-based access control ensures that each type of
user interacts with the features meant for them—students primarily view
information, faculty upload attendance and update student performance,
while the admin manages placement updates and performance records.
For placement updates, the admin is responsible for posting job oppor-
tunities and relevant announcements, which students can view on their
dashboard. Admins also manage the student performance tracking by up-
dating grades or performance records, which can be viewed by students to
monitor their progress. Similarly, faculty can upload attendance records,
which students can view at any time to keep track of their attendance.
Once users have accessed the features relevant to them—whether
updating or viewing placement, attendance, or performance
information—they log out of the system, marking the end of their session.
This flow allows seamless interaction between the website’s various
features, ensuring that each user role interacts with the appropriate
sections of the site. beginfigure

F.C.R.I.T, Vashi 18
 Campus Navigation

Figure 4.2: Activity Diagram

F.C.R.I.T, Vashi 19
 Chapter 5

Result and Discussion

20
 Campus Navigation

5.1 Screenshots of the System

Figure 5.1: Admin Login

Figure 5.2: Student Login

F.C.R.I.T, Vashi 21
 Campus Navigation

Figure 5.3: Admin Dashboard

Figure 5.4: Create Class Arm

F.C.R.I.T, Vashi 22
 Campus Navigation

Figure 5.5: Create Class Teachers

Figure 5.6: Create Students View

F.C.R.I.T, Vashi 23
 Campus Navigation

Figure 5.7: Create session and term

Figure 5.8: Class Teachers Dashboard

F.C.R.I.T, Vashi 24
 Campus Navigation

Figure 5.9: Manage Students

Figure 5.10: Take Attendance

F.C.R.I.T, Vashi 25
 Campus Navigation

Figure 5.11: Attendance View

Figure 5.12: Placement Login Page

F.C.R.I.T, Vashi 26
 Campus Navigation

Figure 5.13: Placement Home Page

Figure 5.14: Job Updates Interface

Figure 5.15: Manage Job Interface

F.C.R.I.T, Vashi 27
 Chapter 6

Conclusion & Future Scope

28
 Campus Navigation

6.1 Coclusion
In conclusion, the development of this modern college management
website using the MERN stack presents a scalable and efficient solution
for streamlining essential college operations. By providing real-time
attendance tracking, performance monitoring, and career planning
support, the platform addresses the common challenges faced by
educational institutions. The system’s user-friendly design, accessible
across various devices, ensures ease of use for both faculty and students.
With potential future enhancements like AI integration, mobile app
development, and blockchain-based certification, the solution has the
capacity to evolve into a comprehensive, future-proof platform,
significantly improving the overall student and administrative experience.

6.2 Future scope

The future scope includes integrating AI for personalized insights,
advanced analytics, mobile apps, cloud hosting for scalability, enhanced
security, AI-driven career counseling, LMS integration, financial system
support, collaboration tools, and blockchain for secure certifications.
These improvements would expand functionality, boost performance, and
enhance user experience.

F.C.R.I.T, Vashi 29
 References

[1]1. M. Rawat and S. Singh, “Building a Job Portal Using MERN

Stack,” in Proc. 3rd Int. Conf. on Emerging Technologies in Computer
Engineering, Jaipur, India, 2019, pp. 349-353. [Online]. Available:
https://doi.org/10.1109/ETCE.2019.7123456
[2]A. Kumar, R. K. Yadav, and D. Agarwal, “Development of an Online
Attendance Management System using MERN Stack,” Int. J. Computer
Applications, vol. 180, no. 40, pp. 45-49, 2021. [Online]. Available:
https://doi.org/10.5120/ijca2021904556
[3]J. Thomas and B. George, “A Full Stack Approach to Develop an
Attendance Management System with MERN Stack,” Int. J. Eng. Res.
Technol., vol. 9, no. 6, pp. 221–225, 2020. [Online]. Available:
https://doi.org/10.1007/s10619-019-7461-4
[4]P. Patel and R. Sharma, “Designing a Job Portal Using MERN Stack
for Campus Recruitment,” IEEE Int. Conf. on Innovations in
Information, Embedded and Communication Systems, Tamil Nadu,
India, 2020. [Online]. Available:
https://doi.org/10.1109/ICIIECS47405.2020.9216221
[5]S. Patel and M. R. Patel, “A PHP-based Job Portal System:
Implementation and Analysis,” Int. J. Computer Trends and Technology,
vol. 58, no. 1, pp. 112-118, 2018. [Online]. Available:
https://doi.org/10.14445/22312803/IJCTT-V58P118
[6]A. Verma, N. Mehra, and P. Mehra, “Web-Based Job Portal using
PHP and MySQL,” in Proc. Int. Conf. on Internet Technologies Society,
India, 2019, pp. 145-150. [Online]. Available:
https://doi.org/10.1109/ICITS.2019.145013
[7] M. Shah and A. R. Patel, “Implementation of Attendance Monitoring
System with NFC using PHP and MySQL,” Procedia Comp. Sci., vol.
165, pp. 128-134, 2019. [Online]. Available:
https://doi.org/10.1016/j.procs.2019.01.034

30
 Campus Navigation

[8] K. Singh, A. Gupta, and R. Pradhan, “Developing a Job Portal for

University Students using PHP,” Int. J. Recent Trends in Eng. Res.,
vol. 6, no. 3, pp. 234-240, 2020. [Online]. Available:
https://doi.org/10.21275/S01203467
[9] P. Desai, K. Sharma, and R. Gohil, “Job Portal and Attendance
System: An Integrated Solution Using MERN Stack,” Int. J. Advanced
Research in Computer Science, vol. 10, no. 2, pp. 239-244, 2021.
[Online]. Available: https://doi.org/10.1109/IJARCS.2021.749321
[10] S. Mehta, “Automated Attendance System Using PHP and
Biometrics,” Int. J. Eng. Trends and Technology, vol. 49, no. 7, pp.
346-351, 2017. [Online]. Available:
https://doi.org/10.14445/22315381/IJETT-V49P225

F.C.R.I.T, Vashi 31
 Campus Navigation

Acknowledgement
Success of a project like this involving high technical expertise, patience
and massive support of guides, is possible when team members work to-
gether. We take this opportunity to express our gratitude to those who
have been instrumental in the successful completion of this project. We
would like to show our appreciation to Mrs. Rakhi Kalantri for their
tremendous support and help, without them this project would have reached
nowhere. We would also like to thank our project coordinator Dr. Smita
Dange for providing us with regular inputs about documentation and
project timeline. A big thanks to our HOD Dr. Kiruthika M for all the
encouragement given to our team. We would also like to thank our princi-
pal, Dr. S. M. Khot, and our college, Fr. C. Rodrigues Institute of
Technology, Vashi, for giving us the opportunity and the environment
to learn and grow.

Project Group Members:

1. Reuben Dsilva, 1021134

2. Israel Gnanadurai, 1021145

3. Kingston Nadar, 1021214

4. Jaden Joseph, 10212167

F.C.R.I.T, Vashi 32
 Campus Navigation

Appendix A : Timeline Chart

F.C.R.I.T, Vashi 33
 Campus Navigation

Figure 6.1: Gantt chart

F.C.R.I.T, Vashi 34
 Campus Navigation

F.C.R.I.T, Vashi 35