How to Build a Task Management App with Lovable

1-- Run in Supabase SQL Editor
2create table public.boards (
3  id uuid primary key default gen_random_uuid(),
4  name text not null,
5  owner_id uuid not null references auth.users(id),
6  created_at timestamptz not null default now()
7);
8
9create table public.board_members (
10  id uuid primary key default gen_random_uuid(),
11  board_id uuid not null references public.boards(id) on delete cascade,
12  user_id uuid not null references auth.users(id),
13  role text not null default 'member' check (role in ('owner','admin','member')),
14  unique (board_id, user_id)
15);
16
17create table public.columns (
18  id uuid primary key default gen_random_uuid(),
19  board_id uuid not null references public.boards(id) on delete cascade,
20  name text not null,
21  position integer not null default 0
22);
23
24create table public.tasks (
25  id uuid primary key default gen_random_uuid(),
26  column_id uuid not null references public.columns(id) on delete cascade,
27  board_id uuid not null references public.boards(id) on delete cascade,
28  title text not null,
29  description text,
30  priority text not null default 'medium' check (priority in ('low','medium','high','urgent')),
31  labels text[] not null default '{}',
32  assignee_id uuid references auth.users(id),
33  due_date date,
34  position integer not null default 0,
35  created_at timestamptz not null default now()
36);
37
38create table public.task_comments (
39  id uuid primary key default gen_random_uuid(),
40  task_id uuid not null references public.tasks(id) on delete cascade,
41  user_id uuid not null references auth.users(id),
42  body text not null,
43  created_at timestamptz not null default now()
44);
45
46-- RPC: atomically reorder tasks when a card is dragged
47create or replace function public.reorder_tasks(
48  p_board_id uuid,
49  p_column_id uuid,
50  p_task_ids uuid[]
51) returns void language plpgsql security definer as $$
52declare
53  i integer;
54begin
55  for i in 1..array_length(p_task_ids, 1) loop
56    update public.tasks
57    set position = i, column_id = p_column_id
58    where id = p_task_ids[i] and board_id = p_board_id;
59  end loop;
60end;
61$$;
62
63alter table public.boards enable row level security;
64alter table public.board_members enable row level security;
65alter table public.columns enable row level security;
66alter table public.tasks enable row level security;
67alter table public.task_comments enable row level security;
68
69-- Helper function to check board membership
70create or replace function public.is_board_member(p_board_id uuid)
71returns boolean language sql security definer as $$
72  select exists (select 1 from public.board_members where board_id = p_board_id and user_id = auth.uid());
73$$;
74
75create policy "members_read_board" on public.boards for select to authenticated using (public.is_board_member(id));
76create policy "members_read_columns" on public.columns for select to authenticated using (public.is_board_member(board_id));
77create policy "members_all_tasks" on public.tasks for all to authenticated using (public.is_board_member(board_id)) with check (public.is_board_member(board_id));
78create policy "members_comments" on public.task_comments for all to authenticated using (public.is_board_member((select board_id from public.tasks where id = task_id)));
79create policy "owner_manage_members" on public.board_members for all to authenticated using (board_id in (select id from public.boards where owner_id = auth.uid()));
80create policy "self_read_membership" on public.board_members for select to authenticated using (user_id = auth.uid());

1// Lovable prompt — paste into chat
2// Build a Kanban task management app with Supabase and dnd-kit.
3// Tables: boards, board_members, columns, tasks (priority, labels, assignee_id, due_date, position), task_comments.
4// Pages:
5//   /boards — list of boards the user is a member of (Card per board, name, member count, Create Board button).
6//   /board/[id] — Kanban view: horizontal scroll of columns, each column is a Card header with column name and task count.
7//     Tasks in each column: Card with title, priority Badge (low=outline, medium=secondary, high=default, urgent=destructive),
8//     assignee Avatar, due date if set, label chips. Drag-and-drop cards between columns using dnd-kit.
9//     Add Task button at bottom of each column opens a Dialog: title Input, description Textarea, priority Select,
10//     due date Popover Calendar, assignee Select from board members.
11//     Clicking a card opens task detail Sheet: full description, comments list, Add Comment form.
12//     Each card has a DropdownMenu with: Edit, Move to column, Delete.
13// On drag end, call supabase.rpc('reorder_tasks', ...) with the new column_id and ordered task IDs.
14// Use shadcn/ui throughout. Supabase Realtime on tasks and task_comments channels.

1// src/components/KanbanBoard.tsx (drag logic)
2import { useState, useCallback } from 'react'
3import { DndContext, DragEndEvent, DragOverlay, useSensor, useSensors, PointerSensor } from '@dnd-kit/core'
4import { SortableContext, arrayMove, verticalListSortingStrategy } from '@dnd-kit/sortable'
5import { supabase } from '@/lib/supabase'
6import { toast } from 'sonner'
7
8type Task = { id: string; column_id: string; position: number; title: string; priority: string }
9type Column = { id: string; name: string; position: number }
10
11type Props = { boardId: string; columns: Column[]; initialTasks: Task[] }
12
13export function KanbanBoard({ boardId, columns, initialTasks }: Props) {
14  const [tasks, setTasks] = useState<Task[]>(initialTasks)
15  const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 8 } }))
16
17  const tasksByColumn = useCallback(
18    (colId: string) => tasks.filter(t => t.column_id === colId).sort((a, b) => a.position - b.position),
19    [tasks]
20  )
21
22  async function handleDragEnd(event: DragEndEvent) {
23    const { active, over } = event
24    if (!over) return
25
26    const activeTask = tasks.find(t => t.id === active.id)
27    if (!activeTask) return
28
29    // Determine target column (over could be a column or another task)
30    const targetColumnId = tasks.find(t => t.id === over.id)?.column_id ?? over.id as string
31    const prevTasks = tasks
32
33    // Optimistic update
34    setTasks(prev => {
35      const moved = prev.map(t => t.id === active.id ? { ...t, column_id: targetColumnId } : t)
36      const colTasks = moved.filter(t => t.column_id === targetColumnId).sort((a, b) => a.position - b.position)
37      const activeIdx = colTasks.findIndex(t => t.id === active.id)
38      const overIdx = colTasks.findIndex(t => t.id === over.id)
39      const reordered = activeIdx !== overIdx && overIdx !== -1 ? arrayMove(colTasks, activeIdx, overIdx) : colTasks
40      const withPositions = reordered.map((t, i) => ({ ...t, position: i + 1 }))
41      return moved.map(t => withPositions.find(w => w.id === t.id) ?? t)
42    })
43
44    // Persist atomically
45    const colTasks = tasks
46      .filter(t => t.column_id === targetColumnId || t.id === active.id)
47      .map(t => ({ ...t, column_id: targetColumnId }))
48      .sort((a, b) => a.position - b.position)
49    const orderedIds = colTasks.map(t => t.id)
50
51    const { error } = await supabase.rpc('reorder_tasks', {
52      p_board_id: boardId,
53      p_column_id: targetColumnId,
54      p_task_ids: orderedIds
55    })
56
57    if (error) {
58      setTasks(prevTasks) // rollback
59      toast.error('Failed to save task order')
60    }
61  }
62
63  return (
64    <DndContext sensors={sensors} onDragEnd={handleDragEnd}>
65      <div className="flex gap-4 overflow-x-auto p-4">
66        {columns.map(col => (
67          <div key={col.id} className="w-72 shrink-0">
68            <SortableContext items={tasksByColumn(col.id).map(t => t.id)} strategy={verticalListSortingStrategy}>
69              {/* Column render — TaskCard components go here */}
70              <p className="font-medium mb-2">{col.name} ({tasksByColumn(col.id).length})</p>
71              {tasksByColumn(col.id).map(task => (
72                <div key={task.id} className="mb-2 p-3 bg-card border rounded-md text-sm">{task.title}</div>
73              ))}
74            </SortableContext>
75          </div>
76        ))}
77      </div>
78    </DndContext>
79  )
80}

1// src/components/TaskCard.tsx
2import { useSortable } from '@dnd-kit/sortable'
3import { CSS } from '@dnd-kit/utilities'
4import { Card, CardContent } from '@/components/ui/card'
5import { Badge } from '@/components/ui/badge'
6import { Avatar, AvatarFallback } from '@/components/ui/avatar'
7import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
8import { Button } from '@/components/ui/button'
9import { MoreHorizontal, Calendar } from 'lucide-react'
10import { format } from 'date-fns'
11
12type Task = { id: string; title: string; priority: string; labels: string[]; due_date?: string; assignee?: { full_name: string } }
13type Props = { task: Task; onEdit: () => void; onDelete: () => void; onClick: () => void }
14
15const priorityVariants: Record<string, 'outline' | 'secondary' | 'default' | 'destructive'> = {
16  low: 'outline', medium: 'secondary', high: 'default', urgent: 'destructive'
17}
18
19export function TaskCard({ task, onEdit, onDelete, onClick }: Props) {
20  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: task.id })
21
22  const style = {
23    transform: CSS.Transform.toString(transform),
24    transition,
25    opacity: isDragging ? 0.5 : 1
26  }
27
28  return (
29    <div ref={setNodeRef} style={style} {...attributes}>
30      <Card className="mb-2 cursor-pointer hover:shadow-md transition-shadow">
31        <CardContent className="p-3 space-y-2">
32          <div className="flex items-start justify-between gap-2">
33            <p {...listeners} className="text-sm font-medium flex-1 cursor-grab active:cursor-grabbing" onClick={onClick}>{task.title}</p>
34            <DropdownMenu>
35              <DropdownMenuTrigger asChild>
36                <Button variant="ghost" size="icon" className="h-6 w-6 shrink-0">
37                  <MoreHorizontal className="h-3 w-3" />
38                </Button>
39              </DropdownMenuTrigger>
40              <DropdownMenuContent align="end">
41                <DropdownMenuItem onClick={onEdit}>Edit</DropdownMenuItem>
42                <DropdownMenuItem onClick={onDelete} className="text-destructive">Delete</DropdownMenuItem>
43              </DropdownMenuContent>
44            </DropdownMenu>
45          </div>
46          <div className="flex flex-wrap gap-1">
47            <Badge variant={priorityVariants[task.priority]} className="text-xs">{task.priority}</Badge>
48            {task.labels.map(label => <Badge key={label} variant="outline" className="text-xs">{label}</Badge>)}
49          </div>
50          <div className="flex items-center justify-between">
51            {task.due_date && (
52              <span className="flex items-center gap-1 text-xs text-muted-foreground">
53                <Calendar className="h-3 w-3" />
54                {format(new Date(task.due_date), 'MMM d')}
55              </span>
56            )}
57            {task.assignee && (
58              <Avatar className="h-6 w-6">
59                <AvatarFallback className="text-xs">{task.assignee.full_name.slice(0, 2).toUpperCase()}</AvatarFallback>
60              </Avatar>
61            )}
62          </div>
63        </CardContent>
64      </Card>
65    </div>
66  )
67}

1// src/hooks/useBoardRealtime.ts
2import { useEffect } from 'react'
3import { supabase } from '@/lib/supabase'
4
5type Task = { id: string; column_id: string; position: number; title: string; priority: string; labels: string[] }
6
7export function useBoardRealtime(
8  boardId: string,
9  setTasks: React.Dispatch<React.SetStateAction<Task[]>>
10) {
11  useEffect(() => {
12    const channel = supabase
13      .channel(`board-${boardId}`)
14      .on(
15        'postgres_changes',
16        { event: '*', schema: 'public', table: 'tasks', filter: `board_id=eq.${boardId}` },
17        payload => {
18          if (payload.eventType === 'INSERT') {
19            setTasks(prev => [...prev, payload.new as Task])
20          } else if (payload.eventType === 'UPDATE') {
21            setTasks(prev => prev.map(t => t.id === payload.new.id ? { ...t, ...payload.new } as Task : t))
22          } else if (payload.eventType === 'DELETE') {
23            setTasks(prev => prev.filter(t => t.id !== payload.old.id))
24          }
25        }
26      )
27      .subscribe()
28
29    return () => { supabase.removeChannel(channel) }
30  }, [boardId, setTasks])
31}