Problem
Visual feedback gets scattered across screenshots, chat threads, and file links. Roomboard brings references, comments, and decisions into a shared room so a team can review the work in context.
My responsibility
I designed and built the product: the landing page, room creation, canvas, inspector, uploads, role-specific invitations, comments, realtime collaboration, and persistence.
Key decision: invite by role
The workflow starts with a private room. The creator shares an editor or viewer link; collaborators join with a display name instead of creating an account first.
That removes a signup step but makes access handling central to the product. Owner access and invite tokens need distinct permissions, and the interface must explain who can edit, share, lock, or close the room.
What shipped
Users can create a room, add images and notes, connect cards, comment on the work, and invite collaborators. The canvas and inspector bring those actions together in one review surface.
Technical decisions
- Pixi.js renders the board, cards, connectors, selection, and pan/zoom interactions. DOM controls handle the inspector, forms, and sharing actions.
- Phoenix Channels carries presence and board events between collaborators.
- Next.js handles routing, uploads, room snapshots, and server-side product actions.
- Supabase persists rooms, cards, links, comments, and uploaded images.
The difficult boundaries are canvas state versus DOM controls, optimistic movement versus incoming board events, and invite access versus owner actions. I built explicit room and role states around those boundaries.
Design and release detail
I designed the landing page around the review workflow, with a restrained type and color system and motion that respects reduced-motion preferences.
During the redesign, production had gained onboarding and room-management changes. I integrated the visual work with those flows, including fixes for sticky layout behavior and screenshot rendering during zoom.
Product evidence
Open the live product to try the create-or-join flow, then add a reference, leave a comment, and inspect the sharing controls. The canvas screenshot above shows those actions in the room interface.