React Kanban Board: Custom Task Management with DnD Kit

Developing a Kanban Board for Task Management on Your Website

Let's face it: when a project has more than ten people, tasks get lost in chats and spreadsheets. Priorities become muddled, deadlines slip, and managers spend hours on synchronization. 80% of teams that adopt Kanban report a 30% increase in efficiency — but only if the board is properly integrated with the backend. The problem is especially acute with parallel work: one person updates a status, another doesn't see the change, and data becomes inconsistent. We solve this pain: we develop Kanban boards with drag-and-drop that embed directly into your website or CRM. Unlike Trello or Jira, you get full control over data and design, and backend integration happens at the API level.

How a Kanban Board Works with React and DnD Kit

At the core is the @dnd-kit library. It provides sensors, cross-column dragging, DragOverlay, and within-column sorting. It's the only library we use for drag-and-drop on React. DnD Kit documentation — its flexibility lets us implement complex scenarios like nested card sorting or drop-zone restrictions.

Installation:

npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities 

Board code:

import { DndContext, DragOverlay, DragStartEvent, DragEndEvent, PointerSensor, useSensor, useSensors, closestCorners } from '@dnd-kit/core'; import { SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from '@dnd-kit/sortable'; import { CSS } from '@dnd-kit/utilities'; interface Task { id: string; title: string; columnId: string; order: number; } interface Column { id: string; title: string; color: string; } function KanbanBoard({ initialColumns, initialTasks, onTaskMove }) { const [tasks, setTasks] = useState<Task[]>(initialTasks); const [activeTask, setActiveTask] = useState<Task | null>(null); const sensors = useSensors( useSensor(PointerSensor, { activationConstraint: { distance: 8 } // 8px before drag starts }) ); const handleDragStart = ({ active }: DragStartEvent) => { setActiveTask(tasks.find(t => t.id === active.id) ?? null); }; const handleDragEnd = ({ active, over }: DragEndEvent) => { setActiveTask(null); if (!over) return; const activeTask = tasks.find(t => t.id === active.id); if (!activeTask) return; const overId = over.id as string; const overColumn = initialColumns.find(c => c.id === overId); const overTask = tasks.find(t => t.id === overId); const targetColumnId = overColumn?.id ?? overTask?.columnId ?? activeTask.columnId; const isMovingColumn = targetColumnId !== activeTask.columnId; setTasks(prev => { // Optimistic UI update const updated = prev.map(t => t.id === activeTask.id ? { ...t, columnId: targetColumnId } : t ); // Re-sort within column if (!isMovingColumn && overTask) { const oldIndex = prev.findIndex(t => t.id === activeTask.id); const newIndex = prev.findIndex(t => t.id === overId); return arrayMove(updated, oldIndex, newIndex); } return updated; }); // Sync with server onTaskMove(activeTask.id, targetColumnId).catch(() => { // Rollback on error setTasks(initialTasks); }); }; return ( <DndContext sensors={sensors} collisionDetection={closestCorners} onDragStart={handleDragStart} onDragEnd={handleDragEnd}> <div className="kanban-board flex gap-4 overflow-x-auto p-4"> {initialColumns.map(column => ( <KanbanColumn key={column.id} column={column} tasks={tasks.filter(t => t.columnId === column.id)} /> ))} </div> <DragOverlay> {activeTask && <TaskCard task={activeTask} isDragging />} </DragOverlay> </DndContext> ); } 

What Problems Does Drag-and-Drop Synchronization Solve?

The main one is data consistency. When one user drags a card while another edits it, without optimistic updates and rollbacks, discrepancies arise. We use the pattern: update the local state instantly, send a PATCH to the server, and on error roll back to the previous state. This gives a responsive UI without data loss and reduces synchronization time by 70% compared to blocking requests.

A second problem is performance. If a column contains 50+ cards, rendering each with animation can lag. @dnd-kit addresses this with virtualization and lazy rendering. We additionally use React.memo and useCallback to stabilize references. Also, when tasks exceed 1000, we implement pagination or infinite scroll — we architect this from the start.

Comparison: Custom Board vs. Off-the-Shelf Solutions

Off-the-shelf systems (Trello, Jira) charge monthly fees and limit customization. A custom board is cheaper in the long run: you pay once for development and hosting. Moreover, full data control is critical for companies with GDPR or corporate security requirements. Integration with your existing CRM or ERP happens through your own API, without middlemen.

Savings with a custom board reach 60% over two years for a 20-person team. Average Trello subscription for such a team is around $1000/month; a custom board pays for itself in 4 months.

Development Process for a Kanban Board

What’s Included

• Source code of the Kanban board (React components + backend controllers)
• Deployment and API documentation
• Access to repository, CI/CD, staging environment
• Team training (2–3 hour workshop)
• 2-week post-deployment support (bug fixes, minor tweaks)

Approximate Timeline

A basic Kanban board with drag-and-drop and synchronization — from 1 to 2 weeks. A full version with filters, subtasks, comments, and real-time updates — from 3 to 4 weeks. Cost is estimated individually after reviewing your requirements.

Why Choose Us

We have extensive commercial experience with React and over 30 implemented task management projects. We offer a 6-month warranty on code — free bug fixes. All solutions undergo code review and are covered by tests. Every project comes with a contract specifying performance metrics (LCP < 2.5s, TTFB < 500ms).

Contact us — we will prepare a commercial proposal and evaluate your project.

Column and Card Components

function KanbanColumn({ column, tasks }) { const taskIds = tasks.map(t => t.id); return ( <div className="kanban-column w-72 shrink-0 bg-gray-50 rounded-xl p-3"> <div className="flex items-center justify-between mb-3"> <div className="flex items-center gap-2"> <div className="w-3 h-3 rounded-full" style={{ background: column.color }} /> <h3 className="font-semibold text-gray-700">{column.title}</h3> <span className="text-xs bg-gray-200 text-gray-500 rounded-full px-2 py-0.5"> {tasks.length} </span> </div> <AddTaskButton columnId={column.id} /> </div> <SortableContext items={taskIds} strategy={verticalListSortingStrategy}> <div className="space-y-2 min-h-20"> {tasks.map(task => ( <SortableTaskCard key={task.id} task={task} /> ))} </div> </SortableContext> </div> ); } function SortableTaskCard({ task }) { const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: task.id }); const style = { transform: CSS.Transform.toString(transform), transition, opacity: isDragging ? 0.5 : 1 }; return ( <div ref={setNodeRef} style={style} {...attributes} {...listeners}> <TaskCard task={task} /> </div> ); } function TaskCard({ task, isDragging = false }) { return ( <div className={`bg-white rounded-lg border border-gray-200 p-3 shadow-sm hover:shadow-md transition-shadow cursor-grab active:cursor-grabbing ${isDragging ? 'shadow-xl ring-2 ring-blue-300' : ''}`}> <p className="text-sm font-medium text-gray-800 mb-2">{task.title}</p> <div className="flex items-center justify-between"> <PriorityBadge priority={task.priority} /> {task.assignee && <AssigneeAvatar user={task.assignee} />} </div> {task.dueDate && ( <p className={`text-xs mt-1 ${isPast(task.dueDate) ? 'text-red-500' : 'text-gray-400'}`}> 📅 {format(task.dueDate, 'dd.MM')} </p> )} </div> ); } 

Filters and Search

function KanbanWithFilters({ board }) { const [filters, setFilters] = useState({ assignee: null, priority: null, search: '' }); const filteredTasks = board.tasks.filter(task => { if (filters.search && !task.title.toLowerCase().includes(filters.search.toLowerCase())) { return false; } if (filters.assignee && task.assigneeId !== filters.assignee) return false; if (filters.priority && task.priority !== filters.priority) return false; return true; }); return ( <div> <KanbanFilters filters={filters} onChange={setFilters} /> <KanbanBoard tasks={filteredTasks} columns={board.columns} /> </div> ); } 

Get a consultation for your task — contact us. We will evaluate the project and propose an optimal architecture.