StackPrism
Real-time and media

Tech stack for a real-time collaboration app (2026)

Real-time collaborative whiteboard, designed by StackPrism from one sentence: 9 components, a reason for each, and the live checks that watch them.

The stack

  • Next.js
  • WebSockets
  • Node.js
  • Clerk
  • SendGrid
  • Supabase
  • PostgreSQL
  • Redis
  • Sentry
Real-timeWebSocketsCollaborationUpdated
The idea someone typed
“A collaborative whiteboard where teams draw and add sticky notes together in real time, see each other’s cursors, and share boards with a link.”

Make it yours. Open this stack in the editor to check its health, harden it and hand it to your coding agent. No sign-up, nothing to generate.

Start from this stack
goes down

Select a component to see what it does and what it connects to, or pick one above to see what breaks if it goes down. Pinch or use the buttons to zoom.

Why this stack

The Next.js app signs people in with Clerk, loads a board from the Node.js API and then joins a real-time collaboration service over WebSockets. That service sends every stroke, sticky note and cursor move to the others in the room, keeps live presence in Redis so it stays fast, and saves lasting changes to PostgreSQL. Pasted images live in Supabase Storage, SendGrid sends board invites, and Sentry reports dropped connections and sync bugs.

Why each piece

All 9 components on the diagram: what each one does, what it talks to, and what stops if it goes down.

  1. Next.js Web App

    Whiteboard UI. Calls Clerk (authenticates), Node.js API (requests board), Real-time Collaboration Service (joins room) and Sentry (reports errors).

    Nothing else on the diagram depends on it.

  2. Real-time Collaboration Service

    In Backend Services

    WebSocket sync service. Calls PostgreSQL (writes changes) and Redis (tracks presence). Called by Next.js Web App (joins room).

    If it goes down, 1 of 8 components degrades.

  3. Node.js API

    In Backend Services

    Board and access API. Calls SendGrid (sends invites), Sentry (reports errors) and PostgreSQL (loads board). Called by Next.js Web App (requests board).

    If it goes down, 1 of 8 components stops working.

  4. Clerk

    In External Services

    Authentication service. Called by Next.js Web App (authenticates).

    If it goes down, 1 of 8 components stops working.

  5. SendGrid

    In External Services

    Email service. Called by Node.js API (sends invites).

    If it goes down, 1 of 8 components degrades.

  6. Supabase Storage

    In Data & Storage

    Board assets.

    Nothing else on the diagram depends on it.

  7. PostgreSQL

    In Data & Storage

    Durable board state. Called by Node.js API (loads board) and Real-time Collaboration Service (writes changes).

    If it goes down, 3 of 8 components stop working.

  8. Redis

    In Data & Storage

    Ephemeral presence. Called by Real-time Collaboration Service (tracks presence).

    If it goes down, 1 of 8 components degrades.

  9. Sentry

    In External Services

    Error tracking. Called by Node.js API (reports errors) and Next.js Web App (reports errors).

    If it goes down, 2 of 8 components degrade.

When this stack fits

  • Several people edit the same thing at once and see each other’s cursors.
  • Live state changes many times a second, while only lasting changes need the database.

When to pick something else

  • You’d rather not run a WebSocket service: a hosted real-time service such as Pusher can carry the messages.
  • Edits must merge after people work offline: you’ll want a CRDT library on top, which this diagram doesn’t show.

What you need to build this

9 components across 8 areas of the stack.

Build it with your AI agent

Hand the stack to Claude Code, Codex, Cursor or any coding agent as a brief: how it connects, install steps and a build plan.

Frontend1

  • Next.js Web App

    Whiteboard UI

    npm install next

    Docs

Backend & APIs2

  • Node.js API

    Board and access API

    Docs

  • Real-time Collaboration Service

    WebSocket sync service

Data1

  • PostgreSQL

    Durable board state

    Docs

Cache & queues1

  • Redis

    Ephemeral presence

    Docs

Auth1

  • Clerk

    Authentication service

    npm install @clerk/nextjs

    Docs

Email & messaging1

  • SendGrid

    Email service

    npm install @sendgrid/mail

    Docs

Storage & CDN1

  • Supabase Storage

    Board assets

    npm install @supabase/supabase-js

    Docs

Observability1

  • Sentry

    Error tracking

    npm install @sentry/nextjs

    Docs

Install

npm install next @clerk/nextjs @sendgrid/mail @supabase/supabase-js @sentry/nextjs

SDKs only. Pick your own database driver or ORM.

See all 30 example stacks