Real-Time Collaborative Text Editor

A production-ready, real-time minimalist rich text editor built using React, Yjs (CRDT for conflict resolution), TipTap, Node.js, and MongoDB.

Architecture

Data synchronization flows between clients using a real-time WebSocket protocol designed specifically for Yjs. A centralized Node server persists snapshot Revisions to MongoDB.

  +--------------------------+         +----------------+
  |     Browser (Client)     | <-----> |   Vercel URL   |
  | React + TipTap + Yjs     |         +----------------+
  +-----------+--------------+
              |
          WebSockets 
        (y-websocket)
              |
  +-----------+--------------+         +----------------+
  |     Node.js Backend      | <-----> |  Railway URL   |
  | Express + ws             |         +----------------+
  +-----------+--------------+
              |
          Mongoose
              |
  +-----------+--------------+
  |      MongoDB Atlas       |
  | (State & Revisions DB)   |
  +--------------------------+

### Architecture Notes
- **Conflict Resolution**: Client-side CRDTs handle merges. Server acts as a blindly-forwarding WebSocket hub to reduce CPU overhead.
- **Persistence Strategy**: The server debounces connection states and saves the raw `Buffer` snapshot every 30 seconds into MongoDB.
- **Identity**: Ephemeral Adjective-Animal names injected per-session.

Live Demo URLs

TODO: add after deploy

• Frontend URL: [TBD]
• Backend WebSocket: [TBD]
• Backend API: [TBD]

Environment Variables

Variable	Description	Location	Default / Example
MONGODB_URI	Secure MongoDB connection string	Backend (server/.env)	mongodb://127.0.0.1:27017/collab-editor
PORT	Listening port for Express / WS server	Backend (server/.env)	1234
VITE_WS_URL	Deployed WebSocket address	Frontend (client/.env)	ws://localhost:1234 or wss://app.railway.app
VITE_API_PORT	Port for HTTP Revision API	Frontend (client/.env)	1234

Note: Never commit your actual .env files. We provide .env.example templates in each respective package folder.

Local Development Setup

1. Database Start

Ensure you have a MongoDB instance running either locally or via MongoDB Atlas.

2. Backend Start

cd server
cp .env.example .env
# Edit .env and supply your MONGODB_URI
npm install
npm start

3. Frontend Start

cd client
cp .env.example .env
# Edit .env and configure VITE_WS_URL if different from localhost
npm install
npm run dev

Open application in your browser: http://localhost:5173 Open multiple tabs to verify Yjs CRDT synchronization and dynamic collaborative cursors!

Real-time-Collaborative-Text-Editor