How to Clone Miro

Create a full-stack Miro-style collaborative whiteboard called Canvana using Next.js (App Router), Tailwind CSS, Prisma and Postgres, plus a realtime layer for multiplayer sync.

## What to build
An infinite pan-and-zoom canvas where teams add sticky notes, shapes, text, arrows and frames, with live cursors and synced editing. A dashboard lists boards; a share link controls view/edit access.

## Rendering & realtime (important)
- Render board objects on an HTML canvas using react-konva (Konva) - not DOM divs - so the board stays fast with hundreds of objects
- Use Liveblocks (or Yjs over a WebSocket) for presence (cursors, avatars) and to broadcast object create/update/delete so everyone stays in sync without conflicts
- Persist objects to Postgres so a board reloads with its content

## Key screens
- Dashboard: grid of board cards (thumbnail, title, last edited, collaborators), New board with a template picker (Blank, Retro, Brainstorm, Kanban)
- Board: infinite canvas (pan with space-drag, zoom with scroll), a floating left toolbar (Select, Sticky, Shape, Text, Pen, Connector, Frame, Image), a top bar with title, presence avatars, Share, and zoom controls
- Share dialog: link permission (view/edit) and copy link

## Schema (Prisma)
User (id, name, email, image, color), Workspace (id, name, ownerId), Board (id, workspaceId, title, thumbnailUrl, updatedAt), BoardObject (id, boardId, type, x, y, width, height, rotation, content, color, points Json, zIndex, updatedAt), BoardMember (id, boardId, userId, role)

## Toolbar tools to support
- Select: click to pick an object, drag to move, handles to resize/rotate, marquee to multi-select
- Sticky note: click to drop a colored note, type to edit, color swatch row to recolor
- Shape: rectangle, ellipse, arrow; Text: a free-floating text block
- Pen: freehand stroke stored as a points array; Connector: link two objects by anchor id
- Frame: a labeled container region; Image: upload to storage and place on the canvas

## Logic that must work
- Each object is an independent record so concurrent edits to different objects don't collide
- Pan/zoom is a viewport transform applied to the canvas; tools create objects at the cursor's board-space coordinates
- Connectors store start/end points (or anchor object ids) and redraw when endpoints move
- A share link's permission decides whether a visitor can edit or only view
- zIndex controls stacking; bring-to-front / send-to-back adjusts it
- Persist objects on change (debounced) and regenerate the board thumbnail periodically for the dashboard

## Style
Miro-like: light-gray dotted canvas, a floating rounded toolbar with clear icons, bright sticky colors (yellow/pink/blue/green), deep-blue app chrome, Inter font. Smooth pan and zoom. Desktop-first editing; mobile supports view + pan (note this).

Seed with 1 workspace and 3 boards, one filled with a retro template (three frames and ~12 colored stickies) so a board looks alive immediately. If Liveblocks isn't configured, fall back to a simple WebSocket broadcast or polling and note the limitation.

You are building a production-quality Miro-style collaborative whiteboard. This is hard; the real work is the canvas renderer and the realtime sync. Build iteratively and test multiplayer early.

## Stack
- Next.js 14 App Router (app shell, dashboard, auth) + a React canvas board using Konva (react-konva) or PixiJS
- Realtime: Yjs (CRDT) over a WebSocket provider, or Liveblocks if you want presence + storage managed for you
- PostgreSQL via Prisma for board metadata and member/permissions; Supabase for auth and storage (thumbnails, images)
- A stateful WebSocket host (Fly.io / Render) for the sync server - serverless functions are wrong for persistent sockets; call this out

## Architecture requirements
- Canvas, not DOM: render all board objects on a single canvas layer with a viewport transform (pan/zoom). Hit-testing and selection happen in board-space coordinates. Aim to stay smooth with 1,000+ objects via culling (only draw what's in view)
- Source of truth for live editing is a Yjs document (a shared map of objects). Persist snapshots of that doc to Postgres on a debounce so reloads and history work; don't write every keystroke to the DB
- Presence (cursors, selections, names/colors) is ephemeral awareness state, separate from the persisted doc
- Object model: a discriminated union by type (sticky, shape, text, connector, pen, frame, image) with a shared transform (x, y, w, h, rotation, z). Connectors reference anchor object ids so they follow moves
- Permissions enforced server-side: a share token maps to view/edit; the socket server rejects edits from view-only clients

## Implementation order
1. App shell + auth + Prisma board/workspace CRUD + dashboard with thumbnails
2. Static canvas: pan/zoom viewport, render and select objects from local state (sticky, shape, text first)
3. Yjs integration: move object state into a shared doc; open the same board in two tabs and confirm edits sync
4. Presence: live cursors, selection highlights, presence avatars
5. Remaining tools: connectors (anchored), freehand pen, frames, image upload to storage
6. Persistence: debounced snapshot of the Yjs doc to Postgres; thumbnail generation; reload restores state
7. Sharing & permissions (view/edit tokens), templates (retro/brainstorm/kanban), comments and dot-voting

## Quality bar
- 60fps pan/zoom with culling; debounce expensive operations; batch object updates
- Graceful reconnect on socket drop with state re-sync; handle two users moving the same object (CRDT resolves it)
- Loading skeletons, error boundaries, empty dashboard state
- Seed script: 1 workspace, 3 boards including a filled retro template

Start with step 1 and 2. Once the static canvas works, wire up Yjs in step 3 and have me open two browser tabs to verify live sync before continuing.

Design the complete UI for a Miro-style collaborative whiteboard app called Canvana. React + Tailwind, shadcn/ui for chrome, lucide-react icons. Clean playful aesthetic: light-gray dotted canvas background, floating rounded toolbars, bright sticky-note colors, a deep-blue app accent, Inter font.

## Screens to generate

### 1. Boards dashboard
- Top bar: logo, search, workspace switcher, user avatar, a deep-blue 'New board' button
- A template strip across the top: thumbnail cards for Blank, Retrospective, Brainstorm, Kanban, Mind map
- A responsive grid of board cards below: a board-preview thumbnail, title, 'Edited 2h ago', and a small stack of collaborator avatars; hover shows a kebab menu (Rename, Duplicate, Delete)

### 2. The board (canvas) - the hero screen
- Full-bleed dotted-grid canvas background
- A floating vertical toolbar pinned to the left: Select (cursor), Sticky note, Shape, Text, Pen, Connector/arrow, Frame, Image, Comment - each a clean icon with a tooltip; the active tool highlighted in deep blue. A small color swatch row appears under Sticky/Shape
- A floating top bar: editable board title, a row of presence avatars with colored rings, a Share button, and a comments/chat icon
- A floating bottom-right zoom cluster: minus, percentage, plus, and a fit-to-screen icon
- On the canvas itself, show realistic content: a cluster of colored sticky notes inside a labeled frame ('What went well'), a couple of connected shapes, a text label, and two other users' live cursors with name tags in their colors

### 3. Share dialog
- A modal: a link row with a permission dropdown (Anyone with the link can view / can edit) and a Copy button, an invite-by-email field with a role select, and a list of current members with their roles and avatars

### 4. Retro template (filled board state)
- The canvas showing three labeled frames side by side (Went well / To improve / Action items) each filled with several colored stickies, plus a small voting-dot indicator on a few of them

### 5. Selection + context toolbar
- A floating mini-toolbar that appears above a selected object: color swatches, a font-size control, bring-to-front/send-to-back, duplicate and delete icons; show it anchored to a selected sticky note

### 6. Template picker modal
- A modal grid of starter templates (Blank, Retrospective, Brainstorm, Kanban, Mind map, Flowchart), each a labeled preview thumbnail with a 'Use template' button on hover

### 7. Comment thread popover
- A pinned comment marker on the canvas that opens a small popover thread: author avatars, messages, a reply composer, and a resolve checkmark

Make the board chrome responsive: on smaller screens the left toolbar can collapse into a compact dock and the top bar condenses. Desktop is the primary target. Use realistic placeholder data - sticky-note text snippets, frame labels, collaborator names and colors, and a zoom level like 80%.

Build an online collaborative whiteboard app (Miro model) called Canvana.

## Entities
- Workspace: name, owner (user reference)
- Board: title, thumbnailUrl, workspace (reference), createdAt, updatedAt
- BoardObject: board (reference), type (sticky/shape/text/connector/pen/frame/image), x, y, width, height, rotation, content (text), color, points (json), zIndex
- BoardMember: board (reference), user (reference), role (editor/viewer)
- User extras: a cursor color for live presence

## Roles & permissions
- Editors create and edit objects on boards they can access
- Viewers see a board read-only via a share link
- Workspace admins create boards and manage members and sharing
- A share link grants view or edit access depending on its setting

## Pages
1. Dashboard: grid of board thumbnails (title, last edited, collaborator avatars) with a New board button and a template picker (Blank, Retrospective, Brainstorm, Kanban)
2. Board: an infinite pan-and-zoom canvas with a toolbar - Select, Sticky note, Shape, Text, Pen, Connector, Frame, Image. Objects can be added, moved, resized, recolored and deleted. Show live cursors of other people
3. Top bar on board: title, presence avatars, Share (copy link with view/edit), zoom controls
4. Share dialog: link permission (view/edit) and invite by email

## Rules
- Each object is stored as its own record so multiple people can edit different objects simultaneously without conflicts
- All edits sync live to everyone on the board; show other users' cursors and selections
- Connectors link two objects and redraw when either endpoint moves
- A view-only share link prevents editing; an edit link allows it

## Look & feel
Miro-inspired: light-gray dotted canvas, a floating rounded toolbar with clear icons, bright sticky-note colors (yellow/pink/blue/green), deep-blue app chrome, clean sans-serif typography. Smooth pan and zoom. Desktop-first editing; mobile supports view and pan.

Seed with 1 workspace and 3 boards, one pre-filled with a retrospective template (three labeled frames and ~12 colored stickies) so a board looks alive on first open.