Collaborative Editor

A real-time collaborative text editor where multiple users can edit the same document simultaneously, inspired by Google Docs.

Live Deployment

• Frontend (Vercel): https://collaborative-editor-orcin.vercel.app/
• Backend API + WebSocket (Render): https://collaborative-editor-q37t.onrender.com

Problem Description

Build a real-time collaborative text editor where multiple users can edit the same document simultaneously. Changes should sync instantly across all connected users with robust conflict resolution, while preserving document state and revision history.

Key Features

• Real-time synchronisation of text changes across multiple users
• User presence indicators showing who is online and currently editing
• Cursor position tracking per user with coloured cursors
• Conflict resolution when multiple users edit the same section
• Basic text formatting: bold, italic, underline
• Document persistence and revision history with restore support

Technical Requirements (Implemented)

• WebSocket-based real-time communication
• CRDT-based collaboration model for conflict-free merging
• Backend: Node.js + Express + WebSocket support
• Frontend: React + Quill + collaborative editing libraries
• Database: MongoDB Atlas for document and version storage

Tech Stack

• Frontend: React, Quill, Yjs, y-quill, y-websocket, quill-cursors, Tailwind CSS
• Backend: Node.js, Express, ws, y-websocket, Mongoose
• Database: MongoDB Atlas
• Deployment: Vercel (frontend), Render (backend)

Architecture Summary

1. Client editors bind Quill to a shared Yjs text type.
2. WebSocket provider broadcasts CRDT updates between connected users.
3. Yjs handles concurrent edits with conflict-free merge semantics.
4. Backend persists periodic snapshots and version entries in MongoDB.
5. Revision history is grouped into activity sessions and can be restored.

Project Structure

• client/: React application
• server/: Express API + y-websocket server

Local Development Setup

1. Backend

1. Open server/
2. Create .env from .env.example
3. Set MONGO_URI and CLIENT_URL
4. Install and start:

npm install
npm start

2. Frontend

1. Open client/
2. Create .env from .env.example
3. Install and start:

npm install
npm start

Environment Variables

server/.env

• MONGO_URI: MongoDB Atlas connection URI
• PORT: optional local port (default 5000)
• CLIENT_URL: allowed frontend origin(s), comma-separated

client/.env

• REACT_APP_API_URL: backend HTTP base URL
• REACT_APP_WS_URL: backend WebSocket URL

Deployment Setup

Backend (Render)

• Root directory: server
• Build command: npm install
• Start command: npm start
• Required env vars: MONGO_URI, CLIENT_URL, NODE_ENV=production

Frontend (Vercel)

• Root directory: client
• Required env vars:
  • REACT_APP_API_URL=https://collaborative-editor-q37t.onrender.com
  • REACT_APP_WS_URL=wss://collaborative-editor-q37t.onrender.com

API Endpoints

• POST /save: persist latest document snapshot and append version entry
• GET /load/:id: load latest document state
• GET /history/:id: fetch saved version history

Issues Faced

• Deployment dependency mismatch: Render deployment failed with Cannot find module 'dotenv' because dotenv was used in the server but missing in backend dependencies.
• MongoDB connection failures in production: Persistence returned MongoDB is unavailable due to URI/password encoding and Atlas network access configuration.
• CORS mismatch with Vercel: Backend APIs returned data but browser blocked calls because CLIENT_URL origin matching was strict (trailing slash/origin mismatch).
• Revision history UX confusion: Version history initially looked noisy and unclear because checkpoint frequency and session grouping were not tuned for user expectations.
• Editor click/cursor placement issues: Quill cursor overlays and editor layout caused unreliable click-to-cursor behavior in production UI.

Future Improvements

• Per-document rooms via URL routing: Replace hardcoded doc1/room-1 with route-based IDs (e.g., /doc/:id) to support multiple independent documents.
• Auth and access control: Add user authentication and sharing permissions (owner/editor/viewer).
• Named versions and restore previews: Allow users to label checkpoints and preview diffs before restoring.
• Presence enhancements: Add avatars, user colors in history, and richer status states (idle/typing/away).
• Offline support: Cache local edits and reconcile changes after reconnect.