How to Build Task management app with V0

1// Paste this prompt into V0's AI chat:
2// Create a Supabase schema for a task management app:
3// 1. projects table: id (uuid PK), name (text), description (text), owner_id (uuid FK), created_at (timestamptz)
4// 2. columns table: id (uuid PK), project_id (uuid FK), name (text — 'To Do', 'In Progress', 'Review', 'Done'), position (int for ordering)
5// 3. tasks table: id (uuid PK), column_id (uuid FK), title (text NOT NULL), description (text), assignee_id (uuid FK nullable), priority (text DEFAULT 'medium'), due_date (date nullable), position (int for ordering within column), created_at (timestamptz), updated_at (timestamptz)
6// 4. project_members table: project_id (uuid FK), user_id (uuid FK), role (text DEFAULT 'member'), PRIMARY KEY(project_id, user_id)
7// RLS: project_members can access their project's columns and tasks.
8// Seed a sample project with 4 columns and 8 tasks across columns.

1'use client'
2
3import { useState } from 'react'
4import { DndContext, closestCorners, DragEndEvent } from '@dnd-kit/core'
5import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable'
6import { Card, CardContent } from '@/components/ui/card'
7import { Badge } from '@/components/ui/badge'
8import { Avatar, AvatarFallback } from '@/components/ui/avatar'
9import { Button } from '@/components/ui/button'
10import { ScrollArea } from '@/components/ui/scroll-area'
11import { moveTask } from '@/app/actions/tasks'
12
13type Task = {
14  id: string
15  title: string
16  priority: string
17  assignee_id: string | null
18  due_date: string | null
19  position: number
20  column_id: string
21}
22
23type Column = {
24  id: string
25  name: string
26  position: number
27  tasks: Task[]
28}
29
30const priorityColors: Record<string, string> = {
31  high: 'bg-red-100 text-red-800',
32  medium: 'bg-yellow-100 text-yellow-800',
33  low: 'bg-green-100 text-green-800',
34}
35
36export function KanbanBoard({ initialColumns }: { initialColumns: Column[] }) {
37  const [columns, setColumns] = useState(initialColumns)
38
39  async function handleDragEnd(event: DragEndEvent) {
40    const { active, over } = event
41    if (!over) return
42
43    const taskId = active.id as string
44    const targetColumnId = over.id as string
45
46    // Optimistic update
47    setColumns((prev) => {
48      const updated = prev.map((col) => ({
49        ...col,
50        tasks: col.tasks.filter((t) => t.id !== taskId),
51      }))
52      const targetCol = updated.find((c) => c.id === targetColumnId)
53      const task = prev.flatMap((c) => c.tasks).find((t) => t.id === taskId)
54      if (targetCol && task) {
55        targetCol.tasks.push({ ...task, column_id: targetColumnId, position: targetCol.tasks.length })
56      }
57      return updated
58    })
59
60    await moveTask(taskId, targetColumnId, 0)
61  }
62
63  return (
64    <DndContext collisionDetection={closestCorners} onDragEnd={handleDragEnd}>
65      <div className="flex gap-4 overflow-x-auto p-4">
66        {columns.map((column) => (
67          <div key={column.id} className="w-72 flex-shrink-0">
68            <h3 className="font-semibold mb-3 flex items-center gap-2">
69              {column.name}
70              <Badge variant="secondary">{column.tasks.length}</Badge>
71            </h3>
72            <SortableContext items={column.tasks.map((t) => t.id)} strategy={verticalListSortingStrategy}>
73              <ScrollArea className="space-y-2">
74                {column.tasks.map((task) => (
75                  <Card key={task.id} className="mb-2 cursor-grab">
76                    <CardContent className="p-3">
77                      <p className="font-medium text-sm">{task.title}</p>
78                      <div className="flex items-center justify-between mt-2">
79                        <Badge className={priorityColors[task.priority]} variant="secondary">
80                          {task.priority}
81                        </Badge>
82                        {task.assignee_id && (
83                          <Avatar className="w-6 h-6">
84                            <AvatarFallback className="text-xs">U</AvatarFallback>
85                          </Avatar>
86                        )}
87                      </div>
88                    </CardContent>
89                  </Card>
90                ))}
91              </ScrollArea>
92            </SortableContext>
93            <Button variant="ghost" size="sm" className="w-full mt-2">+ Add task</Button>
94          </div>
95        ))}
96      </div>
97    </DndContext>
98  )
99}

1'use server'
2
3import { createClient } from '@/lib/supabase/server'
4import { revalidatePath } from 'next/cache'
5
6export async function createTask(projectId: string, columnId: string, title: string) {
7  const supabase = await createClient()
8  const { data: maxPos } = await supabase
9    .from('tasks')
10    .select('position')
11    .eq('column_id', columnId)
12    .order('position', { ascending: false })
13    .limit(1)
14    .single()
15
16  await supabase.from('tasks').insert({
17    column_id: columnId,
18    title,
19    position: (maxPos?.position ?? 0) + 1,
20  })
21  revalidatePath(`/projects/${projectId}`)
22}
23
24export async function moveTask(taskId: string, newColumnId: string, newPosition: number) {
25  const supabase = await createClient()
26  await supabase.from('tasks').update({
27    column_id: newColumnId,
28    position: newPosition,
29    updated_at: new Date().toISOString(),
30  }).eq('id', taskId)
31}
32
33export async function updateTask(taskId: string, data: {
34  title?: string
35  description?: string
36  priority?: string
37  assignee_id?: string | null
38  due_date?: string | null
39}) {
40  const supabase = await createClient()
41  await supabase.from('tasks').update({
42    ...data,
43    updated_at: new Date().toISOString(),
44  }).eq('id', taskId)
45}
46
47export async function deleteTask(taskId: string, projectId: string) {
48  const supabase = await createClient()
49  await supabase.from('tasks').delete().eq('id', taskId)
50  revalidatePath(`/projects/${projectId}`)
51}

1// Paste this prompt into V0's AI chat:
2// Build a task detail editor Dialog component.
3// When a user clicks a task card on the kanban board, open a shadcn/ui Dialog with:
4// - Input for task title (editable)
5// - Textarea for description
6// - Select for priority (low, medium, high)
7// - Select for assignee (list of project members with Avatar)
8// - Calendar date picker for due date
9// - Badge showing current column/status
10// - Button row: Save, Delete (with AlertDialog confirmation), Close
11// - Activity feed section showing when the task was created, moved, and edited
12// Use Server Action updateTask for saving and deleteTask for removing.
13// Use Form component for proper form handling.

1// Paste this prompt into V0's AI chat:
2// Build two views for the task management app:
3// 1. Project list page at app/projects/page.tsx:
4//    - Server Component fetching all projects for the current user via project_members
5//    - Card for each project showing name, description, task count, member Avatars
6//    - "New Project" Button that opens a Dialog with Form for name and description
7// 2. Add Tabs to app/projects/[id]/page.tsx to toggle between Board and List views:
8//    - Board tab: the KanbanBoard component
9//    - List tab: Table with columns for Title, Status (column name), Priority Badge, Assignee Avatar, Due Date, Actions DropdownMenu
10//    - Table rows should be sortable by clicking column headers
11// Use Server Components for data fetching, client components only for interactive elements.