CollabTask
Team Project Management Platform
A Student-Friendly Guide to the Full Tech Stack
1. What is CollabTask?
CollabTask is a team task management web app — similar to tools you may have heard of like Trello or
Jira. It lets teams create projects, assign tasks, track progress on a visual board, and collaborate in real time.
When one person moves a task card, everyone else sees it move instantly — no need to refresh the page.
For your major project, CollabTask is built using a full-stack approach, which means it has three main parts
working together: a Frontend (what the user sees), a Backend (the server that processes requests), and a
Database (where all data is stored).
The Big Picture
→ HTTP requests ←
→ Save / Read
FRONTEND JSON responses ↔ BACKEND DATABASE
(Browser) (Server) ← Data (MongoDB)
Live events
The three layers of CollabTask and how they communicate
PART 1 — The Frontend (What Users See)
2. Frontend Technologies Explained
React — The UI Framework
React is a JavaScript library made by Facebook for building user interfaces. Instead of writing one giant
HTML page, React lets you break the UI into small, reusable pieces called components. Each component is
responsible for one part of the screen.
Think of it like this: Think of Lego blocks. Each block (component) does one thing — a button, a task
card, a sidebar. You snap them together to build the full page. If you change one block, only that block
updates, not the whole page.
In CollabTask, React 18 is used. Every page — the Dashboard, the Kanban board, the Profile page — is a
React component. Smaller pieces like the task card, the comment box, and the notification bell are also
components nested inside those pages.
React Router — Navigation Without Page Reloads
Normally, clicking a link loads an entirely new HTML page from the server. React Router (version 6) changes
this — it handles navigation inside the browser without ever asking the server for a new page. This makes
the app feel fast and smooth, like a mobile app.
Think of it like this: Imagine a TV with multiple channels. You switch channels instantly — the TV
doesn't turn off and on each time. React Router works the same way: the URL changes, but the page
never fully reloads.
• URL /dashboard → shows the Dashboard page component
• URL /project/123 → shows the Kanban board for project 123
• URL /profile → shows the Profile & notifications page
@dnd-kit — Drag and Drop
@dnd-kit is a library that adds drag-and-drop behaviour to React apps. In CollabTask, it powers the Kanban
board where users drag task cards between the To Do, In Progress, and Completed columns.
Think of it like this: It's like the drag-and-drop you use on your phone to rearrange app icons on the
home screen. The library handles all the mouse/touch tracking, animations, and collision detection for
you.
When you drop a card, CollabTask immediately sends the new order to the backend so it's saved in the
database — and all other users in that project see the same new order instantly.
Axios — Talking to the Backend
Axios is a small JavaScript library that makes it easy to send HTTP requests from the browser to the backend
server. Every time the app needs to load data (fetch tasks, get projects) or save data (create a task, post a
comment), it uses Axios.
Think of it like this: Think of Axios as a waiter in a restaurant. You (the frontend) tell the waiter what
you want, the waiter goes to the kitchen (backend), and comes back with your food (data). You never go
to the kitchen yourself.
CollabTask has a custom Axios instance in utils/[Link] that automatically attaches the user's JWT token to
every request — so the backend always knows who is making the request.
[Link] Client — Real-time Communication
[Link] enables two-way, real-time communication between the browser and the server. Unlike regular
HTTP requests (which the browser always initiates), [Link] keeps a permanent open connection so the
server can push updates to the browser at any time.
Think of it like this: HTTP requests are like sending a letter — you send it and wait for a reply.
[Link] is like a phone call — both sides can speak and listen at any moment without waiting for the
other to 'ask' first.
In CollabTask, when you open a project, your browser joins a room for that project. Whenever anyone in your
team moves a task, the server instantly sends a message to everyone in that room. No page refresh needed.
Custom Hooks — useAuth and useSocket
React Hooks are functions that let components share logic without duplicating code. CollabTask has two
custom hooks:
[Link] Stores the logged-in user and their JWT token. Any component that needs to
know 'who is logged in?' uses this hook.
[Link] Manages the [Link] connection. Provides two ready-made hooks:
useProjectSocket (listens for task events in a project) and useNotificationSocket
(listens for personal notifications).
PART 2 — The Backend (The Brain of the App)
3. Backend Technologies Explained
[Link] — JavaScript on the Server
JavaScript was originally designed to run only inside web browsers. [Link] changed that — it lets
JavaScript run on a server (your computer or a cloud machine) outside the browser. This means CollabTask
uses one language (JavaScript) for both frontend and backend, making it much easier for your team to work
on both sides.
Think of it like this: Before [Link], JavaScript was like an employee who could only work inside the
office (browser). [Link] gave that employee a laptop so they can work from anywhere (the server).
Tip: [Link] is built on Chrome's V8 JavaScript engine — the same engine that runs JS in your browser.
It's extremely fast and is used by companies like Netflix, LinkedIn, and PayPal.
[Link] — The Web Server Framework
Express is a minimal framework that sits on top of [Link] and makes it easy to build web servers. It lets you
define routes — which URL should trigger which code — and handle requests and responses.
Think of it like this: [Link] gives you the raw materials to build a house (wood, bricks). Express is the
blueprint that tells you how to put them together efficiently. Without Express, you'd have to write a lot
more code to do the same thing.
In CollabTask, Express handles four groups of routes:
• /api/auth — handles signup, login, and user lookup
• /api/projects — create, read, update, delete projects and manage members
• /api/tasks — manage tasks, comments, drag-drop reordering, and statistics
• /api/notifications — fetch and mark notifications as read
JWT — JSON Web Tokens (How Login Works)
After a user logs in, the backend creates a JWT (JSON Web Token) — a small, digitally signed string of text
that proves the user's identity. The frontend stores this token and sends it with every request. The backend
checks the token to decide: 'Is this person allowed to do what they're asking?'
Think of it like this: A JWT is like a concert wristband. When you buy a ticket (log in), the staff put a
wristband on your wrist (JWT). For the rest of the event, staff just check your wristband — they don't ask
you to buy a ticket again. If your wristband is fake or expired, you're denied entry.
Step What happens
1. User logs in Frontend sends email + password to /api/auth/login
2. Backend verifies bcryptjs checks the hashed password in the database
3. Token created Backend signs a JWT with the user's ID and an expiry of 7 days
4. Token stored Frontend saves the token in localStorage
5. Token used Every Axios request adds the token in the Authorization header
6. Backend checks [Link] middleware reads and verifies the token on every request
[Link] Server — Broadcasting Real-time Events
The backend also runs a [Link] server alongside Express. While Express handles normal HTTP requests
(send request, get response, connection closes), [Link] maintains a persistent open connection with
every connected browser.
When a task is updated, the flow is:
• User updates a task → Axios sends a PUT request to Express
• Express saves the change to MongoDB
• Express tells [Link] to broadcast task:updated to everyone in that project's room
• All connected browsers receive the update and re-render the card automatically
Note: [Link] also uses JWT for authentication. When the browser connects, it sends the token. The
server verifies it before allowing the user to join any room — so strangers can't eavesdrop on your
project.
PART 3 — The Database (Where Data Lives)
4. Database Technologies Explained
MongoDB — The Database
MongoDB is a NoSQL database. Unlike traditional databases (like MySQL) that store data in rows and
columns like a spreadsheet, MongoDB stores data as documents — which look exactly like JavaScript
objects (JSON format). This makes it a natural fit for a JavaScript full-stack app.
Think of it like this: A traditional database is like a filing cabinet with fixed folders and strict forms —
every document must fill in the same fields. MongoDB is like a folder of sticky notes — each note can
have different information, and you can add new fields whenever you need.
CollabTask has three main collections (equivalent to tables) in MongoDB:
Collection What it stores Key fields
Users One document per registered user name, email, hashed password, notifications[]
Projects One document per project name, owner, members[], inviteCode
Tasks One document per task title, status, priority, assignedTo, comments[], position
Mongoose — The Bridge Between [Link] and MongoDB
Mongoose is a library that lets you interact with MongoDB from [Link] code. It adds schemas (blueprints)
to MongoDB documents — ensuring that every User document always has an email, every Task always has
a status, and so on.
Think of it like this: MongoDB is a box where you can put anything. Mongoose is a labelling machine
that decides what goes in the box, what format it must be in, and what fields are required — so nobody
accidentally puts in the wrong thing.
Tip: Mongoose also lets you define relationships between collections. For example, a Task document
stores the project ID and assignee's user ID, so the backend can look up the full project or user details
when needed.
PART 4 — How It All Works Together
5. End-to-End Flows (Step by Step)
Flow 1 — User Logs In
1 User fills in email & password and clicks Login
2 React sends the data to the backend using Axios → POST /api/auth/login
3 Express receives it. Mongoose fetches the User from MongoDB by email
4 bcryptjs compares the entered password with the stored hashed password
5 If they match, the backend creates and returns a JWT token
6 React stores the token in localStorage and takes the user to the Dashboard
Flow 2 — Moving a Task Card (Drag & Drop)
1 User drags a task card from 'To Do' to 'In Progress' on the Kanban board
2 @dnd-kit detects the drop and updates the UI immediately (optimistic update)
3 React sends the new order to the backend → PUT /api/tasks/bulk/reorder
4 Express updates each task's position and status in MongoDB
5 The backend emits task:reordered via [Link] to everyone in the project room
6 All other team members' browsers receive the event and update their boards
6. Project Folder Structure
Understanding the folder structure helps you know where to find and edit each part of the app.
Folder / File What it does Layer
backend/[Link] Entry point — starts Express + [Link] server Backend
backend/config/[Link] Connects [Link] to MongoDB using Mongoose Backend
backend/middleware/[Link] Checks JWT token on every protected API request Backend
backend/models/[Link] Blueprint for a user document in MongoDB Backend
backend/models/[Link] Blueprint for a project (has invite code, members list) Backend
backend/models/[Link] Blueprint for a task (has comments, activity log, position) Backend
backend/routes/[Link] API routes for signup, login, /me, user search Backend
backend/routes/[Link] API routes for project CRUD + invite + member removal Backend
backend/routes/[Link] API routes for task CRUD + comments + reorder + stats Backend
backend/routes/[Link] API routes for reading and marking notifications Backend
frontend/src/[Link] Root component — sets up routing with React Router Frontend
frontend/src/pages/ One file per page: Dashboard, Kanban board, Login, Profile Frontend
frontend/src/components/ Reusable pieces: sidebar, task modal, project modal, toasts Frontend
frontend/src/hooks/ useAuth (login state), useSocket (real-time events) Frontend
frontend/src/utils/[Link] Axios instance — auto-attaches JWT to every request Frontend
frontend/src/utils/[Link] Small utility functions: format dates, get initials, colors Frontend
frontend/src/styles/[Link] Design tokens and utility CSS classes for the whole app Frontend
7. Setting Up the Project (Step by Step)
Follow these steps exactly. Each step must complete successfully before moving to the next.
Step 1 Install Prerequisites
Download and install [Link] v18+ from [Link]. node --version npm --version
Install MongoDB locally from [Link], or
create a free cloud account at [Link]/atlas.
Verify Node is installed by running: node --version in
your terminal.
Step 2 Clone the Repository
Download the project code from GitHub to your git clone [Link]
computer. ame/[Link] cd collabtask
Step 3 Set Up the Backend
Go into the backend folder, install all required cd backend npm install cp .[Link]
packages, and create your environment config file. .env
Then edit the .env file: add your MongoDB
connection string and create a strong JWT secret.
Step 4 Start the Backend Server
Run the backend. You should see 'Server running on npm run dev
port 5000' and 'MongoDB connected' in the terminal.
Step 5 Set Up the Frontend
Open a new terminal window, go to the frontend cd ../frontend npm install cp
folder, install packages, and copy the env file. .[Link] .env
Step 6 Start the Frontend
Run the frontend. Your browser should automatically npm start
open at [Link]
Tip: If you see errors when running npm install, try deleting the node_modules folder and running npm
install again. Most errors are caused by missing dependencies or a wrong [Link] version.
Quick Reference — Key Concepts Glossary
8. Glossary of Terms
These are the most important terms used throughout this project. Refer back to this page whenever you see
an unfamiliar word.
Term Simple Definition
API (Application Programming A set of rules for how the frontend and backend talk to each other. Like a menu
Interface) in a restaurant — it lists what you can order and how.
REST API A style of API that uses standard HTTP methods: GET (fetch data), POST
(create), PUT (update), DELETE (remove).
HTTP Request A message sent from the browser to the server asking for data or an action.
Every time you click a button that fetches data, an HTTP request is sent.
JSON JavaScript Object Notation — a lightweight text format for sending data between
server and browser. Looks like: {"name": "Alice", "age": 22}
JWT (JSON Web Token) A signed string that proves who you are. The server creates it on login; the
browser sends it with every request to stay authenticated.
Authentication Verifying who you are — e.g. entering your email and password to prove your
identity.
Authorization Checking what you are allowed to do — e.g. only the project owner can delete
the project.
Middleware Code that runs between a request arriving and the route handler responding.
The JWT checker ([Link]) is middleware.
WebSocket A technology that keeps a permanent connection open between browser and
server, allowing real-time two-way communication.
[Link] Room A named group that sockets can join. All sockets in a room receive messages
sent to that room. CollabTask uses one room per project.
Component (React) A self-contained piece of UI — like a function that returns HTML. Components
can be reused and composed together.
Hook (React) A special React function (starts with 'use') that lets components access state,
side effects, or shared logic.
State Data that can change and that React watches. When state changes, React
re-renders the affected components automatically.
Schema (Mongoose) A blueprint that defines what fields a MongoDB document must have and what
data types they should be.
Collection (MongoDB) A group of related documents in MongoDB, similar to a table in a traditional SQL
database.
Document (MongoDB) A single record in MongoDB, similar to a row in a table, stored in JSON-like
format.
Environment Variables Secret settings stored in a .env file (not shared publicly) — like your database
password or JWT secret key.
localhost A special address that points to your own computer. localhost:3000 means 'port
3000 on my machine'.
Port A number that identifies a specific service on a computer. The backend runs on
port 5000, the frontend on port 3000.
CollabTask Major Project Guide — Written for students learning full-stack web development. Technologies:
React, [Link], Express, MongoDB, [Link], JWT. | License: MIT