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:

1. User drags task
2. Request sent
3. Server responds
4. UI updates

Better approach:

1. User drags task
2. UI updates instantly
3. Request sent
4. 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.