The pitch
Design feedback is usually scattered across screenshots, chat threads, file links, and half-remembered decisions. Roomboard compresses that into one private room: paste a visual reference, write a note, connect the cards, comment in context, and invite the people who need to decide.
The product rule is intentionally simple: value before signup, access before sprawl. A creator opens a locked room, shares editor or viewer invite links, and collaborators join with a display name and color instead of an account ceremony.
What I built
- A real, working canvas surface. Notes, image cards, connector lines, zoom, pan, selection, comments, uploads, and lock states all run in the app.
- Pixi.js for the board, because the cards and connectors need to stay smooth under pan/zoom and still feel like an editor.
- Next.js App Router for the product shell, room routes, upload endpoints, owner-token actions, and deployable web surface.
- Phoenix Channels for realtime presence and board events, with a Vercel-friendly fallback path for local/offline operation.
- Supabase-backed persistence, so rooms, cards, links, comments, and uploaded images can survive outside the browser.
- A design system pass, including a stronger product-first landing page, glassy inspector panels, responsive controls, and clear private/invite room states.
Product decisions
The core question went past "can I draw cards on a canvas?" It was "can this feel like a real product a small creative team would actually use?"
That changed the scope. The app needed room creation, role-specific invite links, local user identity, close/lock flows, drag-and-drop image upload, comments, and visible presence. Otherwise the canvas would look nice but feel hollow. The details matter: a browser remembers creator access, invite tokens can be reused after the first visit, and image cards keep their aspect ratio inside the canvas.
The collaboration model is deliberately lightweight, but not public-by-default. New rooms are private and locked; the creator controls editor/viewer invites, closes the room when the work is done, and keeps the first-user experience free of account setup.
Realtime architecture
Roomboard uses the right tool for each layer:
- Next.js handles routing, server actions/API routes, uploads, room snapshots, and the public product surface.
- Pixi.js owns the interactive board: cards, image frames, connectors, selection outlines, pan/zoom, and high-resolution text rendering.
- Phoenix Channels handle the realtime layer: cursor presence, user labels, board events, and fanout between collaborators.
- Supabase gives the app a hosted persistence layer without running a custom database server.
Elixir earns its place here. It runs the part where BEAM is genuinely strong: many small live sessions, presence state, and low-latency broadcast. Next.js stays focused on the web product and persistence boundary.
UX details that make it feel real
- Local session memory: the same browser remembers creator and invite access.
- Room lifecycle: rooms start private, can be shared by role, locked by the creator, and closed.
- Card-level comments: feedback lives on the visual object itself.
- Image-first workflow: upload from disk, paste URLs, keep aspect ratios, and inspect the source.
- Presence with intent: collaborator cursors, names, colors, and focus make the room feel alive without turning it into noise.
The honest read
Roomboard is a focused, live product built around one sharp idea: a room where a small creative team can make a visual decision in minutes.
The interesting engineering is in the seams: DOM controls around a Pixi canvas, realtime channels around optimistic local movement, uploaded files beside URL images, link-based collaboration beside owner controls, and a public landing page that sells the product by showing the actual workflow.
Numbers
- Time to first card: about 4 seconds in the intended flow.
- Onboarding shape: no account gate; create or join, name yourself, collaborate.
- Core surfaces: landing page, room canvas, inspector, upload, comments, realtime presence, room dashboard.
- Deployment shape: Vercel for the Next.js app, Phoenix for realtime, Supabase for persistence.