PROJECT REPORT
ON
Project Collaboration Tool
ADVANCED WEB DESIGN FRAMEWORKS AND DEVELOPMENT
22CS402
BACHELOR OF ENGINEERING
In
COMPUTER SCIENCE AND ENGINEERING
Submitted by: Supervised By:
Ujwal Sharma Dr. Simarjit Kaur
2210992481 Associate Professor
Chitkara University
DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING
CHITKARA UNIVERSITY INSTITUTE OF ENGINEERING AND TECHNOLOGY
CHITKARA UNIVERSITY, PUNJAB, INDIA
1
CONTENTS
[Link]. Title Page No.
1. Declaration 3
2. Acknowledgement 4
3. Abstract 5
4. Introduction 6
5. Problem Statement 7
6. Methodology 7-8
7. Tools and Technologies 9
8. Implementation 10-14
9. Future Scope 15
10. Challenges Faced 16
11. Deployment and Hosting 17
12. Limitations 18
13. References 18
2
DECLARATION
I hereby declare that the project work titled, Project Collaboration Tool submitted as part of
Bachelor’s degree in CSE, at Chitkara University, Punjab, is an authentic record of my own work
carried out under the supervision of Dr. Simarjit Kaur .
Signature(s):
3
ACKNOWLEDGEMENT
It is my pleasure to be indebted to various people, who directly or indirectly contributed in the
development of this work and who influenced my thinking, behaviour, and acts during study.
I express my sincere gratitude to all for providing me an opportunity to undergo Web Project as the
part of the curriculum.
I am thankful to Dr Simarjit Kaur for her support, cooperation, and motivation provided to us
during the training for constant inspiration, presence .
Lastly, I would like to thank the almighty and my parents for their moral support and friends with
whom I shared our day-to day experience and received lots of suggestions that improve our quality
of work.
Ujwal Sharma
2210992481
4
ABSTRACT
In today’s fast-paced digital world, effective project collaboration has become essential for teams
to communicate, coordinate, and manage work efficiently. No matter where team members are
located, they need a platform to assign tasks, track progress, and stay updated in real time. Popular
tools like Jira, Trello, and Asana have transformed the way teams organize their projects and
collaborate. Inspired by these platforms, I decided to build my own project collaboration tool —
not to compete with them, but to learn and understand the technologies and logic behind such
applications.
The idea for this Project Collaboration Tool started with a simple thought: to create a centralized
space where teams can manage projects, assign tasks, track progress, and communicate effectively.
The goal was to focus on core functionalities that are essential for team productivity while keeping
the interface clean and user-friendly. My main aim was to emphasize functionality, user experience,
and the practical implementation of full stack technologies in a real-world scenario.
This platform allows users to register and log in securely, create and manage projects, assign tasks
to team members, and monitor task statuses. Users can also create teams, view team members, and
see the tasks assigned to them in a simple, organized interface. These essential features ensure
smooth collaboration and transparency among team members, while keeping the application
intuitive and easy to use.
Security and privacy were also a priority during development. User passwords are encrypted before
being stored in the database, and all communication between the client and server is secured using
token-based authentication (JWT). This guarantees that only authorized users can access or modify
sensitive project data.
The application was built using the MERN stack — MongoDB for data storage, [Link] and
[Link] for backend logic, and [Link] for the frontend interface. Through this project, I learned
how to integrate these technologies, manage APIs, and handle real-time updates for multiple users
in a full stack environment.
Overall, this Project Collaboration Tool is more than just a task management platform; it represents
a complete learning journey. It helped me understand modern web application architecture, how
data flows between frontend and backend, and how users interact with an application built from
scratch. In the future, this platform can be expanded with advanced features such as notifications,
project analytics, chat integration, and real-time collaboration tools.
5
INTRODUCTION
This Project Collaboration Tool is a web application developed using the MERN stack, which
includes MongoDB, [Link], [Link], and [Link]. The goal of this project is to provide teams
with a centralized platform where they can manage projects, assign and track tasks, collaborate
efficiently, and monitor overall progress. The idea behind this project was to build something that
feels familiar like popular project management tools, but simpler, lighter, and easier to use.
In this application, users can create accounts, log in securely, and manage their personal profiles.
Once logged in, they can create projects, assign tasks to team members, set deadlines, and monitor
task statuses. Users can also create teams, view team members, and access tasks assigned
specifically to them. The interface is designed to be clean and intuitive so that anyone can navigate
the platform without confusion. Each part of the application — from the frontend design to the
backend database — was carefully implemented to ensure smooth and reliable performance.
While working on this project, we learned how the different parts of a web application communicate
with each other. The frontend, built with [Link], handles the user interface and interactions,
displaying project details and task information dynamically. The backend, powered by [Link] and
[Link], manages server-side logic, authentication, and API handling. MongoDB stores all data
such as users, teams, projects, and tasks efficiently in a structured way. This helped us understand
how full stack development works in real-world collaborative applications.
A major focus during development was to keep the application secure and responsive. Features like
password hashing, token-based authentication, and API validation ensure that user and project data
remains protected. Another goal was to provide a smooth user experience, so every operation —
like creating tasks, assigning members, or updating statuses — updates instantly without needing
to reload the page.
Overall, building this Project Collaboration Tool provided hands-on experience with the complete
development process — from designing the database and writing backend APIs to creating the
frontend interface and testing the final product. It was an exciting and rewarding experience that
deepened our understanding of how project management platforms are built and how modern web
technologies work together to create a functional and user-friendly collaborative environment.
6
PROBLEM STATEMENT
In today’s workplace, managing projects and collaborating within teams can often be challenging.
Many existing tools are either too complex, overloaded with features, or difficult for smaller
teams to use effectively. Team members frequently struggle to track tasks, manage deadlines, and
communicate efficiently, leading to delays and confusion.
The main problem was to design a platform that simplifies project and task management while
keeping all essential collaboration features intact. There was also a need to create a tool that could
help understand how a full stack web application handles user roles, data management, and
interactions between frontend and backend in a real-world context. The challenge was to ensure
secure access, organized project tracking, and smooth communication, all within a user-friendly
interface.
This Project Collaboration Tool was developed to solve these issues by providing a clean and
minimal platform where teams can create projects, assign tasks, monitor progress, and manage
members efficiently. It focuses on practical learning as well — understanding how [Link],
[Link], [Link], and MongoDB work together to deliver a complete collaborative experience.
METHODOLOGY
The development of the Project Collaboration Tool followed a clear, structured process to ensure
each feature was well-planned and implemented efficiently. Each phase focused on a specific part
of the project — from requirement gathering and design to frontend and backend development,
testing, and integration. This approach helped maintain consistency, avoid confusion, and ensure
that every module worked properly before moving on to the next step.
1. Planning and Requirement Gathering
Before starting development, I spent time planning the core functionality of the application. I listed
all the main features, such as team management, project creation, task assignment, and user-task
tracking. Wireframes and flow diagrams were created for each module — Users, Projects, Teams,
Tasks, and UserTasks — to visualize how the different components would interact. This planning
phase provided a clear roadmap for development, making it easier to implement the features
systematically and ensuring a smooth user experience.
2. Frontend Development
7
The frontend was built using [Link], allowing the project to be divided into reusable components.
Each module — Users, Projects, Teams, Tasks, and UserTasks — had its own dedicated
components to maintain organized and maintainable code. React Router handled navigation
between different sections like Dashboard, Projects, Tasks, and Teams. Axios was used for fetching
and sending data to the backend APIs. Tailwind CSS and custom styles were used to make the
interface modern, clean, and responsive. The goal was to make the UI intuitive so that users could
easily manage projects, assign tasks, and view progress without confusion.
3. Backend Development
1. The backend was developed using [Link] and [Link]. It handles all server-side logic,
API routes, and database operations. Separate route files and controllers were created for
each module to keep the code modular and easier to debug:
• [Link] manages user registration, login, profile updates, and role management.
• [Link] handles team creation, member management, and team updates.
• [Link] manages project creation, fetching, updating, and deletion.
• [Link] handles task creation, updates, and deletion.
• [Link] tracks task assignments to users and retrieves user-specific tasks.
This modular structure ensured that each part of the backend worked independently, reducing the
chance of conflicts and making debugging easier.
4. Database Setup
4. MongoDB was used as the database, providing a flexible and scalable storage solution.
Mongoose schemas were defined for each collection to enforce structure:
• User: name, email, password, role, and profile details
• Team: name, description, creator, and members
• Project: name, description, and associated team
• Task: title, description, status, and associated project
• UserTask: references to user and task, assigned date, and status
This database design allowed quick access to all records while maintaining relationships such as
which tasks belong to which project or which users are part of which team.
5. Authentication and Security
Security was an important part of the project. User authentication was implemented using JWT
(JSON Web Tokens). When a user logs in, a token is generated and sent to the frontend, where it’s
stored securely. This token is then included with every request to verify the user’s identity for
actions like posting, liking, or commenting. To protect passwords, bcrypt was used for encryption,
so actual passwords are never stored in plain text. This makes the platform safer and protects user
data from unauthorized access.
6. Integration and Testing
8
After developing the frontend and backend separately, the modules were integrated using API
calls. The frontend components were then connected to these APIs via Axios. Manual testing was
performed across all five modules — Users, Projects, Teams, Tasks, and UserTasks — to check
functionalities such as task assignment, project creation, team management, and user-specific task
retrieval. This step ensured that all features worked together seamlessly and the system provided
a smooth and reliable user experience.
TOOLS AND TECHNOLOGIES
The frontend of the Project Collaboration Tool was developed using [Link], a widely used
JavaScript library for building dynamic and reusable user interfaces. React enables the creation of
modular components, which can be reused across different parts of the application, such as the
navigation sidebar, project cards, team lists, and task tables. This modular approach reduces code
duplication and makes the application easier to maintain. React also allows for real-time updates,
so actions like creating projects, assigning tasks, or updating task status reflect instantly without
reloading the page, providing a smooth and responsive user experience.
In addition to React, standard web technologies like HTML5, CSS3, and JavaScript were used
for structure, styling, and interactivity. HTML5 provides a clean and semantic layout for content,
CSS3 enables styling and responsive designs, and JavaScript powers dynamic behaviors like
handling form submissions, dropdown selections, and instant UI updates. Axios is used to
communicate with the backend, sending requests to fetch or update data for users, teams, projects,
tasks, and task assignments. For styling, Tailwind CSS and custom CSS were used to create a
clean, modern, and user-friendly interface.
The backend was built using [Link], which allows the server to execute JavaScript efficiently and
handle multiple requests simultaneously — a necessity for a collaborative environment with
multiple users managing projects and tasks at the same time. [Link], built on top of [Link],
was used to create RESTful APIs, organizing the backend into modular routes and controllers for
users, teams, projects, tasks, and user-task assignments. This structure makes it easier to manage
operations such as creating projects, assigning tasks, and fetching project progress.
For data storage, MongoDB was used as a flexible NoSQL database to store information about
users, teams, projects, tasks, and user-task mappings. Its schema-less design allows the application
to evolve and scale without major restructuring. Mongoose serves as an Object Data Modeling
(ODM) library, defining schemas, validating data, and providing an easy interface to perform
database operations. This ensures consistency across the data and simplifies complex queries for
tasks and project reports.
Several other tools and libraries were essential for building and securing the application. JWT
(JSON Web Tokens) was used for authentication, ensuring that only authorized users could access
protected routes. bcrypt was used to hash passwords and enhance security. Postman was utilized
extensively during development to test APIs and verify the correct exchange of data between
frontend and backend. These tools collectively ensured that the Project Collaboration Tool is
robust, secure, and easy to use
9
IMPLEMENTATION
After setting up the base structure, the project was implemented as follows:
User Authentication
Users of the Project Collaboration Tool can register by providing their name, email, and
password. This information uniquely identifies each user and allows them to interact with teams,
projects, and tasks. Passwords are hashed using bcrypt before being stored in the database,
ensuring that even if the database is compromised, original passwords remain secure.
During login, the system verifies the user’s credentials against the database. If the information
matches, the user is authenticated and granted access to the platform. This ensures that only
authorized users can access projects, teams, and tasks, maintaining system integrity.
Upon successful login, users receive a JWT (JSON Web Token), which acts as a digital key to
access protected routes, such as creating projects, assigning tasks, or viewing team members. The
token is stored securely on the client side and included in each request to verify the user’s
identity, preventing unauthorized access.
This authentication system ensures secure management of user sessions and protects sensitive
information while enabling a smooth login experience.
Fig:1.1 Signup page
The Signup Page is the first page a new user sees when they want to create an account on the
application. It provides a simple and clean interface where users can enter their name, email, and
password to register. The design is straightforward, ensuring that the registration process is quick
and easy for everyone, even those who are not very familiar with technology.
10
Once the user fills in the required details and submits the form, the information is securely sent to
the backend for processing. The system then hashes the password and stores the user’s details in
the database. After successful registration, the user can log in and start using the platform to create
posts, interact with friends, and explore content from around the world.
Fig:1.2 Login Page
After creating an account, the user can enter his details to login into his account.
Project and Task Management
Users can create projects by providing a name, description, and assigning a team. Once a project is
created, users can create tasks under that project and assign them to specific team members. Each
task can have a description, priority, and status (e.g., To Do, In Progress, Done).
11
Fig:2.1 DashBoard
Projects Page:
• Lists all projects associated with the user’s teams.
• Users can create, edit, or delete projects.
Fig:2.2 Project Page
The Team Management module allows users to create and manage teams. Each team has a name,
description, and a list of members. Users can add or remove members, and only the team creator or
admin has permissions to manage team membership.
12
Team Page:
• Lists all teams created by the logged-in user.
• Provides options to create a new team, add members, or edit team information.
Fig:2.3 Team Page
Task Management
The Tasks module allows users to create, assign, and track tasks for each project. Each task
contains:
• Title and Description: Clear definition of what needs to be done.
• Assignee: Task is linked to a specific user or multiple users.
• Status: Tracks progress as To Do, In Progress, or Done.
• Priority Levels: Optional feature for high, medium, or low priority tasks.
Real-time updates ensure that when a task is assigned, status is updated, or a comment is added, all
relevant users immediately see the changes on their dashboards.
13
Fig:2.4 Post
User-Task Interaction
The UserTasks module connects tasks to individual users for accountability. Users can:
• View tasks assigned to them across multiple projects and teams.
• Update task status in real-time.
• Add comments or progress updates, which are reflected instantly for all team members.
This module ensures clear accountability and efficient tracking of work progress. Notifications or
real-time UI updates help team members stay informed about changes in task assignments or
deadlines.
Frontend Interaction
The frontend, built using [Link], handles all user interactions. It is fully component-based, with
reusable elements like:
14
• Dashboard Widgets: Show number of teams, projects, and tasks.
• Project Cards: Display project name, associated team, and task count.
• Task Cards: Display task title, description, status, and assignee.
• Team Cards: Show team name, member count, and projects.
Data is fetched and updated using Axios, which sends API requests to the backend. Actions like
creating a project, assigning a task, or updating a status trigger real-time updates using React state
management (useState and useEffect).
Features for better UX:
• Dynamic Updates: Any changes are instantly visible on the frontend without page reload.
• Search & Filter: Users can search for teams, projects, or tasks.
• Responsive Design: Tailwind CSS ensures that the platform is usable on desktop, tablet,
and mobile.
• Interactive Elements: Buttons, modals, and forms are designed for ease of use.
FUTURE SCOPE
The Project Collaboration Tool is designed to simplify task management and team coordination
by providing a centralized platform where users can create tasks, assign them to team members,
track progress, and view reports. The current implementation successfully demonstrates core
features such as user authentication, task assignment, status tracking, and basic reporting,
fulfilling the primary goal of understanding full-stack application development in a real-world
collaboration scenario.
In the future, the system can be enhanced by adding real-time collaboration features. Using
technologies such as WebSockets or [Link], updates to tasks—such as status changes,
comments, or reassignment—can be reflected instantly for all team members. This would
improve communication within teams and reduce delays caused by manual refreshes or repeated
API calls.
Another significant improvement could be the introduction of a notification system. Users could
receive notifications when a task is assigned to them, when deadlines are approaching, or when
the status of a task changes. These notifications would help users stay informed about their
responsibilities and ensure that important updates are not missed.
The project can also be extended by implementing role-based access control. Different roles such
as admin, manager, and team member can be introduced, each with specific permissions. Admins
could manage users and projects, managers could assign and monitor tasks, and team members
could focus on execution. This would make the system more suitable for real organizational use.
Additionally, advanced reporting and analytics features can be added. Graphs and dashboards
showing task completion rates, workload distribution, and project timelines would help teams
15
analyze productivity and identify bottlenecks. Integration with external tools such as email or
calendar services could further improve usability by synchronizing deadlines and reminders.
Although the project was initially developed as a learning tool to understand full-stack
development concepts, it has strong potential to evolve into a practical project management
solution. With improved scalability, enhanced collaboration features, and better user experience,
the system can be adapted for use by small teams or organizations to manage projects more
efficiently.
CHALLENGES FACED
During the development of the Project Collaboration Tool, several technical and design challenges
were encountered. Addressing these challenges helped improve the system architecture and
strengthened my understanding of full-stack application development.
One of the major challenges was managing role-based access and data flow between modules
such as Users, Projects, Teams, and Tasks. Ensuring that only authorized users could create
projects, assign tasks, or view team-specific data required careful planning. This challenge was
resolved by implementing proper authentication and authorization using JWT, along with
middleware to protect sensitive API routes.
Another significant challenge was handling task assignment and tracking across multiple users.
Each task needed to be linked correctly to a project, assigned to specific users, and tracked through
different statuses such as pending, in progress, or completed. Designing the UserTasks module
required careful database modeling to maintain accurate relationships between users and tasks
while avoiding data inconsistency.
Maintaining synchronization between frontend and backend data was also challenging.
Initially, updates such as task status changes or team member additions were not reflected
immediately on the user interface. This issue was solved by efficiently using React’s useState and
useEffect hooks along with Axios API calls to fetch updated data and re-render components
dynamically, ensuring a smooth and responsive user experience.
Another challenge was designing a clean and intuitive user interface that could display complex
data like project details, team members, and task lists without overwhelming the user. This was
addressed by creating modular and reusable React components and using Tailwind CSS to maintain
consistent styling and responsiveness across different screen sizes.
Overall, overcoming these challenges required iterative development, continuous testing, and
optimization. Each challenge provided valuable learning opportunities and contributed to building
a more stable, scalable, and user-friendly collaboration tool.
.
DEPLOYMENT AND HOSTING
Currently, the Project Collaboration Tool runs in a local development environment. However,
deployment is an essential step to make the application accessible for real-world usage and team
collaboration.
16
For the frontend, platforms such as Vercel or Netlify are suitable for hosting the [Link]
application. These platforms provide fast load times, HTTPS security, and seamless GitHub
integration, enabling automatic deployment whenever updates are pushed to the repository. Hosting
the frontend on these platforms ensures that users can access the application from any device with
a consistent and responsive interface.
The backend, developed using [Link] and [Link], can be deployed on cloud platforms like
Render, Railway, or Heroku. These platforms support scalable server environments capable of
handling multiple API requests simultaneously. Sensitive information such as JWT secrets and
database connection strings can be securely managed using environment variables to maintain
application security.
For data storage, MongoDB Atlas is planned as the cloud database solution. MongoDB Atlas
provides reliable data storage, automatic backups, and scalability, making it suitable for managing
user data, projects, teams, and tasks. By connecting the deployed backend to MongoDB Atlas, the
application can efficiently handle increasing data volume as the number of users and projects
grows.
After deployment, thorough testing in the production environment will ensure smooth interaction
between frontend, backend, and database. Continuous deployment pipelines can also be configured
to allow future updates without disrupting the live application. This deployment strategy prepares
the Project Collaboration Tool for real-world usage and future expansion.
LIMITATIONS
Despite successful implementation, the current version of the Project Collaboration Tool has certain
limitations.
One major limitation is that the application is not yet deployed online, restricting access to local
usage only. This limits real-world testing with multiple users working simultaneously on projects
and tasks.
Another limitation is the lack of real-time collaboration features. While users can create tasks,
assign them, and update statuses, these changes may not reflect instantly across different user
sessions without refreshing the page. Implementing technologies like WebSockets or [Link]
would enable real-time task updates and improve collaboration efficiency.
The system also lacks advanced analytics and reporting features. Currently, users can view tasks
and project details, but there are no visual dashboards showing project progress, task completion
rates, or team performance metrics. Such features would enhance decision-making and project
monitoring.
In terms of scalability, the database structure is designed mainly for learning and small-scale use.
As the number of users, projects, and tasks increases, additional optimizations such as indexing,
caching, and query optimization would be required to maintain performance.
Additionally, features like notifications, activity logs, file sharing within tasks, and role-based
permissions (admin, manager, member) are not included in the current version. These features
17
are important for a professional collaboration platform but were excluded to keep the project
focused and manageable.
Overall, while the Project Collaboration Tool successfully demonstrates core collaboration
functionalities, addressing these limitations in future enhancements will be essential to transform
it into a fully functional, scalable, and industry-ready project management system.
REFERENCES
• React Official Documentation – [Link]
• [Link] Documentation – [Link]
• MongoDB Documentation – [Link]
• [Link] Docs – [Link]
• Free Code Camp MERN Stack Tutorials
• Stack Overflow Community Discussions
18