Build Your Own Task Board
Kanban board with drag-and-drop, assignments, and due dates.
✅ 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