CHAPTER:-1

INTRODUCTION

In modern academic environments, efficiently organizing and managing co-

curricular and extracurricular activities is essential. Manual handling of
college events often results in miscommunication, data loss, and
uncoordinated scheduling. With the increasing volume of events like
seminars, workshops, sports, and cultural fests, a centralized digital platform
becomes necessary.
The proposed project, College Activity System, is a web-based application
developed using the MERN stack (MongoDB, Express.js, React.js, and
Node.js). The system enables role-based access where:
Admins can add, edit, approve, and manage events.
Teachers and Students can log in and view only approved activities relevant
to them.
Admins can also declare competition winners and runner-ups, send
notifications, and view all event records.
React.js enables a dynamic and responsive frontend, while Node.js with
Express handles backend operations and REST APIs. MongoDB serves as the
scalable NoSQL database, storing event details, users, notifications, and
results. The system includes search and filtering, calendar integration, and
real-time notifications using Socket.IO.
This project delivers a secure, user-friendly, and scalable solution for
academic institutions to streamline their event workflows, improve
communication, and ensure better participation and tracking.
 1. INDROCTION

1.1 OVERVIEW

The College Activity System is a web-based solution designed to manage

academic, cultural, and sports activities conducted within a college
environment. It simplifies the process of event creation, approval,
notification, and result declaration by providing a centralized platform
accessible to Admins, Teachers, and Students. The system streamlines
communication between stakeholders, ensures timely dissemination of
information, and maintains historical records of all institutional activities.
With responsive UI and modern technology, the platform enhances user
experience while ensuring administrative efficiency.

1. INDROCTION
 1.2 Problem Definition

In most educational institutions, event-related information is often handled

manually or through fragmented digital tools like emails, notice boards, or
spreadsheets. This leads to issues such as:

 Delayed approvals and event communication

 Lack of role-based access or control

 Inability to track participation and results

 No centralized record of past events

 Difficulty in notifying stakeholders about changes or updates

These inefficiencies reduce student engagement, overburden faculty, and

hinder organized planning.
 1. INDROCTION

1.3 Proposed Solution

To address these issues, the proposed system offers a centralized digital

platform using the MERN stack. It includes:

 Role-based dashboards: Admin, Teacher, Student

 Activity Management: Create, edit, approve, and delete events

 Winner/Result Module: For competitions with runner-up declaration

 Real-time Notifications: Alerts via Socket.IO

 Calendar View: Activities shown by date

 Search & Filtering: By title, category, or date

 Authentication: JWT-based secure login system

The system ensures improved transparency, automation, and engagement

within the campus ecosystem.
 1. INDROCTION

1.4 Scope of the Project

This project covers the end-to-end flow of event handling in a college setup:

 User registration/login with role identification

 Activity listing and approval mechanism

 Result declaration for competitions

 Notification system to alert users in real time

 Responsive web interface compatible across devices

 Future integration support for email/SMS notifications and mobile

apps

The solution is scalable and adaptable, making it suitable for

implementation in various academic institutions with minimal
configuration.

CHAPTER:-2
 LITERATURE SURVEY

2.1 Concept & Theory

A College Activity Management System is an organized platform designed to

facilitate the management and dissemination of academic, technical, and
cultural activities in educational institutions. It reduces the manual overhead
involved in organizing events and ensures better communication among
students, teachers, and administrators. The system also maintains historical
records of events and improves engagement by providing timely
notifications.

2. LITERATURE SURVEY
2.2 Technologies Used

To build a modern and scalable solution, the following technologies are

used:

React.js – For building the dynamic and responsive frontend interface.

Node.js & Express.js – To manage backend APIs and server-side logic.

MongoDB – A NoSQL database used to store user details, activity data,

and competition results.

Socket.IO – To enable real-time notifications.

Tailwind CSS – For a consistent, mobile-responsive design.

JWT & Bcrypt.js – For authentication and secure password

management.

2.LITERATURE SURVEY
 2.3 Tools Used

The following tools are used in the creation and testing of the Stock
Management System:

 The main code editor, Visual Studio Code, supports JavaScript, React,
and other technologies.

 Git and GitHub are version control systems for managing changes to
source code and teamwork.

 Postman is an API testing tool used to confirm data connectivity and

backend routes.

 Chrome Developer Tools: For troubleshooting network requests and

frontend behavior.

 JavaScript dependencies can be installed and managed via npm/yarn, a

Node package management.

 Adobe XD or Figma (optional): For UI/UX design prototypes prior to

development.

2.LITERATURE SURVEY
 2.4 Other Requirements

Other non-functional and infrastructure-related requirements exist in

addition to the essential software and tools:
 Browser Compatibility: Chrome, Firefox, Edge, and other contemporary
browsers must all function properly on the system.

 Responsive design:-Should function flawlessly on mobile, tablet, and

desktop computers.

 Security: Role-based access and user authentication are provided by

JWT (JSON Web Token).

 Deployment Environment: A web server that hosts the frontend and

backend, such as Vercel, Netlify, or Heroku.

 Documentation: User guides and clear README files to help future

developers and end users.

 Testing Frameworks: Optional tools for unit and integration testing

include Jest and Mocha.

 Stable internet connectivity for hosting and accessing the web

application.
 A modern web browser like Google Chrome or Microsoft Edge.
 Compatibility across devices – desktops, tablets, and mobile phones.

CHAPTER:-3
 REQUIREMENT GATHERING

3.1Software Requirements

To develop and run the College Activity System efficiently, the following
software tools and frameworks are required:

Operating System: Windows 10 or higher / Linux / macOS

Frontend: React.js (with react-router and Tailwind CSS)

Backend: Node.js with Express.js

Database: MongoDB with Mongoose ODM

Package Manager: npm (Node Package Manager)

Development Tools: VS Code, Git, Postman, MongoDB Compass

Browser: Google Chrome, Edge (latest versions)

3. REQUIREMENT GATHERING
 3.2Hardware Requirements

Minimum System Setup Requirements for Testing and Development:

 Processor: Intel Core i3 or above

 RAM: 8 GB
 Storage: 256 GB SSD or more
 Monitor: Minimum 13-inch display
 Internet: Stable broadband connection (for real-time database and
cloud deployment)

Environment for Deployment (Optional):

 Frontend hosting: Netlify, Vercel

 Backend/API hosting options include Render, Heroku, or any VPS.

 MongoDB Atlas is used for database hosting (for cloud-hosted

MongoDB).

3. REQUIREMENT GATHERING
3.3Data Dictionary

The College Activity System consists of several core entities, each

represented as collections in the MongoDB database. These entities
contain key attributes that help structure, manage, and retrieve
relevant data efficiently.

User Collection

Each user in the system has a unique identifier (_id), along with
attributes like name, email, and password. The password is securely
hashed using Bcrypt. A role field is used to define the type of user —
which can be either “admin”, “teacher”, or “student”. The createdAt field
captures the date and time when the user account was registered.

Activity Collection

The Activity collection is central to the system. Each activity has a

unique ID, a title, and a description. It includes metadata like category
(e.g., Sports, Cultural, Seminar), date, time, and location. Organizer
details are captured using the organizerName and organizerEmail
fields. The status field indicates whether an activity is pending or
approved. Additionally, for competitions, the activity stores winner and
runnerUp as embedded objects containing names and emails. A
timestamp (createdAt) is also recorded when the activity is created.

Notification Collection

Notifications are used to alert users in real time. Each notification has a
unique identifier, a message string that contains the alert content, and a
reference to the userId who receives the notification. The createdAt
field notes when the notification was generated.

Result (Embedded in Activity)

The result of a competition is stored directly within the respective

activity document. It contains two fields: winner and runnerUp, both of
which include the name and email of the respective individuals.

3. REQUIREMENT GATHERING
 3.4 Identify Entities

Key tasks and actions defined in the system:

Admin:
 Login

 Add/Edit/Delete Activity

 Approve Activity

 Declare Winners

 Send Notifications

Student/Teacher:
 Login

 View Approved Activities

 Filter/Search Activities

 Receive Notifications
3. REQUIREMENT GATHERING
 3.5 Identify Tasks

The system is designed to perform a range of tasks based on the user’s role
— Admin, Teacher, or Student. Below is a summary of the key tasks
identified and implemented in the system.

Admin Tasks

1. Login: Secure login with role validation using JWT.

2. Dashboard Access: Redirected to the admin dashboard upon successful

login.

3. Add Activity: Fill a form with title, category, description, date, time,
location, and organizer details to create a new activity.

4. Edit/Delete Activity: Update or remove existing activities based on

changes or errors.

5. Approve Activity: Approve submitted activities to make them visible to

students and teachers.

6. Declare Winners: Add winner and runner-up details for competitions.

7. Send Notifications: Trigger real-time alerts to users when new activities
are approved or results are declared.

Student & Teacher Tasks

1. Login: Authenticate and access their respective dashboards.

2. View Activities: See only approved events relevant to them.

3. Filter/Search Events: Use search bar or filters by category/date to quickly

find relevant activities.

4. View Results: View winner and runner-up information for competitive

activities.

5. Receive Notifications: Get real-time alerts when events are approved or

updated.

These tasks form the functional backbone of the system, ensuring seamless
interaction between users and system modules. Each task is secured,
validated, and optimized for role-specific access.
 CHAPTER:-4
DESIGN

4.1 Use Case Model

 4. DESGIN

4.2 Use Case Description

The College Activity System involves three main actors: the Admin, the
Teacher, and the Student. Each actor interacts with the system in different
ways, performing actions relevant to their role.
The Admin is the central authority in the system. After logging in, the Admin
can access a dedicated dashboard where they can add new activities by
providing details such as title, description, category, date, time, and venue.
Admins can also view, edit, or delete activities. A crucial task for the Admin is
to approve activities, as only approved activities become visible to teachers
and students. Additionally, for events that involve competition, the Admin
has the authority to declare the winner and runner-up by entering their
names and contact information. The Admin can also send real-time
notifications that are instantly received by other users.
The Teacher logs in to their dashboard and can view all activities that have
been approved by the Admin. Teachers can browse through event listings,
search or filter based on categories like “Workshop”, “Seminar”, or “Sports”,
and view detailed event information. If the activity is a competition, they can
also view winner and runner-up information.
The Student has similar access as the Teacher. Upon logging in, the student
is redirected to their dashboard where they can see only the approved
activities. They can search and filter the activity list, view event details, and
receive real-time notifications when new events are approved or results are
declared.
Each use case supports the larger goal of streamlining event communication
and participation within the institution.

4. DESGIN
4.3Activity Diagram

4. DESGIN
4.4Sequence Diagram

4. DESGIN
4.5 Class Diagram

4. DESGIN
4.5 E R Diagram

4. DESGIN
4.6 Data FlowDiagram

Data flow (level 0):-

4. DESGIN
Data flow diagram (level 1):-

CHAPTER:-5
 IMPLEMENTATION & TESTING

5.1Implementation

The College Activity System has been developed using the MERN stack:

MongoDB – NoSQL database for storing users, activities, results, and

notifications.

 Express.js – Web framework for building REST APIs.

 React.js – Frontend library for building dynamic user interfaces.

 Node.js – Server-side JavaScript runtime environment.

System Modules Implemented:

1. Authentication & Authorization

 JWT-based login system

 Role-based redirection (Admin, Student, Teacher)

2. Admin Dashboard

 Add/Edit/Delete Activities

 Approve submitted activities

  Declare winners & runner-ups

 Real-time notifications using Socket.IO

3. Teacher & Student Dashboards

 View only approved activities

 Filter/search by category/date

 View event results (if applicable)

4. Notification System

 Socket-based real-time alert system

 Alerts when new activities are approved or winners are declared

5. Calendar Integration

 React Calendar to visualize events by date

 Activities displayed as badges on calendar

6. Responsive UI with Tailwind CSS

 Fully mobile-responsive and clean design

 Toastify used for success/error alerts

5. IMPLEMENTATION & TESTING

 5.2Testing Strategy Adopted

The application was tested using manual testing, Postman API testing, and
console-based unit validation.

Testing Types:

Unit Testing

Tested individual modules like login logic, activity creation, and role
checking

Integration Testing

Verified the complete flow (e.g., login → add activity → approve →

notification)

UI Testing

Ensured all components are responsive and functional across devices

Security Testing

Checked JWT authentication

Verified restricted access to admin-only routes

Tools Used

Postman – to validate API endpoints

Chrome DevTools – to debug and inspect frontend

Console logging – for backend response verification

Toastify – for user feedback messages

CHAPTER:-6
CONCLUSION
6.1 Conclusion

The College Activity System successfully achieves its goal of providing a

digital, role-based platform for managing college-level events and
competitions. By automating manual processes such as activity creation,
approval, notification dispatch, and result declaration, the system improves
event coordination and student engagement.

Project Achievements:

Secure login and role-based dashboards for Admin, Students, and Teachers

Activity creation, editing, approval, and status tracking

Winner and runner-up management for competitions

Real-time notifications using Socket.IO

Calendar view and category/date filtering

Clean, responsive frontend using React and Tailwind CSS

This system enhances institutional transparency, ensures event visibility for

stakeholders, and maintains centralized records for audit and reporting.
6. CONCLUSION
6.2 Limitation of Project
No image uploads for event posters or winner certificates

Email/SMS alerts are not integrated

No export options for activity reports or user logs

Admin-only control; lacks delegation features

6. CONCLUSION
6.3 Future Enhancement
To overcome the above limitations and further improve the system, the
following enhancements are suggested for future versions:
 Integration with Google Calendar or Outlook

 Email and SMS notification modules

 User profile editing and password reset

 Export data as PDF or Excel reports

 Push notifications via Firebase

 QR-based check-in for event participation

 Mobile app version for Android/iOS

Appendix A
Screenshort
 Appendix B

Bibliography
This bibliography lists books, websites, and online resources referenced
during the development and research of the Stock Management System.
1. Welling, Luke and Laura Thomson. PHP and MySQL Web Development.
Addison-Wesley Professional.
2. Freeman, Eric. Head First Design Patterns. O’Reilly Media.
3. W3Schools. "React JS Tutorial" – https://www.w3schools.com/react/
4. Mozilla Developer Network (MDN). "JavaScript Documentation" –
https://developer.mozilla.org/en-US/
5. Node.js Official Docs – https://nodejs.org/en/docs/
6. MongoDB Documentation – https://www.mongodb.com/docs/
7. React Documentation – https://reactjs.org/
8. Stack Overflow Developer Community – https://stackoverflow.com/
 Appendix C

Glossary Appendix
A glossary of technical terms used in the Stock Management System project:
 API (Application Programming Interface): A set of rules that allows
software applications to communicate with each other.
 CRUD: An acronym for Create, Read, Update, and Delete operations in a
database.
 Component: A reusable piece of UI in React.
 JWT (JSON Web Token): A secure way to transmit information between
parties as a JSON object, often used for authentication.
 Frontend: The part of the application users interact with directly.
 Backend: Server-side part of the application that handles business logic
and data.
 MongoDB: A NoSQL database used to store data in a document-
oriented structure.
 Express.js: A web application framework for Node.js, used for backend
API creation.
 Stock: The goods or merchandise kept on the premises of a business.
 Inventory: The complete list of items in stock.
 Appendix D

References
React JS Documentation – https://reactjs.org/
Node.js Documentation – https://nodejs.org/
MongoDB Atlas Documentation – https://www.mongodb.com/cloud/atlas
IEEE Research Articles on Inventory Systems
W3Schools React JS Guide – https://www.w3schools.com/react/
GeeksforGeeks – Tutorials on MERN stack development
YouTube tutorials on React CRUD applications
Postman Documentation – https://learning.postman.com/