Tasks — a kanban todo board

An agnostic kanban todo app: create boards (Work, Personal, Fitness, anything) and organize tasks across Backlog → To do → Doing → Done with drag and drop, priorities, labels, due dates, and filters.

The board is intentionally generic — tasks are just title, description, priority, dueDate and labels, so it fits any context.

Tech stack

• Next.js 15 (App Router) + React 19
• Panda CSS for styling and design tokens
• @tanstack/react-query + axios for data fetching
• @dnd-kit for drag and drop
• react-hook-form + zod for forms and validation
• zustand for client state
• next-intl for internationalization (English + Portuguese)
• Jest + Testing Library for tests
• Fonts: Bricolage Grotesque (display) + Geist Sans / Geist Mono

Getting started

pnpm install
pnpm dev

Open http://localhost:3000.

Login: any email and password work, e.g. me@example.com / 123456.

Local API & data

There is no external backend. The app ships with its own API implemented as Next.js route handlers under src/app/api/*:

Method	Route
POST	/api/auth/login
GET	/api/me
GET / POST	/api/boards
GET/PATCH/DELETE	/api/boards/:id
GET / POST	/api/tasks?boardId=
GET/PATCH/DELETE	/api/tasks/:id

Data is persisted to a local JSON file at data/db.json, seeded on first run with a few sample boards and tasks (src/server/seed.ts).

• Reset the data: delete data/db.json and restart — it re-seeds.
• Point at a real backend instead: set NEXT_PUBLIC_API_URL to its origin.

Note: file persistence is meant for local development. A hosted deployment (e.g. Vercel, where the filesystem is ephemeral) would need a real database.

Features

• Login (mock auth, token in localStorage)
• Boards
  • List boards
  • Create board
  • Edit board
  • Delete board (with confirmation)
• Tasks
  • Create / edit / delete
  • Title, description, priority, due date & time, labels
  • Drag and drop between columns (status update)
• Filter & sort bar (search, priority, due, labels)
• Internationalization (EN / PT) with a language toggle
• Dark UI with a custom design system

Internationalization

Locale is stored in a NEXT_LOCALE cookie and switched via the toggle in the sidebar. Messages live in messages/en.json and messages/pt.json; keys are namespaced by area (e.g. taskForm.title, board.columns.BACKLOG).

Project structure

src
├── app             # Next.js routes (pages + /api route handlers)
├── server          # local data layer (seed, JSON store, repository)
├── design-system   # tokens, theme and UI components
├── layouts         # app shell
├── modules         # feature modules (auth, dashboard)
├── services        # react-query queries & mutations + entities
├── stores          # zustand stores
├── i18n            # next-intl config
└── utils           # helpers (formatters, routes, provider)

Testing

pnpm test          # run the suite
pnpm test:cov      # with coverage

Notes

• The app pins Next.js 15.3.x. Next 16 is available and can be adopted as a follow-up once its breaking changes are reviewed.