How to Build a Project Management Tool with Lovable

1-- Run in Supabase SQL Editor
2
3CREATE TYPE task_priority AS ENUM ('low', 'medium', 'high', 'urgent');
4
5CREATE TABLE projects (
6  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
7  name TEXT NOT NULL,
8  description TEXT,
9  owner_id UUID REFERENCES auth.users NOT NULL,
10  created_at TIMESTAMPTZ DEFAULT now()
11);
12
13CREATE TABLE project_members (
14  project_id UUID REFERENCES projects(id) ON DELETE CASCADE NOT NULL,
15  user_id UUID REFERENCES auth.users NOT NULL,
16  role TEXT NOT NULL DEFAULT 'member' CHECK (role IN ('owner', 'admin', 'member', 'viewer')),
17  joined_at TIMESTAMPTZ DEFAULT now(),
18  PRIMARY KEY (project_id, user_id)
19);
20
21CREATE TABLE boards (
22  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
23  project_id UUID REFERENCES projects(id) ON DELETE CASCADE NOT NULL,
24  name TEXT NOT NULL DEFAULT 'Main Board',
25  created_at TIMESTAMPTZ DEFAULT now()
26);
27
28CREATE TABLE columns (
29  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
30  board_id UUID REFERENCES boards(id) ON DELETE CASCADE NOT NULL,
31  name TEXT NOT NULL,
32  position FLOAT NOT NULL DEFAULT 0,
33  created_at TIMESTAMPTZ DEFAULT now()
34);
35
36CREATE TABLE tasks (
37  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
38  column_id UUID REFERENCES columns(id) ON DELETE CASCADE NOT NULL,
39  project_id UUID REFERENCES projects(id) NOT NULL,
40  title TEXT NOT NULL,
41  description TEXT,
42  assignee_id UUID REFERENCES auth.users,
43  priority task_priority DEFAULT 'medium',
44  due_date DATE,
45  labels TEXT[] DEFAULT '{}',
46  position FLOAT NOT NULL DEFAULT 0,
47  created_by UUID REFERENCES auth.users NOT NULL,
48  created_at TIMESTAMPTZ DEFAULT now(),
49  updated_at TIMESTAMPTZ DEFAULT now()
50);
51
52-- Enable RLS
53ALTER TABLE projects ENABLE ROW LEVEL SECURITY;
54ALTER TABLE project_members ENABLE ROW LEVEL SECURITY;
55ALTER TABLE boards ENABLE ROW LEVEL SECURITY;
56ALTER TABLE columns ENABLE ROW LEVEL SECURITY;
57ALTER TABLE tasks ENABLE ROW LEVEL SECURITY;
58
59-- Projects: members can see projects they belong to
60CREATE POLICY "Members see projects" ON projects FOR SELECT USING (
61  owner_id = auth.uid() OR
62  EXISTS (SELECT 1 FROM project_members WHERE project_id = id AND user_id = auth.uid())
63);
64CREATE POLICY "Owners create projects" ON projects FOR INSERT WITH CHECK (owner_id = auth.uid());
65CREATE POLICY "Owners update projects" ON projects FOR UPDATE USING (owner_id = auth.uid());
66
67-- Tasks: project members see all tasks in their projects
68CREATE POLICY "Members see project tasks" ON tasks FOR SELECT USING (
69  EXISTS (SELECT 1 FROM project_members WHERE project_id = tasks.project_id AND user_id = auth.uid())
70  OR EXISTS (SELECT 1 FROM projects WHERE id = tasks.project_id AND owner_id = auth.uid())
71);
72CREATE POLICY "Members create tasks" ON tasks FOR INSERT WITH CHECK (
73  EXISTS (SELECT 1 FROM project_members WHERE project_id = tasks.project_id AND user_id = auth.uid())
74  OR EXISTS (SELECT 1 FROM projects WHERE id = tasks.project_id AND owner_id = auth.uid())
75);
76CREATE POLICY "Members update tasks" ON tasks FOR UPDATE USING (
77  EXISTS (SELECT 1 FROM project_members WHERE project_id = tasks.project_id AND user_id = auth.uid())
78  OR EXISTS (SELECT 1 FROM projects WHERE id = tasks.project_id AND owner_id = auth.uid())
79);
80
81-- Boards and columns: same project membership rule
82CREATE POLICY "Members see boards" ON boards FOR SELECT USING (
83  EXISTS (SELECT 1 FROM project_members WHERE project_id = boards.project_id AND user_id = auth.uid())
84  OR EXISTS (SELECT 1 FROM projects WHERE id = boards.project_id AND owner_id = auth.uid())
85);
86CREATE POLICY "Members see columns" ON columns FOR SELECT USING (
87  EXISTS (SELECT 1 FROM boards b JOIN project_members pm ON b.project_id = pm.project_id
88  WHERE b.id = columns.board_id AND pm.user_id = auth.uid())
89);
90CREATE POLICY "Members manage columns" ON columns FOR ALL USING (
91  EXISTS (SELECT 1 FROM boards b JOIN project_members pm ON b.project_id = pm.project_id
92  WHERE b.id = columns.board_id AND pm.user_id = auth.uid())
93);

1Build a Kanban board view for the project management tool:
2
31. Board layout: horizontal scrollable container, each column is 280px wide with a fixed header
42. Column header: column name + task count badge + "Add task" button (+ icon)
53. Task cards (shadcn Card, draggable):
6   - Title (bold, max 2 lines with overflow-hidden)
7   - Priority badge (low=gray, medium=blue, high=orange, urgent=red)
8   - Due date (red text if overdue)
9   - Assignee avatar (shadcn Avatar, initials fallback)
10   - Drag handle icon on the left
11
124. Drag-and-drop behavior:
13   - Use HTML5 draggable attribute (draggable={true})
14   - onDragStart: store task ID and source column ID in state
15   - onDragOver on column: preventDefault() to allow drop, highlight column with bg-blue-50
16   - onDrop: calculate new position (between previous and next task positions), update local state immediately (optimistic), then call Supabase update in background
17   - If Supabase update fails, revert local state and show error toast
18
195. Quick add task: clicking "Add task" shows an inline input at the bottom of the column. Press Enter or click the checkmark to create. Position = last task position + 1.
20
21Fetch columns ordered by position, tasks ordered by position within each column from Supabase.
22Group tasks by column_id in a Map for rendering.

1Add a list view to the project page that can be toggled alongside the Kanban view:
2
31. View toggle: two icon buttons in the top-right of the project page (grid icon = Kanban, list icon = List). Save preference to localStorage.
4
52. List view: shadcn DataTable with columns:
6   - Title (clickable, opens task detail Dialog)
7   - Column/Stage (the column this task is in)
8   - Priority (Badge with color)
9   - Assignee (Avatar + name)
10   - Due Date (formatted, red if overdue)
11   - Labels (small chips)
12   - Actions (Edit, Move to column dropdown, Delete)
13
143. Toolbar above the table:
15   - Filter by assignee (Select with project members)
16   - Filter by priority (Select)
17   - Filter by column/stage (Select)
18   - Search by task title (Input)
19   - "New Task" button opening a Dialog
20
214. Sorting: click column headers to sort ascending/descending
22
23Fetch all tasks for the current project joined with columns for stage names and auth users for assignee names. Apply filters in JavaScript after fetch.

1Create a full task detail Dialog component that opens when clicking any task:
2
31. Dialog size: max-w-2xl, full height on mobile
42. Left column (2/3 width):
5   - Title: contentEditable h1 with inline editing (no separate edit button)
6   - Description: shadcn Textarea with markdown hint, auto-resize
7   - Labels: input to type new labels + X buttons to remove existing
8   - Activity log: list of recent changes (placeholder text for now)
9
103. Right column (1/3 width) - metadata sidebar:
11   - Assignee: shadcn Select showing project members with avatars
12   - Priority: shadcn Select (low/medium/high/urgent with colored dots)
13   - Due date: shadcn Calendar via Popover
14   - Stage/Column: shadcn Select showing board columns
15   - Created by and created date (read-only)
16
174. Auto-save: use useEffect with a 1-second debounce on any field change. Show a small "Saving..." / "Saved" indicator in the dialog footer.
18
195. Delete button: bottom-left, with a confirmation AlertDialog before deleting
20
21All changes update the local task state immediately (optimistic) and then call Supabase update. Moving to a different column updates column_id and sets position to last + 1 in the target column.

1Add real-time updates to the Kanban board using Supabase Realtime:
2
31. Subscribe to postgres_changes on the 'tasks' table filtered by project_id:
4   - INSERT event: add the new task to the correct column in local state
5   - UPDATE event: update the task in local state (handle both content changes and column moves)
6   - DELETE event: remove the task from local state
7
82. Subscribe to postgres_changes on the 'columns' table:
9   - INSERT/UPDATE/DELETE: refetch all columns
10
113. Show a subtle "Live" indicator badge in the board header (green dot + "Live") when subscribed
12
134. Presence: use Supabase channel().track() to broadcast current user's name and avatar when they open the board. Show small avatar stack in the board header for all users currently viewing (max 5 shown, +N for the rest).
14
15Create the subscription in a useEffect that returns a cleanup function calling channel.unsubscribe().
16Use a single channel for the board: supabase.channel('board-' + boardId)
17Handle all event types on the same channel.
18
19IMPORTANT: Skip applying realtime updates to tasks that the current user just modified (check by user_id) to avoid double-applying optimistic updates.