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.
SOCIAL SHARE CARD GENERATOR