How to Clone Trello

Create a full-stack Trello-style kanban app called Flowboard using Next.js (App Router), TypeScript, Tailwind CSS, dnd-kit, Prisma and SQLite (swappable to Postgres).

## What to build
Boards containing draggable lists of draggable cards, with a card-detail modal (description, checklist, labels, due date, comments). Multi-user boards via email invite. Free tier capped at 3 boards per user.

## Key screens
- Dashboard: board tiles grid (colored backgrounds, star toggle, starred section first), create-board dialog with title + 8 color swatches
- Board page: horizontal scrolling list row on the board color; lists with inline-rename titles, card stacks, an 'Add a card' inline composer (textarea + Add button, Esc cancels); 'Add another list' ghost button
- Cards display label strips, title, due chip (red when overdue), checklist progress badge, comment count and member avatars
- Card modal at /b/[boardId]?card=[cardId] (intercepted route or query param): title, description editor with save/cancel, checklist CRUD with progress bar, label picker (6 colors, editable names per board), due date picker, member assign, comments list with composer, archive button
- Auth: NextAuth (credentials + Google); board sharing by invite email creates a BoardMember row

## Schema (Prisma)
User (id, name, email, image), Board (id, ownerId, title, color, starred), BoardMember (boardId, userId, role), List (id, boardId, title, position Float), Card (id, listId, title, description?, dueDate?, position Float, archived), Label (id, boardId, name, color), CardLabel (cardId, labelId), CardMember (cardId, userId), ChecklistItem (id, cardId, text, done, position Int), Comment (id, cardId, userId, body, createdAt), Activity (id, boardId, cardId?, userId, text, createdAt)

## Drag-and-drop that must work (dnd-kit)
- Cards: sortable within a list and droppable across lists; optimistic UI update, then a server action persists {cardId, toListId, newPosition}
- Lists: horizontal sortable; same fractional-position strategy
- Fractional positioning: new position = midpoint of neighbors; when gaps get below 0.0001, renumber the whole list server-side
- DragOverlay renders a tilted card clone with a stronger shadow while dragging; the origin slot shows a dimmed placeholder

## Logic that must work
- Authorization: every action verifies board membership; only the owner deletes a board
- Activity log entries on create/move/archive/due-date changes, shown newest-first in the card modal
- Checklist progress = done/total rendered as a badge and a progress bar; checking the last item posts an activity entry
- Free plan: creating a 4th board returns an error the UI turns into an upgrade dialog
- Board filter state in URL search params: ?label=red&member=2&due=overdue filters rendered cards client-side

## Keyboard & interaction details
- Enter in the card composer adds the card and keeps the composer open for rapid entry; Esc closes it
- Clicking a list title turns it into an input, saved on blur or Enter
- Card modal closes on Esc or backdrop click, returning to the board scroll position unchanged

## Style
Trello-inspired: saturated board backgrounds (#0079BF default blue, plus #519839 green, #89609E purple, #D29034 orange), #F1F2F4 list surfaces with rounded-xl corners, white cards with hover lift and drag tilt, white-on-translucent board header, Inter font. Mobile: single-list view with snap horizontal scrolling.

Seed with a demo user ([email protected] / password123) owning a 'Product Launch' board: lists Backlog / In Progress / Review / Done, 12 cards with mixed labels, due dates (2 overdue), checklists and comments, plus a second member user so avatars and assignment are demoable.

You are building a production-quality Trello clone called Flowboard. Work iteratively: scaffold, then implement feature by feature, running the app after each step.

## Stack
- Next.js 14 App Router, TypeScript strict, Tailwind CSS, shadcn/ui (dialogs, popovers, dropdowns)
- dnd-kit for all drag-and-drop; Zustand for board-page client state
- PostgreSQL via Prisma; Supabase for auth (email + Google) and Realtime (postgres_changes) for live board sync
- Zod validation on every server action; Stripe Billing for the Pro plan

## Architecture requirements
- Board page is the only heavy client route; dashboard, settings and marketing pages are server components
- lib/positions.ts: fractional-indexing helpers (between(a, b), needsRebalance(list), rebalance(list)) with unit tests covering head/tail/midpoint-collision cases - every ordered entity (lists, cards, checklist items) uses it
- Mutations are server actions that (1) Zod-parse input, (2) verify board membership via a single requireBoardAccess(boardId, userId) helper, (3) write the change + an Activity row in one transaction, (4) return the canonical row for cache reconciliation
- Optimistic updates: the Zustand store applies moves instantly; server action failure rolls back and toasts. Realtime events from other users patch the store, keyed by updatedAt to ignore stale events
- Activity logging is centralized in lib/activity.ts with typed action templates - no ad-hoc strings scattered through actions

## Data model
users, boards (color, starred, owner_id, visibility enum), board_members (role enum admin/member/observer), lists (position float), cards (position float, due_date, archived_at), labels, card_labels, card_members, checklist_items, comments, activity, notifications. Indexes: cards(list_id, position), activity(board_id, created_at desc), board_members(user_id).

## Implementation order
1. Scaffold + Prisma schema + auth; dashboard with board CRUD, color picker, starring
2. Board page rendering: lists row, card stacks, inline add-card/add-list composers, list rename - no drag yet
3. Drag-and-drop: dnd-kit sortable cards (within + across lists) and sortable lists, DragOverlay styling, optimistic persistence through the positions module
4. Card modal: intercepted parallel route (@modal) so the board stays mounted behind it; description, checklists, labels, due dates, member assignment, archive/restore
5. Comments + activity feed; @mention parsing that creates notification rows
6. Realtime: subscribe to postgres_changes filtered by board_id; reconcile into the store; presence avatars in the board header
7. Members & permissions: invite by email (Resend), roles, observer = read+comment only, board visibility settings
8. Billing: free tier capped at 3 boards per workspace, Stripe Checkout for Pro, webhook flips the plan, board-creation policy reads it server-side

## Quality bar
- Drag must stay at 60fps on a 100-card board: virtualize nothing prematurely, but memoize card components and avoid store-wide rerenders (selector subscriptions)
- Keyboard accessibility: dnd-kit keyboard sensor enabled; card modal fully tabbable; Esc closes composers then modal
- Empty states designed, not default: new board shows ghost lists suggesting 'To Do / Doing / Done' one-click setup
- generateMetadata on public boards; private boards return 404 (not 403) to non-members to avoid existence leaks
- Seed script: npx prisma db seed creates 2 users, 2 boards (one shared) with 4 lists, 15 cards, labels, checklists, comments and activity history

Start with step 1. After each step, tell me what to verify in the browser before moving on.

Design the complete UI for a Trello-style kanban app called Flowboard. React + Tailwind, shadcn/ui components, lucide-react icons. Aesthetic: saturated board backgrounds (#0079BF blue default), light gray list surfaces (#F1F2F4) with rounded-xl corners, crisp white cards with soft shadows, white translucent header chrome, Inter font.

## Screens to generate

### 1. Dashboard
- Top nav: logo left, center search input ('Search boards...'), right: Create button (blue) and avatar menu
- 'Starred boards' section then 'Your boards': grid of board tiles (16:9, colored or subtle gradient backgrounds, bold white title bottom-left, star icon top-right that fills on hover), plus a dashed 'Create new board' tile
- Create-board popover: title input, 8-swatch background picker (4 colors, 4 gradients), Create button

### 2. Board view (the core screen)
- Board header bar (translucent white over the board color): editable board title, star icon, member avatar stack with '+ Invite' pill, right side: Filter button and '...' menu
- Horizontal row of lists (272px wide, #F1F2F4, rounded-xl): list header (title + '...' icon), cards, and an 'Add a card +' ghost row; after the last list a translucent 'Add another list +' button
- Card anatomy: colored label strips (3px tall pills) on top, title, badge row: clock chip with date (one red 'Overdue' variant, one neutral), checklist badge '3/5' with a tiny check icon, comment count, and overlapping member avatars right-aligned
- Show one card mid-drag: tilted 4 degrees with a stronger shadow, and a dashed-outline placeholder slot in the origin list
- One open inline composer: textarea with 'Enter a title for this card...' placeholder, blue Add card button + X cancel

### 3. Card detail modal
- Wide modal (768px) over a dimmed board. Header: card title (h2), 'in list In Progress' subtitle with list icon
- Two columns. Main: Labels row (colored pills + add button), Description section with placeholder and Edit button, Checklist section (progress bar at 60%, items with checkboxes - two checked with strikethrough, 'Add an item' input), Activity section: comment composer with avatar, then comments and gray activity entries ('Ana moved this card from Backlog to In Progress - yesterday')
- Right sidebar: 'Add to card' label above stacked full-width buttons with icons: Members, Labels, Checklist, Due date, Attachment; then 'Actions': Move, Copy, Archive (red text)
- Include one open popover example: the Labels popover with 6 colored rows, checkmarks on applied ones, and an Edit pencil per row

### 4. Filter popover
- Anchored under the Filter button: Keyword input, 'Members' row of avatar toggles, 'Labels' checklist with colored squares, 'Due date' radio group (Overdue, Due this week, No date), Clear filters link

### 5. Invite modal
- Email input with an Invite button, share-link row with copy button, member list with role dropdowns (Admin / Member / Observer) and a remove icon

### 6. My cards page
- Page header 'My cards' with a board filter dropdown; cards grouped under date headers (Overdue in red, Today, This week, Later), each row showing the card title, its board and list as a gray breadcrumb ('Product Launch / In Progress'), label pills and the due chip
- Empty state variant: relaxed illustration placeholder, 'No cards assigned to you' caption and a 'Browse boards' button

### 7. Notifications popover
- Bell icon in the top nav with a red count badge; popover lists notification rows (avatar, bold actor name + action text, board context line, timestamp) with unread rows on a blue-tinted background and a 'Mark all read' link in the header

Make every screen responsive. On mobile: the board becomes one full-width list at a time with snap horizontal scrolling and dot indicators, the card modal becomes a full-screen sheet, and the dashboard grid stacks to 2 columns. Use realistic placeholder data - a 'Product Launch' board with lists Backlog, In Progress, Review, Done and believable card titles like 'Write onboarding emails' and 'Fix Stripe webhook retries'.

Build a kanban project management app (Trello model) called Flowboard.

## Entities
- Board: title, backgroundColor (choice of 8), starred (boolean), owner (user reference), visibility (private/workspace)
- BoardMember: board reference, user, role (admin/member/observer)
- List: board reference, title, position (number)
- Card: list reference, title, description (long text), dueDate (nullable), position (number), archived (boolean), createdAt
- Label: board reference, name, color (green/yellow/orange/red/purple/blue); CardLabel: card + label references
- CardAssignment: card reference, user reference
- ChecklistItem: card reference, text, done (boolean), position
- Comment: card reference, author, body, createdAt
- Activity: board reference, card reference (nullable), user, text, createdAt

## Roles & permissions
- Users see only boards they own or are members of
- Admins manage board settings, labels and members; members edit lists and cards; observers can only view and comment
- Only the board owner can delete the board (with a confirm dialog)
- Free users can own at most 3 boards; the 4th attempt shows an upgrade message (Pro plan placeholder at $5/month)

## Pages
1. Boards home: starred boards section, all-boards grid (colored tiles with titles), create-board dialog with title and color swatches
2. Board view: horizontal lists on the board's background color; each list shows its cards stacked with label strips, due-date chips (red when overdue), checklist progress (like 2/5) and assignee avatars; drag cards between lists and reorder lists; inline 'Add a card' and 'Add another list' composers
3. Card detail (modal over the board): editable title and description, label picker, due date picker, member assignment, checklist with progress bar, comment thread, activity log, archive button
4. Board menu: rename, change background, members management (invite by email, change roles, remove), archived cards list with restore
5. Filter bar: filter cards by label, assignee and due status (overdue / this week / none)
6. My cards: cross-board list of cards assigned to me, grouped by due date

## Rules
- Moving a card or list persists its new position immediately; positions are numeric and renumbered when needed
- Every create/move/archive/due-date action writes an Activity entry like 'Sam moved Design review from Backlog to In Progress'
- A card is overdue when dueDate is past and the card is not in the rightmost list; overdue chips render red
- Archived cards leave the board but remain restorable from the board menu; deleting from the archive is permanent
- Checklist progress shows done/total on the card face only when the card has at least one item

## Look & feel
Trello-inspired: saturated board backgrounds (default #0079BF blue, plus green, purple, orange), light gray (#F1F2F4) rounded lists, white cards with subtle shadow that lifts while dragging, translucent white board header, Inter font. Mobile responsive: lists become full-width panels with horizontal swipe.

Seed with a demo 'Product Launch' board owned by a demo user: lists Backlog / In Progress / Review / Done, 12 cards spread across them with varied labels, two overdue due dates, checklists in progress, a second member assigned to several cards, and a handful of comments and activity entries so the board demonstrates every feature.