Build Your Own Task Board

Kanban board with drag-and-drop, assignments, and due dates.

Time: 2-3 hours
Stack: React + dnd-kit
Vibe Score: 8/10
✅ Good vibe project for internal use. Won't match Linear, but works for simple task tracking.

The Prompt

Copy this prompt into Cursor, Claude, or your AI tool:

Build me a Kanban-style task board with the following specifications:

## Tech Stack
- Next.js 14 with App Router
- @dnd-kit for drag and drop
- Prisma with SQLite
- Tailwind CSS + shadcn/ui

## Core Features

### 1. Kanban Board
- Columns: To Do, In Progress, Review, Done (customizable)
- Drag and drop tasks between columns
- Drag to reorder within column
- Column task count

### 2. Tasks
- Title, description, status
- Assignee (with avatar)
- Due date
- Priority (Low, Medium, High, Urgent)
- Labels/tags (colored)
- Comments

### 3. Task Modal
- Click task to open detail modal
- Edit all fields inline
- Add comments
- Activity log (who changed what)
- Delete task

### 4. Filters & Search
- Search tasks by title
- Filter by assignee
- Filter by label
- Filter by due date (overdue, today, this week)

### 5. Quick Actions
- Quick add task to column
- Keyboard shortcuts (n = new task)
- Bulk actions (move selected)

### 6. Views
- Board view (Kanban)
- List view (table)
- My tasks view (filtered to current user)

## Database Schema
```prisma
model Task {
  id          String    @id @default(cuid())
  title       String
  description String?
  status      String    @default("todo")
  priority    String    @default("medium")
  order       Int       @default(0)
  dueDate     DateTime?
  assigneeId  String?
  assignee    User?     @relation(fields: [assigneeId], references: [id])
  labels      Label[]
  comments    Comment[]
  createdAt   DateTime  @default(now())
  updatedAt   DateTime  @updatedAt
}

model Label {
  id    String @id @default(cuid())
  name  String
  color String
  tasks Task[]
}

model Comment {
  id        String   @id @default(cuid())
  content   String
  taskId    String
  task      Task     @relation(fields: [taskId], references: [id])
  authorId  String
  author    User     @relation(fields: [authorId], references: [id])
  createdAt DateTime @default(now())
}
```

## Drag and Drop Setup
```typescript
import { DndContext, closestCorners } from '@dnd-kit/core';
import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
```

Please generate all files for a working task board.

What You'll Get

✅ Included

  • Kanban board
  • Drag and drop
  • Task details
  • Assignees
  • Due dates
  • Labels

❌ Not Included

  • Sprints/milestones
  • Time tracking
  • Dependencies
  • Gantt chart
  • Integrations
  • Mobile app

← Back to all prompts