Stop 22 · Build Portfolio ProjectsProjects · 13/15

Project Management Tool (Trello Clone)

In short

This is the Kanban board grown up: many boards, team members, deadlines and an activity log. It shows you can keep a big, connected chunk of state organised as an app grows.

A fuller project-management app — boards, tasks, assignees, deadlines and activity history — a step up in complexity from the earlier Kanban Board project.

The jaadu with a clipboard organises a college fest as small teams carry lights and bunting.

Think of it like this

Organising the college fest

Many teams (boards), each with tasks, owners and deadlines. The convenor wants to see who moved what and when. Without a clear system, the fest falls apart. Your tool is that system.

Watch it happen

One move, logged and shared

Aman

Store

Activity log

Teammates

move c1 → Done

1/5Aman drags Posters to Done. The store updates c1's listId and both lists' cardIds.

The big ideas

What you need to know

Normalised state

Boards, lists and cards stored by id, not deeply nested. Shows you can design data that scales.

Members and permissions

Invite people, assign cards, limit who can edit. Proves you think about multi-user apps.

Activity log

'Aman moved Posters to Done, 2 min ago.' Shows auditability, which real teams need.

Search and filters

By member, label or due date across a whole board.

How it works

Build plan

1
Reuse your Kanban
Start from the board and moveCard logic you already built.
2
Normalise the data
Separate lookups for boards, lists, cards and users.
3
Card details
Modal with description, due date, labels and assignees.
4
Activity log
Record an entry for every create, move and edit.
5
Backend and members
Real database, auth and invites.

See it in code

Walk through the code

1// Normalised: each thing stored once, linked by id2const state = {3  cards: { c1: { id: "c1", title: "Posters", listId: "l1", assignees: ["u1"] } },4  lists: { l1: { id: "l1", title: "To do", cardIds: ["c1"] } },5  users: { u1: { id: "u1", name: "Aman" } },6  activity: [],7};8 9function logActivity(state, userId, text) {10  const entry = { id: crypto.randomUUID(), userId, text, at: Date.now() };11  return { ...state, activity: [entry, ...state.activity] };12}