How to Build Project management tool with V0

1// Paste this prompt into V0's AI chat:
2// Build a project management tool. Create a Supabase schema with:
3// 1. projects: id (uuid PK), owner_id (uuid FK), name (text), description (text), created_at (timestamptz)
4// 2. boards: id (uuid PK), project_id (uuid FK), name (text), position (integer), created_at (timestamptz)
5// 3. cards: id (uuid PK), board_id (uuid FK), title (text), description (text), assignee_id (uuid FK nullable), labels (text[]), due_date (date), position (integer), created_at (timestamptz), updated_at (timestamptz)
6// 4. members: id (uuid PK), project_id (uuid FK), user_id (uuid FK), role (text check owner/admin/member/viewer), invited_at (timestamptz) with unique constraint on (project_id, user_id)
7// 5. comments: id (uuid PK), card_id (uuid FK), author_id (uuid FK), content (text), created_at (timestamptz)
8// Enable Supabase Realtime on cards and comments tables.
9// RLS: cards and comments require membership in the project. Members can be read by other project members.
10// Generate SQL migration and TypeScript types.

1// Paste this prompt into V0's AI chat:
2// Build a kanban board view at app/projects/[id]/page.tsx.
3// Requirements:
4// - Fetch project boards and cards from Supabase
5// - Display boards as columns in a horizontal ScrollArea
6// - Each column has: board name header, list of Cards, "Add Card" Button at bottom
7// - Each Card shows: title, assignee Avatar, labels as Badges, due date text
8// - Use @dnd-kit/core for drag-and-drop:
9//   - DndContext wrapping all columns
10//   - SortableContext for each column
11//   - useSortable on each Card
12//   - onDragEnd handler that calls moveCard Server Action with new board_id and position
13// - Clicking a Card opens a Sheet (right sidebar) with card details
14// - "Add Board" Button to create new columns via Dialog
15// - Use optimistic updates: useOptimistic to move the card visually before Server Action completes
16// - 'use client' for the board component (drag-and-drop requires browser APIs)
17// - Server Actions: createCard(), moveCard(), createBoard()

1// Paste this prompt into V0's AI chat:
2// Build a card detail Sheet component for the project management board.
3// Requirements:
4// - Opens from right side when clicking a card on the kanban board
5// - Header: card title (editable Input on click), DropdownMenu for actions (delete, archive)
6// - Body sections:
7//   - Description: Textarea, auto-saves on blur via Server Action
8//   - Assignee: Avatar + name, Select dropdown to change assignee from project members
9//   - Labels: Badge display, Popover with ToggleGroup to add/remove labels (bug/feature/design/urgent/documentation)
10//   - Due Date: Calendar + Popover (DatePicker pattern)
11//   - Separator between sections
12// - Comments section at bottom:
13//   - List of existing comments with Avatar, author name, timestamp, content
14//   - Textarea + Button for adding new comment via Server Action addComment()
15//   - New comments appear instantly via optimistic update
16// - Server Actions: updateCard(), deleteCard(), addComment()
17// - 'use client' component for interactivity

1'use client'
2
3import { useEffect } from 'react'
4import { createClient } from '@/lib/supabase/client'
5import { useRouter } from 'next/navigation'
6
7export function RealtimeProvider({
8  projectId,
9  children,
10}: {
11  projectId: string
12  children: React.ReactNode
13}) {
14  const router = useRouter()
15  const supabase = createClient()
16
17  useEffect(() => {
18    const channel = supabase
19      .channel(`project-${projectId}`)
20      .on(
21        'postgres_changes',
22        {
23          event: '*',
24          schema: 'public',
25          table: 'cards',
26          filter: `board_id=in.(select id from boards where project_id='${projectId}')`,
27        },
28        () => router.refresh()
29      )
30      .on(
31        'postgres_changes',
32        {
33          event: 'INSERT',
34          schema: 'public',
35          table: 'comments',
36        },
37        () => router.refresh()
38      )
39      .subscribe()
40
41    return () => {
42      supabase.removeChannel(channel)
43    }
44  }, [projectId, router, supabase])
45
46  return <>{children}</>
47}

1// Paste this prompt into V0's AI chat:
2// Build project settings at app/projects/[id]/settings/page.tsx.
3// Requirements:
4// - Only accessible to project owner and admins
5// - Two sections via shadcn/ui Tabs: "General" and "Members"
6// - General tab: Input for project name, Textarea for description, save Button via Server Action
7// - Members tab:
8//   - Table of current members with columns: Avatar + name, email, role Badge, joined date
9//   - Role column has a Select dropdown (owner/admin/member/viewer) for role changes (only owner can change roles)
10//   - DropdownMenu on each row for actions: Change Role, Remove Member
11//   - "Invite Member" Button opens Dialog with email Input and role Select
12//   - Server Actions: inviteMember(), updateMemberRole(), removeMember()
13// - AlertDialog for confirming member removal
14// - Toast notification for successful invite