I Built a Real-Time Collaborative Kanban Board in an Afternoon

A few days ago I wrote about vibe coding with RESTHeart Cloud — the idea that when your backend is already running, an AI can focus entirely on building product instead of infrastructure. Today I want to show what that actually looks like, with a real session and real timestamps.

The result is Todo Board — a collaborative Kanban app with swimlanes, drag & drop, real-time sync across browsers, group-based sharing, assignees, tags, and mobile support. Here's the git log:

13:36  Initial commit — Todo Board (Angular 21 + RESTHeart Cloud)
13:50  Add group management with saved groups, renaming, and backup
14:35  Add task detail panel with edit functionality
14:39  Externalize RESTHeart URL configuration
14:52  Update README
15:01  Add archived tasks with cleanup and visibility toggle
15:17  Add real-time collaboration via WebSocket
15:34  Add error message when deleting swimlane with tasks
16:12  Fix text wrapping and overflow in kanban cards
content_copy

10 commits. The session started less than an hour before that first commit — backend setup, a bit of planning, connecting Sophia MCP. Total time from blank terminal to working app: under 3.5 hours. I did not write a single line of code.

What's in the App

Before getting into the session, here's what Todo Board actually does:

• Kanban board with swimlane rows and status columns (Open · In Progress · Blocked · Closed)
• Drag & drop to move cards between columns and reorder swimlanes
• Group codes — share an 8-character code with your team, no login required
• Server-side isolation — RESTHeart ACL ensures each group only sees its own data
• Real-time sync — changes by teammates appear instantly via WebSocket change streams
• Assignees, tags, notes on every task
• Archived tasks — close and forget, restore when needed
• Backup and restore — export and import group codes as JSON
• Mobile responsive — task panel slides up as a bottom sheet

This isn't a toy app. The security model is proper: every request is scoped server-side by groupId, with readFilter, writeFilter, and mergeRequest enforced at the RESTHeart layer. The client never sends groupId explicitly — the backend injects it automatically via mergeRequest. No credential leaks, no client-side filtering.

The Backend: Minutes, Not Days

This is the part I want to dwell on, because it's what made everything else possible.

I asked Claude Code to set up the backend. With the Sophia MCP server connected, it queried the RESTHeart Cloud documentation in real time — collections, JSON Schema validation, ACL syntax, change stream configuration — and generated init-backend.sh, a single script that provisions the entire backend. Then it ran it.

Here's what the script does, in five steps:

1. Create the collections and schema store

http PUT "$URL/todos"     -a "$AUTH"
http PUT "$URL/swimlanes" -a "$AUTH"
http PUT "$URL/_schemas"  -a "$AUTH"
content_copy

2. Define a JSON Schema for task validation

{
  "properties": {
    "title":   { "type": "string" },
    "status":  { "type": "string", "enum": ["open", "in-progress", "blocked", "closed"] },
    "groupId": { "type": "string" }
  },
  "required": ["title", "status", "createdAt"]
}
content_copy

http PUT "$URL/_schemas/todo" -a "$AUTH" < schema.json
http PATCH "$URL/todos" -a "$AUTH" jsonSchema:='{"schemaId":"todo"}'
content_copy

3. Apply ACL rules — server-side group isolation

http PUT "$URL/acl/todoUserCRUD" -a "$AUTH" \
  roles:='["$unauthenticated"]' \
  predicate='path-prefix("/todos") and qparams-contain(groupId)' \
  priority:=100 \
  mongo:='{
    "readFilter":   {"groupId": "@qparams['"'"'groupId'"'"']"},
    "writeFilter":  {"groupId": "@qparams['"'"'groupId'"'"']"},
    "mergeRequest": {"groupId": "@qparams['"'"'groupId'"'"']"}
  }'
content_copy

Every read and write is automatically scoped to the caller's group. The mergeRequest injects groupId into every new document — the client never sends it explicitly.

4. Create WebSocket change streams

STREAM='[{"uri":"changes","stages":[
  {"$match":{"$or":[
    {"operationType":"delete"},
    {"fullDocument::groupId":{"$var":"groupId"}}
  ]}}
]}]'
http PATCH "$URL/todos"     -a "$AUTH" streams:="$STREAM"
http PATCH "$URL/swimlanes" -a "$AUTH" streams:="$STREAM"
content_copy

The stream is filtered server-side: only events belonging to the caller's group are pushed over the socket. $var: groupId is resolved at runtime from the query parameter.

5. Gate stream access with a dedicated ACL rule

http PUT "$URL/acl/todoUserStreams" -a "$AUTH" \
  predicate='(path-prefix("/todos/_streams") or path-prefix("/swimlanes/_streams"))
             and qparams-contain(avars.groupId)'
content_copy

When the script finished, the terminal showed:

✓ todos collection (201)
✓ swimlanes collection (201)
✓ _schemas store (201)
✓ todo schema (201)
✓ schema applied to todos (200)
✓ ACL todos (201)
✓ ACL swimlanes (201)
✓ ACL streams (201)
✓ todos change stream (200)
✓ swimlanes change stream (200)

✓ Backend initialized successfully!
content_copy

Collections, JSON Schema validation, group-scoped ACL, real-time WebSocket endpoints — all running. The script took Claude Code a few minutes to write using the Sophia MCP server for the exact syntax, and about 10 seconds to execute.

The backend was fully operational before the frontend had rendered a single component.

The Session

I started at 13:36 with a single prompt:

Build a collaborative Kanban board. Angular frontend, RESTHeart Cloud backend. Group-based access — users share a code, no login required. The board should have swimlane rows and status columns.

Claude Code — with Sophia MCP connected — first queried the documentation to understand how RESTHeart Cloud handles collections, ACL, and change streams. Then it generated init-backend.sh, ran it against my RESTHeart Cloud instance, verified the responses, and moved on to the Angular app.

By 13:50 the board was rendering tasks. By 14:35 there was a full task detail panel. The feature I thought would take longest — real-time sync across browsers via WebSocket — was done at 15:17, less than two hours in.

The WebSocket implementation is not a polling hack. It uses RESTHeart's native change streams, filtered server-side:

{ "$match": { "$or": [
  { "operationType": "delete" },
  { "fullDocument::groupId": { "$var": "groupId" } }
]}}
content_copy

The server only pushes events that belong to the caller's group. The $var reference is resolved at runtime from the query parameter. A dedicated ACL rule gates access to the stream endpoints. Claude Code got this right on the first try because it had the actual documentation.

What Made This Possible

The session worked because the two main sources of friction in vibe coding were eliminated.

Backend friction. Normally, the AI has to choose a stack, generate server code, set up a database, figure out auth, handle deployment. Each decision is a guess. Each guess that's wrong costs debugging time that breaks the flow.

RESTHeart Cloud removed all of it. Collections, permissions, real-time — these are configuration operations, not code. The API is declarative and consistent. Claude Code had a concrete, predictable surface to generate against.

Documentation friction. The AI's training data has a cutoff. RESTHeart's API has specific syntax for ACL predicates, $var references in change streams, mergeRequest in write filters. Getting any of these wrong produces a 400 error with no obvious fix.

Sophia MCP solved this. Claude Code retrieved the current documentation at query time via semantic search. Not training data from a year ago — the actual docs, now. Every API call it generated was correct.

Try It

The app is live at todo.softinstigate.com. The source is on GitHub under the Apache 2.0 license — fork it, adapt it, ship it.

If you want to run your own instance:

1. Create a free RESTHeart Cloud service at cloud.restheart.com
2. Connect Claude Code to Sophia:

   claude mcp add --transport http sophia-cloud https://api.bysophia.ai/mcp/cloud/
   content_copy

3. Clone the repo, run init-backend.sh against your instance, configure the URL, and deploy

The backend is already running. The interesting part is what you build on top of it.

---

RESTHeart Cloud is a MongoDB Technology Partner. Sophia is the AI assistant built into RESTHeart Cloud — try it live.