How to Build a Task Management App with Replit

1// Paste this into Replit Agent:
2// Build a team Kanban task management app with Express and PostgreSQL using Drizzle ORM.
3// Schema:
4// workspaces (id serial PK, name text, owner_id text, created_at),
5// workspace_members (id serial, workspace_id int references workspaces, user_id text,
6// role text default member enum owner/admin/member, joined_at, UNIQUE workspace_id+user_id),
7// boards (id serial, workspace_id int references workspaces, name text, position int default 0),
8// columns (id serial, board_id int references boards, name text,
9// position int not null, wip_limit int),
10// tasks (id serial, column_id int references columns, title text, description text,
11// assignee_id text, priority text default medium enum low/medium/high/critical,
12// labels text[], due_date timestamp, position numeric not null,
13// created_by text, created_at, updated_at),
14// task_comments (id serial, task_id int references tasks, author_id text, body text, created_at).
15// Routes: GET /api/workspaces, POST /api/workspaces,
16// GET /api/boards/:id (full board with columns and tasks joined),
17// POST /api/boards/:id/columns, PATCH /api/columns/:id/position,
18// POST /api/columns/:id/tasks, PATCH /api/tasks/:id,
19// PATCH /api/tasks/:id/move (update column_id and position using fractional indexing),
20// GET /api/tasks/:id/comments, POST /api/tasks/:id/comments.
21// React frontend: Kanban board with vertical column lanes, task cards with assignee avatar,
22// priority color dot (critical=red, high=orange, medium=blue, low=gray), label tags, due date.
23// Draggable cards between columns using drag events. On drop, PATCH /api/tasks/:id/move.
24// Task detail modal with markdown description, comment thread, and edit form.
25// Optimistic drag-and-drop: update UI immediately, rollback if PATCH fails.
26// Use Replit Auth for user identification. Bind server to 0.0.0.0.

1// server/routes/boards.js
2const express = require('express');
3const { db } = require('../db');
4const { boards, columns, tasks } = require('../schema');
5const { eq, asc } = require('drizzle-orm');
6
7const router = express.Router();
8
9router.get('/api/boards/:id', async (req, res) => {
10  const boardId = parseInt(req.params.id);
11
12  // Single query using JSON aggregation for efficiency
13  const result = await db.execute(
14    `SELECT
15       b.id, b.name,
16       COALESCE(json_agg(
17         json_build_object(
18           'id', c.id,
19           'name', c.name,
20           'position', c.position,
21           'wip_limit', c.wip_limit,
22           'tasks', (
23             SELECT COALESCE(json_agg(
24               json_build_object(
25                 'id', t.id, 'title', t.title,
26                 'priority', t.priority, 'labels', t.labels,
27                 'assignee_id', t.assignee_id,
28                 'due_date', t.due_date, 'position', t.position
29               ) ORDER BY t.position ASC
30             ), '[]')
31             FROM tasks t WHERE t.column_id = c.id
32           )
33         ) ORDER BY c.position ASC
34       ), '[]') AS columns
35     FROM boards b
36     LEFT JOIN columns c ON c.board_id = b.id
37     WHERE b.id = $1
38     GROUP BY b.id`,
39    [boardId]
40  );
41
42  if (result.rows.length === 0) {
43    return res.status(404).json({ error: 'Board not found' });
44  }
45
46  res.json(result.rows[0]);
47});
48
49module.exports = router;

1// server/routes/tasks.js — PATCH /api/tasks/:id/move
2const express = require('express');
3const { db } = require('../db');
4const { tasks, columns } = require('../schema');
5const { eq, count } = require('drizzle-orm');
6
7const router = express.Router();
8
9router.patch('/api/tasks/:id/move', express.json(), async (req, res) => {
10  const taskId = parseInt(req.params.id);
11  const { targetColumnId, prevPosition, nextPosition } = req.body;
12
13  // Calculate new fractional position
14  const prev = prevPosition ?? 0;
15  const next = nextPosition ?? prev + 2000;
16  const newPosition = (prev + next) / 2;
17
18  // Check WIP limit on target column
19  const [col] = await db.select()
20    .from(columns)
21    .where(eq(columns.id, targetColumnId))
22    .limit(1);
23
24  if (col?.wipLimit) {
25    const [{ value: taskCount }] = await db
26      .select({ value: count() })
27      .from(tasks)
28      .where(eq(tasks.columnId, targetColumnId));
29
30    if (Number(taskCount) >= col.wipLimit) {
31      return res.status(409).json({
32        error: `WIP limit of ${col.wipLimit} reached for '${col.name}'`,
33        code: 'WIP_LIMIT_EXCEEDED',
34      });
35    }
36  }
37
38  await db.update(tasks)
39    .set({
40      columnId: targetColumnId,
41      position: newPosition,
42      updatedAt: new Date(),
43    })
44    .where(eq(tasks.id, taskId));
45
46  const [updated] = await db.select().from(tasks).where(eq(tasks.id, taskId)).limit(1);
47  res.json(updated);
48});
49
50module.exports = router;

1// React pseudo-code for optimistic drag-and-drop
2// In your Board component:
3
4const [columns, setColumns] = React.useState(initialColumns);
5
6async function handleCardDrop(cardId, targetColumnId, prevPos, nextPos) {
7  // Save original state for rollback
8  const originalColumns = JSON.parse(JSON.stringify(columns));
9
10  // Optimistic update — move card in local state immediately
11  const newPos = ((prevPos ?? 0) + (nextPos ?? (prevPos ?? 0) + 2000)) / 2;
12  setColumns(prev => {
13    const next = prev.map(col => ({
14      ...col,
15      tasks: col.tasks.filter(t => t.id !== cardId),
16    }));
17    const targetCol = next.find(c => c.id === targetColumnId);
18    if (targetCol) {
19      targetCol.tasks.push({ ...getTask(cardId, originalColumns), position: newPos, columnId: targetColumnId });
20      targetCol.tasks.sort((a, b) => a.position - b.position);
21    }
22    return next;
23  });
24
25  // Send to server
26  try {
27    const res = await fetch(`/api/tasks/${cardId}/move`, {
28      method: 'PATCH',
29      headers: { 'Content-Type': 'application/json' },
30      body: JSON.stringify({ targetColumnId, prevPosition: prevPos, nextPosition: nextPos }),
31    });
32
33    if (!res.ok) {
34      const err = await res.json();
35      alert(err.error);  // e.g. 'WIP limit of 3 reached'
36      setColumns(originalColumns);  // rollback
37    }
38  } catch {
39    setColumns(originalColumns);  // rollback on network error
40  }
41}

1// server/middleware/requireWorkspaceMember.js
2const { db } = require('../db');
3const { workspaceMembers } = require('../schema');
4const { and, eq } = require('drizzle-orm');
5
6async function requireWorkspaceMember(req, res, next) {
7  const workspaceId = parseInt(req.params.workspaceId || req.body.workspaceId);
8  const userId = req.user.id;
9
10  if (!workspaceId) return res.status(400).json({ error: 'workspaceId required' });
11
12  const [member] = await db.select()
13    .from(workspaceMembers)
14    .where(
15      and(
16        eq(workspaceMembers.workspaceId, workspaceId),
17        eq(workspaceMembers.userId, userId)
18      )
19    )
20    .limit(1);
21
22  if (!member) {
23    return res.status(403).json({ error: 'Not a workspace member' });
24  }
25
26  req.workspaceMember = member;  // role available for admin checks
27  next();
28}
29
30module.exports = { requireWorkspaceMember };
31
32// server/index.js — deployment config check:
33// const PORT = process.env.PORT || 3000;
34// app.listen(PORT, '0.0.0.0', () => console.log('Kanban server running'));