taskforge.md

TaskForge.

Real-time kanban where presence is a first-class citizen.

$ git source
--- taskforge.yaml
project"TaskForge"
tagline"Real-time kanban where presence is a first-class citizen."
role"duo · design + full-stack"
status"shipped · live"
timelineSep → Nov 2025 · weekends
commits21
stackNext.js · React · TypeScript · Tailwind · Liveblocks · MongoDB · NextAuth
infraLiveblocks · MongoDB Atlas · Google OAuth · Vercel

01#tl;dr

TaskForge is a real-time collaborative kanban board — Trello meets Notion with multiplayer baked in. Customizable boards and columns, drag-and-drop cards, threaded comments, Google OAuth, all of it syncing live across every connected client.

    • What: real-time kanban with cursors, presence, and threaded comments
    • Hard part: drag-and-drop that stays consistent across N clients without conflict
    • Why it matters: proves I can ship multiplayer state without writing my own sync layer

02#the problem

Most kanban tools fall into one of two camps. Either they feel slow and bureaucratic (Jira), or they quietly fall apart the second more than one person opens the same board. Trello tries — it polls for updates and shows other people's changes eventually. "Eventually" is not the same as "now."

I wanted presence to be a first-class citizen. You see other cursors moving. You see cards being dragged. Comments land in real time. And the board still has the structure of a proper tracker you can actually run a sprint on.

03#architecture

Frontend is a normal Next.js app. The real-time layer is a single Liveblocks room per board — every connected client subscribes to the same shared state. Mutations broadcast to all peers; persistence to Mongo happens out-of-band so the source of truth doesn't block UI updates.

fig. 01 · presence + persistence in two parallel paths

04#key decisions

01

Liveblocksvs.raw WebSockets + ShareDB

Building my own CRDT layer for a portfolio project is yak-shaving. Liveblocks gives me presence (cursors, avatars), shared storage, and conflict-free updates out of the box. I write zero websocket code.

02

MongoDBvs.Postgres + Prisma

Boards are nested document trees — board > columns > cards > comments. Mongo's document model maps to this naturally. SQL would mean either 4 joins per fetch or jamming JSON into a jsonb column.

03

NextAuth + Googlevs.Clerk / Auth0

One provider, zero per-MAU cost, ships with the Next.js conventions I'm already using. Adding email/password later is a flag flip.

04

drag-and-drop wired to Liveblocks state

Dragging a card locally updates the Liveblocks document. Every other client sees the move before the server has even acknowledged. Optimism is the default; conflicts are rare because Liveblocks orders mutations server-side.

05#walkthrough

01.your boards
TaskForge boards index — eight project boards with emoji prefixes
02.kanban + tasks
Example Board with In Progress / Review / Done / ai section columns and cards
03.description + comments
Card modal with rich description, checklist, suggested tests, and threaded comments
04.board access
Per-board ACL screen listing collaborator emails with remove buttons

06#the stack

    • frontend: Next.js, React, TypeScript, Tailwind, shadcn/ui
    • realtime: Liveblocks (rooms, presence, shared storage)
    • auth: NextAuth.js with Google OAuth
    • data: MongoDB Atlas for persistent board state
    • deploy: Vercel

07#what's next

    • AI task elaboration — paste a vague ticket, get acceptance criteria in progress
    • @-mentions + notifications
    • swimlanes / WIP limits per column
    • export board to markdown