Kanban Board – Modern Task & Project Workflow

A fast, responsive Kanban board for managing boards, columns, tasks, and subtasks with smooth drag-and-drop, optimistic updates, and a polished UI.

Tech Stack

• Frontend

  • Next.js (App Router, Next 15) – Full‑stack React framework
  • React 19 – UI library
  • TypeScript – Type‑safe code
  • Tailwind CSS v4 – Utility‑first styles
  • shadcn/ui + Radix UI – Accessible components
  • dnd-kit – Drag and drop
  • TanStack Query – Server state & caching
  • Framer Motion – Animations/reorder
  • sonner – Toaster notifications
  • next-themes – Dark/Light themes
  • Lucide Icons – Icons

• Backend

  • Next.js API Routes (Node.js runtime)
  • PostgreSQL via pg

• Tooling & Infra

  • Turbopack dev server
  • ESLint, Prettier
  • Playwright – E2E testing
  • Optional DB via companion repo (Docker Compose)

Features

• Authentication

  • Demo login flow with persisted session
  • Protected boards route & logout

• Boards & Columns

  • Create, edit, and delete boards
  • Edit board dialog with column color picker and Framer Motion reorder
  • Reorder columns, server‑side persisted

• Tasks & Subtasks

  • Create, edit, move between columns, and reorder
  • Task details dialog with subtasks
  • Optimistic toggles for subtasks and status changes with rollback on error

• Drag & Drop

  • Precise drop targets: top/middle/bottom within and across columns
  • Natural hover indicators and overlays

• UX & Responsiveness

  • Polished, responsive layout with mobile‑friendly gestures
  • Skeletons while data loads (top bar remains visible)
  • Dark/Light themes (no hydration flicker)

Getting Started

Prerequisites

• Node.js 20+
• A PostgreSQL database (local/remote)
• npm, pnpm, or yarn

Setup

1. Clone the repo

git clone <repository-url>
cd kanban-board

2. Install dependencies

npm install
# or
pnpm install
# or
yarn

3. Configure environment

cp .env.example .env
# Edit .env and set your DATABASE_URL and any other required values

4. Start the app (dev)

npm run dev

The app will run at http://localhost:3000

Database (optional local Docker)

This app expects a PostgreSQL connection via DATABASE_URL. If you want a ready‑to‑run local database and migrations, use the companion repo:

• kanban-board-db (Docker Compose, migrations, and deployment tooling)

Once your DB is up, ensure DATABASE_URL in .env points to it.

Development Scripts

• Dev server (Turbopack)

npm run dev

• Type check

npm run type-check

• Lint

npm run lint

• Build & start

npm run build && npm start

• Playwright tests

# runs with dev server auto-start (per playwright.config)
npx playwright test
# headed / UI modes
npx playwright test --headed
npx playwright test --ui

Project Structure

app/                   # Next.js App Router (pages, layouts, API routes)
  api/                 # REST endpoints (boards, columns, tasks, subtasks, auth)
  boards/              # Boards routes and client page
components/            # UI components (AppTopBar, Sidebar, dialogs, dnd, ui/*)
controllers/           # Route handlers delegating to services
hooks/                 # React hooks (auth, boards, tasks, dnd)
lib/                   # Auth helpers, DB connection, utils
providers/             # App-wide providers (React Query, Theme)
public/                # Static assets (logos, og-image)
repositories/          # Data access layer for Postgres
services/              # Business logic (auth, board, task, column)
types/                 # Shared TypeScript types
utils/                 # Routing helpers and small utilities

Contributing

1. Fork the repo
2. Create a feature branch: git checkout -b feature/my-feature
3. Commit: git commit -m "feat: add my feature"
4. Push: git push origin feature/my-feature
5. Open a Pull Request

---

If you deploy, set NEXT_PUBLIC_SITE_URL for accurate Open Graph/Twitter preview URLs, and ensure DATABASE_URL is configured for your environment.