karthik.dev
Back to projects
SaaS

Real-Time Collaborative Notes

Multiplayer note-taking with operational transforms, presence indicators, and conflict resolution

Next.jsTypeScriptSocket.ioNode.jsMongoDBRedisOperational Transforms

Overview

A real-time collaborative note editor supporting simultaneous multi-user editing with conflict-free merging via Operational Transforms, live cursor presence for all active editors, and persistent versioned history.

Problem

Building real-time collaborative text editors is notoriously difficult: concurrent edits from multiple users must be merged without losing anyone's changes, and the user experience must feel instantaneous even over network-latency connections.

Solution

Socket.io for real-time bidirectional events, Operational Transforms for conflict-free concurrent edit merging, a Redis pub/sub layer for horizontal scaling across multiple server instances, and MongoDB for document persistence with version history.

Architecture

  1. 1Next.js frontend with a rich text editor and Socket.io client
  2. 2Socket.io server room per document — all editors in a document room receive real-time events
  3. 3Operational Transform engine merging concurrent edits server-side before broadcasting to all clients
  4. 4Redis pub/sub enabling multiple server instances to broadcast to the same document room
  5. 5MongoDB storing document state and a version history for undo/restore
  6. 6Presence system broadcasting cursor positions and active users in each document

Technical Challenges

  • Implementing correct Operational Transforms for text insertions and deletions that preserve intent across concurrent edits from multiple users.
  • Managing connection state and re-synchronization when a user reconnects after a brief disconnect without losing their unsaved edits.

Results

  • Supports 10+ simultaneous editors per document with sub-100ms perceived edit latency.
  • Demonstrates OT-based CRDT fundamentals applicable to collaborative tools like Notion, Figma, and Google Docs.