Trellis — Project Management Tool

A full-stack, Trello-style project management tool built for CodeAlpha's Full Stack Development Internship — Task 3.

Features:

• User registration & login (JWT auth, hashed passwords)
• Create projects and add members by email
• Kanban board with three lanes: To Do / In Progress / Done
• Create, update, assign, and delete tasks
• Comment threads on each task
• Real-time updates via WebSockets (Socket.io) — the bonus feature: when anyone on the project creates a task, moves it, or comments, every other connected member sees it update live, no refresh needed

Tech Stack

Layer	Technology
Frontend	HTML, CSS, vanilla JavaScript
Backend	Node.js, Express.js
Real-time	Socket.io (WebSockets)
Auth	JWT (jsonwebtoken) + bcryptjs password hashing
Database	JSON file store (backend/data/db.json)

Like the e-commerce project, this uses a small file-based JSON store instead of MongoDB/Postgres, so it runs with zero external services — just npm install and go.

Project Structure

CodeAlpha_ProjectManagementTool/
├── backend/
│   ├── data/db.json
│   ├── middleware/auth.js
│   ├── routes/
│   │   ├── auth.js        # register, login, email lookup
│   │   ├── projects.js    # create/list projects, add members
│   │   ├── tasks.js       # create/update/delete tasks
│   │   └── comments.js    # task comment threads
│   ├── db.js
│   ├── seed.js
│   ├── server.js           # Express + Socket.io server
│   └── package.json
└── frontend/
    ├── index.html          # project dashboard
    ├── board.html          # kanban board
    ├── login.html / register.html
    ├── css/styles.css
    └── js/                 # api.js, auth.js, dashboard.js, board.js

Running Locally

1. Backend

cd backend
npm install
cp .env.example .env   # then edit JWT_SECRET to any long random string
npm start

The API + WebSocket server runs at http://localhost:5001. Health check: GET /api/health.

2. Frontend

Static, no build step:

cd frontend
npx serve .

Visit the printed local URL. The frontend talks to the API at http://localhost:5001/api and the WebSocket server at http://localhost:5001 (both set in frontend/js/api.js — update API_BASE/SOCKET_URL if you deploy the backend elsewhere).

Trying the Real-Time Feature

Open the same board in two browser tabs (or two devices), logged in as different project members. Create or move a task in one tab — it appears instantly in the other, no refresh.

API Reference

Method	Route	Auth	Description
POST	/api/auth/register	—	Create an account
POST	/api/auth/login	—	Log in, returns a JWT
GET	/api/auth/lookup?email=	✅	Find a user by email (for adding members)
GET	/api/projects	✅	List projects you own or belong to
POST	/api/projects	✅	Create a project { name, description }
GET	/api/projects/:id	✅	Project detail with member list
POST	/api/projects/:id/members	✅	Add a member { email }
GET	/api/tasks?projectId=	✅	List tasks for a project
POST	/api/tasks	✅	Create a task
PATCH	/api/tasks/:id	✅	Update title/description/status/assignee
DELETE	/api/tasks/:id	✅	Delete a task
GET	/api/comments?taskId=	✅	List comments on a task
POST	/api/comments	✅	Add a comment { taskId, text }

Authenticated routes expect Authorization: Bearer <token>. The WebSocket connection authenticates the same way, passing the token via io(url, { auth: { token } }).

Resetting Sample Data

cd backend
npm run seed

Notes for Submission

• Push this folder to a GitHub repo named CodeAlpha_ProjectManagementTool.
• .env is gitignored — don't commit real secrets.