Real-Time Collaborative Code Editor

An industry-grade, real-time collaborative code editor built using a custom RGA-CRDT (Replicated Growable Array) algorithm from scratch, enabling conflict-free concurrent editing for 50+ simultaneous users without central locking.

---

🚀 Key Features

• Custom RGA-CRDT Algorithm: Built from scratch to resolve concurrent text edits mathematically, ensuring all clients converge to the exact same document state regardless of network latency or out-of-order operations.
• Monaco Editor Integration: Embedded VS Code's core editor engine in React, complete with smooth caret animations, customized dark theme, and intelligent remote cursor shifting.
• Dual Simulation & Workspace Modes:
  • Local Split-Screen Simulator: Allows developers to simulate network partitions and offline typing, merging concurrent text buffers conflict-free upon reconnection.
  • Multi-Instance Server Sync: Connects real users over persistent WebSocket connections to collaborate globally.
• Distributed Scaling (Redis Pub/Sub): Scales horizontally by fanning out collaborative sync operations across multiple server instances using Redis Pub/Sub rooms.
• Defensive & Event-Sourced Persistence (MongoDB):
  • Periodically collapses RGA linked-list states to save snapshot checkpoints.
  • Appends granular operations to an operation log to replay edits since the last snapshot.
  • Utilizes a compound database index { documentId: 1, timestamp: -1 } to hydrate documents in $O(1)$ time on client joins.
• Docker Compose Orchestration: Containerized multi-service setup including an Nginx reverse proxy, Node WebSockets, Redis, and MongoDB.

---

🏗️ Architecture & Component Design

graph TD
    Client1[React Client A] <-->|WebSockets /socket| Nginx[Nginx Reverse Proxy]
    Client2[React Client B] <-->|WebSockets /socket| Nginx
    Nginx <-->|Load Balance| Backend1[Node WebSocket Server 1]
    Nginx <-->|Load Balance| Backend2[Node WebSocket Server 2]
    Backend1 <-->|Redis Pub/Sub| Redis[(Redis Broker)]
    Backend2 <-->|Redis Pub/Sub| Redis
    Backend1 <-->|Read / Write| Mongo[(MongoDB)]
    Backend2 <-->|Read / Write| Mongo

Loading

RGA-CRDT Convergence Resolution

When concurrent insertions share the same predecessor parent node, the conflict is resolved deterministically:

1. Sibling nodes are sorted in descending order of their Lamport timestamps.
2. If timestamps are equal, they are sorted lexicographically by Site ID as a final tie-breaker.
3. Descendant subtrees of skipped siblings are preserved in order, preventing character interleaving.
4. An optimized nodeMap provides $O(1)$ node lookup times to ensure high-frequency concurrent typing remains highly responsive.

---

📁 Repository Structure

├── package.json               # Root monorepo workspace coordinator
├── docker-compose.yml         # Container orchestration configuration
├── nginx.conf                 # Nginx gateway and connection upgrade proxy
├── frontend/                  # React + Vite + TypeScript + Monaco Editor
│   ├── Dockerfile
│   ├── package.json
│   ├── tsconfig.json
│   └── src/
│       ├── crdt/              # RGA-CRDT core convergence implementation
│       │   ├── rga.ts         # RGACRDT class & sibling sorting logic
│       │   └── types.ts       # Struct types (NodeId, RGADNode, Operations)
│       ├── components/
│       │   └── Editor.tsx     # Monaco Editor React wrapper
│       ├── hooks/
│       │   └── useMonacoCRDT.ts # Keystroke interception & remote edit injection
│       ├── App.tsx            # Main layout containing simulation & WebSocket UI
│       └── index.css          # Premium glassmorphic styles and animations
└── backend/                   # Node.js Express + WebSockets + Redis + MongoDB
    ├── Dockerfile
    ├── package.json
    └── src/
        ├── server.js          # Room-based WebSocket server & periodic snapshotting
        ├── crdt.js            # Native ESM backend representation of RGA-CRDT
        ├── db.js              # MongoDB event sourcing & indexing
        └── redis.js           # Redis Pub/Sub scaling module

---

🛠️ Installation & Setup

Prerequisites

• Node.js (v20+)
• Optional: Docker (for complete containerized database/scaling stack)

1. Local Monorepo Setup (Standalone Mode)

Both database and Redis clients are built defensively. If MongoDB or Redis are not running on your local machine, the servers will automatically fall back to an in-memory, single-instance WebSocket relay mode.

1. Clone the repository and navigate to the directory:

   git clone https://github.com/nikhil3495/Real-Time-Collaborative-Code-Editor.git
   cd Real-Time-Collaborative-Code-Editor

2. Install dependencies for both frontend and backend workspaces:

   npm install

3. Start the backend server (runs on http://localhost:4000):

   npm run dev:backend

4. Start the React Vite development server (runs on http://localhost:3000):

   npm run dev:frontend

5. Open http://localhost:3000/ in your browser.

---

🐳 Running with Docker (Recommended for Production)

Docker Compose spins up the full stack including MongoDB, Redis, two Node servers, and Nginx. Nginx handles serving the React static build and proxying WebSocket streams.

1. Build and run the containers:

   docker-compose up --build

2. Open http://localhost/ in multiple browser tabs or devices. Nginx will route traffic and balance the loads across WebSocket nodes while Redis keeps them perfectly synchronized.

---

🧪 Testing

We have built a comprehensive unit test suite to verify convergence and correctness of the CRDT algorithm:

npm run test:frontend

This runs Vitest to verify sequential insertions, multi-character text blocks, character deletions, concurrent sibling sorting, out-of-order merging, and state snapshot recovery.