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 an editorial product landing page, glassy inspector panels, responsive controls, and clear private/invite room states.
The landing, redesigned
The first landing sold the product, but it looked like every other dark SaaS template — gradient background, gradient headings, boilerplate cards. So I rebuilt everything below the hero as a scroll-driven editorial piece and gave the whole page a real design system.
The system is deliberately narrow: a deep-navy base with subtle "machine" gradients and a topographic texture, an Agatho display serif set in uppercase for the hero, and a restrained palette where each colour has one job — bone for text, a seafoam aqua for the live-product accent, periwinkle steel for structure, and brass reserved strictly for numerals. One accent, not three.
The motion is built with Framer Motion and Lenis smooth scroll: a velocity-reactive marquee, a scroll-filled kinetic statement, a pinned horizontal "how it works" gallery, animated feature specimens (live cursors, role pills, a decision lock), and a sticky use-case deck. Every section reveals on scroll, and prefers-reduced-motion turns all of it off.
The harder part was shipping it. The redesign branched from an older commit, and production had moved ~1,600 lines ahead in the meantime (a hardened first-run flow, intent-driven hero copy, a rooms console). Rather than overwrite that work, I reintegrated the visual layer on top of the current codebase — cascading the new styles over main's structural CSS, keeping its hero functionality, and fixing the seams the merge exposed (a sticky pin that broke under the production body overflow, image mipmaps to stop board screenshots aliasing on zoom-out).
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.