Building a Developer Collaboration Platform

Devlog #3 · April 2026

Phase 3 was the first phase where the app started feeling like an actual product. Up until now it was auth flows and API routes — important, but invisible. This week I built the kanban board: the thing you actually stare at every day when you're using an app like this.

The Board Layout

The board is structured around 4 default columns that get created automatically when a new project is initialized: Backlog, In Progress, In Review, Done. Every project starts with these — no setup required.

Each column fetches its tasks from the API and renders them as cards. The layout is a horizontal scroll of columns, each column independently scrollable vertically. This is the standard kanban pattern and for good reason — it scales cleanly whether a column has 2 tasks or 20.

The data fetching is all TanStack Query. Each column gets its tasks from a shared query keyed by projectId, and individual task mutations invalidate that query to keep everything in sync.

The create task modal ended up being more involved than I expected. A task has:

Title
Description (optional)
Priority — Low / Medium / High / Critical
Assignee — a dropdown populated with the project's current members

The assignee dropdown was the interesting part. I'm fetching the project members list and passing it into the modal as a prop. Each member shows their GitHub avatar and username. Small detail, but it immediately makes the UI feel real — you're assigning to an actual person, not just a user ID.

Priority is rendered as a colored label on each task card. Four levels, four colors. At a glance you can see what's on fire and what can wait.

Edit, Delete, and the Task Detail Panel

Every task card has an edit and delete option accessible via a small menu. Deleting is straightforward — call the API, invalidate the query, card disappears.

Editing opens the same modal pre-populated with the task's current values. One form component, two modes. Keeps the code clean.

The task detail panel is a side drawer that slides in when you click a task card. It shows the full task — title, description, priority, assignee, creation date. Right now it's read-only; editing still goes through the modal. I might merge these in a later phase but for now the separation keeps things simple.

The panel is built as a fixed sidebar that overlays the board without pushing content around. Clicking outside closes it. Straightforward UX that gets out of the way.

What I Got Right

Keeping the board component focused. I was tempted early on to build everything into one giant Board.tsx — columns, tasks, modals, panels, all of it. Instead I broke it down:

board/
├── Board.tsx          ← layout only
├── Column.tsx         ← single column + its tasks
├── TaskCard.tsx       ← individual task card
├── TaskModal.tsx      ← create/edit form
└── TaskDetailPanel.tsx ← side drawer

Each component has one job. When I needed to change how task cards render priority labels, I opened TaskCard.tsx and changed exactly that, nothing else. This paid off immediately and will pay off more in Phase 4 when drag and drop gets wired in.

What's Still Rough

The board has no drag and drop yet — that's Phase 4. Right now tasks sit in their columns statically. You can create, edit, delete, and assign, but you can't move them. Using it feels slightly incomplete for exactly that reason. Kanban without drag is just a list.

The task detail panel also needs more information eventually — activity history per task, comments, attachments. That's further down the road. For now it shows what it needs to.

What I Learned

Component boundaries matter more than you think upfront. The instinct is to just get something on screen, and that's right — but taking 20 minutes to think about where one component ends and another begins saves hours later. The board is going to get significantly more complex in the next two phases. Starting with clean boundaries made that less scary.

Populated dropdowns change how an app feels. Seeing real GitHub avatars in the assignee dropdown, seeing your own username listed — it makes the app feel like it's actually about you and your team. Worth the extra fetch.

What's Next

Phase 4 is drag and drop. This is the part I've been both looking forward to and slightly dreading — persisting task order to the database after every drag, handling empty columns, making sure fast drags don't cause race conditions. dnd-kit is the library, and I've already read through the docs. Time to find out how it actually goes.

Repo: github.com/ratnesh2507/collab-platform

Next up: Phase 4 — Drag & Drop

#fullstack #react #typescript #kanban #devlog #buildinpublic

Building a Developer Collaboration Platform — Phase 3: The Kanban Board