Kanban Board App

Problem

Most teams reach for Trello or Jira for visual task management, but those tools add account friction and pricing tiers for what's fundamentally a drag-and-drop UI on top of a few state transitions. I wanted to prove out a self-contained Kanban experience that runs entirely in the browser — no backend, no auth — while still feeling production-grade.

Approach

Built around @dnd-kit's accessible drag primitives instead of the older react-beautiful-dnd, which is no longer maintained. State lives in React, columns and cards are fully customisable, and the layout collapses cleanly down to mobile. Radix UI provides the accessible primitives (dialogs, menus) so keyboard navigation and screen-reader semantics come correct by default rather than as an afterthought.

Stack & rationale

• React.js
  Component model fits the drag-targets-as-droppables abstraction naturally; hooks keep board state local and reactive without a global store.
• @dnd-kit
  Maintained, keyboard-accessible drag-and-drop with sensors for mouse, touch, and pointer events. Smaller bundle than react-dnd and ships with accessibility built in.
• Radix UI
  Unstyled, accessible primitives for modals and menus. Lets me layer Tailwind styling on top without re-implementing focus traps and ARIA wiring.
• Tailwind CSS
  Rapid iteration on the card and column visuals without writing custom CSS files.

Highlights

• ▸Keyboard-first drag-and-drop via @dnd-kit sensors — fully usable without a mouse
• ▸Add, rename, and delete columns and cards inline; no separate edit modal flow
• ▸Responsive breakpoints collapse multi-column layouts to a single scrollable column on mobile
• ▸Zero backend — board state is ephemeral, which keeps the demo instant and shareable