Building a Real-Time Collaborative Kanban Board with React, TypeScript, and WebSockets

Gael Lune — Fri, 12 Jun 2026 00:44:52 +0000

Modern teams expect software to update instantly. Nobody wants to refresh a page every few seconds to see whether a task has moved from "In Progress" to "Done." Applications like Trello, Jira, and Linear have trained users to expect real-time collaboration.

In this tutorial, we'll build a simplified real-time Kanban board using React, TypeScript, and WebSockets. Along the way, we'll cover project structure, state management, optimistic UI updates, and handling concurrent changes from multiple users.

What We're Building

Our application will support:

Creating tasks
Drag-and-drop task movement
Real-time synchronization between users
Optimistic updates
Type-safe frontend architecture

Tech Stack

Frontend

React
TypeScript
Vite
React DnD
Zustand

Backend

Node.js
Express
Socket.IO

Database

PostgreSQL

Why WebSockets Instead of Polling?

Many developers start with polling:

setInterval(() => {
  fetch("/tasks");
}, 5000);

This works, but it's inefficient.

Problems include:

Unnecessary network requests
Delayed updates
Increased server load
Poor user experience

WebSockets maintain a persistent connection between client and server.

Instead of asking:

"Any updates yet?"

the server simply says:

"Here's an update."

The result is lower latency and fewer network requests.

Project Structure

A scalable React project should avoid putting everything into a single components folder.

Here's a structure that works well:

src/
├── api/
├── components/
├── features/
│   ├── board/
│   ├── columns/
│   └── tasks/
├── hooks/
├── store/
├── services/
├── types/
└── utils/

This feature-based organization scales much better than organizing solely by file type.

Setting Up React

Create the project:

npm create vite@latest kanban-board
cd kanban-board
npm install

Install dependencies:

npm install zustand socket.io-client react-dnd react-dnd-html5-backend

Defining Task Types

Type safety becomes increasingly valuable as applications grow.

export interface Task {
  id: string;
  title: string;
  description: string;
  status: "todo" | "in-progress" | "done";
  createdAt: string;
}

Using TypeScript prevents many runtime bugs before they ever reach production.

State Management with Zustand

For medium-sized projects, Zustand often provides a cleaner experience than Redux.

Create a store:

import { create } from "zustand";

interface BoardStore {
  tasks: Task[];
  setTasks: (tasks: Task[]) => void;
  moveTask: (
    taskId: string,
    status: Task["status"]
  ) => void;
}

export const useBoardStore = create<BoardStore>(
  (set) => ({
    tasks: [],
    setTasks: (tasks) => set({ tasks }),

    moveTask: (taskId, status) =>
      set((state) => ({
        tasks: state.tasks.map((task) =>
          task.id === taskId
            ? { ...task, status }
            : task
        ),
      })),
  })
);

This keeps state updates simple and predictable.

Connecting to WebSockets

Create a dedicated socket service:

import { io } from "socket.io-client";

export const socket = io(
  "http://localhost:5000"
);

Inside React:

useEffect(() => {
  socket.on("taskUpdated", (task) => {
    updateTask(task);
  });

  return () => {
    socket.off("taskUpdated");
  };
}, []);

Every connected client receives updates automatically.

Implementing Drag and Drop

React DnD provides a robust solution for task movement.

A draggable task:

const [{ isDragging }, drag] = useDrag(
  () => ({
    type: "TASK",
    item: { id: task.id },
    collect: (monitor) => ({
      isDragging:
        monitor.isDragging(),
    }),
  })
);

A droppable column:

const [, drop] = useDrop(() => ({
  accept: "TASK",
  drop: (item) => {
    moveTask(item.id, status);
  },
}));

When users drag a card into another column, the task state updates immediately.

Optimistic UI Updates

One common mistake is waiting for the server before updating the interface.

Slow approach:

User drags task
Request sent
Server responds
UI updates

Better approach:

User drags task
UI updates instantly
Request sent
Server confirms

Example:

const handleMove = async (
  taskId: string,
  status: TaskStatus
) => {
  moveTask(taskId, status);

  try {
    await api.updateTask(taskId, status);
  } catch {
    rollback();
  }
};

This makes applications feel dramatically faster.

Handling Concurrent Updates

What happens if two users move the same task simultaneously?

A common strategy is versioning.

Task model:

{
  id: "123",
  title: "Fix login",
  status: "done",
  version: 8
}

When updating:

if (
  incoming.version >
  current.version
) {
  applyUpdate();
}

This prevents stale updates from overwriting newer data.

Backend Socket Events

Server setup:

io.on("connection", (socket) => {
  console.log("Connected");

  socket.on(
    "taskMoved",
    async (payload) => {
      const task =
        await updateTask(payload);

      io.emit(
        "taskUpdated",
        task
      );
    }
  );
});

Every client receives the updated task immediately.

Performance Considerations

As boards grow, performance becomes critical.

Memoize Expensive Components

export default React.memo(TaskCard);

Virtualize Large Lists

Libraries like:

react-window
react-virtualized

can dramatically reduce rendering costs.

Avoid Unnecessary Re-renders

Select only the required state:

const tasks = useBoardStore(
  (state) => state.tasks
);

This prevents unrelated changes from triggering component updates.

Error Handling

Real-world systems fail.

Users may:

Lose internet connectivity
Refresh mid-operation
Open multiple tabs

Always implement:

socket.on("disconnect", () => {
  showOfflineBanner();
});

socket.on("reconnect", () => {
  refetchTasks();
});

Graceful recovery is essential for collaborative software.

Security Considerations

Never trust frontend updates.

Before accepting a task change:

Verify authentication
Validate permissions
Check task ownership
Sanitize inputs

A user should never be able to modify tasks they don't have access to.

Testing Strategy

Recommended approach:

Unit Tests

describe("moveTask", () => {
  it("updates task status", () => {
    // test logic
  });
});

Component Tests

Use:

React Testing Library
Vitest

End-to-End Tests

Use:

Playwright
Cypress

Real-time applications benefit significantly from automated testing.

What I'd Improve Next

If this project were moving toward production, I'd add:

User authentication
Activity history
Comments
Task assignments
File uploads
Offline support
Role-based permissions
Conflict resolution strategies

These features transform a simple Kanban board into a serious collaboration platform.

Final Thoughts

Building real-time applications is no longer reserved for large engineering teams. React, TypeScript, and WebSockets provide everything needed to create responsive collaborative experiences.

The biggest lesson is that real-time software isn't just about pushing updates. It's about designing systems that remain consistent when multiple users interact simultaneously.

Start simple:

Build the board
Add drag-and-drop
Introduce WebSockets
Handle conflicts
Optimize performance

By following this progression, you'll develop a much deeper understanding of modern collaborative application architecture than you would from building another CRUD dashboard.

DEV Community: Gael Lune

Building a Real-Time Collaborative Kanban Board with React, TypeScript, and WebSockets

What We're Building

Tech Stack

Why WebSockets Instead of Polling?

Project Structure

Setting Up React

Defining Task Types

State Management with Zustand

Connecting to WebSockets

Implementing Drag and Drop

Optimistic UI Updates

Handling Concurrent Updates

Backend Socket Events

Performance Considerations

Memoize Expensive Components

Virtualize Large Lists

Avoid Unnecessary Re-renders

Error Handling

Security Considerations

Testing Strategy

Unit Tests

Component Tests

End-to-End Tests

What I'd Improve Next

Final Thoughts