Think Space

A real-time collaborative whiteboard — infinite canvas, sticky notes, shapes, connectors and ink, where every edit lands on everyone else's screen the moment it happens.

Open it Read the source

My role: Solo — product, client, server, schema
Timeline: 2025 — ongoing
Core stack: React 19 · Vite · react-konva

what's in it

Features

One selection model: Notes, text, four shapes, lines, arrows and pen strokes are rows in one BoardItem table, so a marquee catches mixed types and drags, resizes, restacks and undoes them as one group.
Optimistic sync: Edits render locally and reconcile with the server's ack. A new item carries a clientKey across the id swap, so a note being typed into isn't remounted and half a sentence isn't lost.
Lossless resize: Strokes store their points in data.points as fractions of their own bounding box, so scaling never rewrites geometry through the integer coordinate columns.
Roles enforced server-side: Admin, editor, commenter and viewer are resolved on join, cached per socket, and re-checked on every message — a disabled button is not the security model.
Comments and reactions: Threaded comments and emoji anchor to any item and render as badges on the canvas itself, not in a side panel you have to go looking for.
Export at 1:1: The whole board, the current selection, or any rectangle you drag — always rendered at true scale, whatever zoom you happen to be at.
Keyboard-first tools: Sticky notes that auto-fit their text, text boxes, four shapes, lines, arrows and a freehand pen, each one keystroke away: N T S L A P.
Eight templates: Retro, roadmap, user journey, mind map, flowchart and more — built from the same item types you'd draw by hand, so a template can be pulled apart like anything else.
Accounts, invites, billing: Email invites with tokenised accept links for people without an account, TOTP two-factor, activity feed, command palette, WebRTC voice rooms and Stripe-backed plans.

a look around

What it looks like in use

A user-journey board with stage chips, sticky notes, pain-point notes and a hand-drawn emotion curve — Five item types in one frame — the chips are shapes, the actions are notes, the red curve is a pen stroke — all rows in the same table, so one marquee catches the lot.
one table, one marquee

The Think Space dashboard showing board stats, recent boards with previews, and an activity feed — Card previews are SVG drawn from each board's own items, so a preview can't drift from the board it advertises.

A sign-in flowchart with ellipses, rectangles, a decision diamond and labelled yes/no branches — Branch labels are ordinary text items — no special label type to keep in sync when the arrow moves.

The template gallery with eight starter boards grouped by category — Eight starters, built from the same item types you'd draw by hand.

The dashboard on a phone — stats stacked, board previews full width — Previews are still the same SVG drawn from each board's items, just laid out one per row — nothing is swapped for a lighter mobile version that could drift.
same data, narrower

The landing page on a phone with the demo board rendered below the hero — The hero board is the real renderer at phone width, so the first thing a visitor sees is the canvas actually working, not a picture of it.

what it's made of

The stack

Canvas & client: React 19
Vite
react-konva
Tailwind v4
TanStack Query
Server: Node
Express 5
Socket.IO
Zod
JWT
Data: PostgreSQL (Supabase)
Prisma
Services: Stripe
Nodemailer
otplib (TOTP)
WebRTC