TaskForge — Kanban Board

A drag-and-drop project board: columns, cards, labels, and instant reordering across lanes. Backed by a REST API and a real relational schema.

▶ Try the live demo — runs right in your browser, no setup.

Features

• 🗂️ Multiple columns with card counts
• 🖱️ Drag-and-drop cards between columns (native HTML5 DnD, optimistic UI)
• ✏️ Inline card editing (double-click or ✎), column delete, and instant board-wide card filter
• ➕ Add columns and cards inline
• 🏷️ Colored labels per card
• 💾 Persisted in PostgreSQL via Prisma; auto-seeded with a sample board

Stack

Tier	Tech
Frontend	React + Vite (no DnD library — native drag events)
API	Node + Express
ORM	Prisma
DB	PostgreSQL
Runtime	Docker Compose

Quickstart

docker compose up --build

On first boot the API runs prisma db push to create the schema and seeds a "Product Roadmap" board with columns and cards.

• App → http://localhost:5173
• API → http://localhost:4000/api/board

Local development

cd api
npm install
export DATABASE_URL=postgresql://taskforge:taskforge@localhost:5432/taskforge
npm run db:push && npm run seed
npm run dev

cd ../web && npm install && npm run dev   # Vite proxies /api to :4000

Data model (api/prisma/schema.prisma)

Board ─1:N─ Column ─1:N─ Card

API

Method	Route	Description
GET	/api/board	board with columns + cards
POST	/api/columns	add a column
POST	/api/cards	add a card
PATCH	/api/cards/:id	edit / move a card
DELETE	/api/cards/:id	delete a card

License

MIT © Wassim Jebali