A real-time collaborative document editor built with React 19, Socket.IO, Quill 2, and MongoDB.

Multiple users can simultaneously edit the same document with changes propagated in real-time via WebSockets and automatically persisted to the database.

Note: This project was originally built in 2021 and has since undergone a full modernization, migrating from JavaScript to TypeScript, CRA to Vite, React 17 to 19, and restructuring both client and server into a clean, production-grade architecture. See REFACTORING.md for the complete breakdown of every change and the reasoning behind it.

client/                     server/
├── src/                    ├── src/
│   ├── components/         │   ├── config/      # Env validation (Zod)
│   │   └── TextEditor.tsx  │   ├── handlers/    # Socket event handlers
│   ├── hooks/              │   ├── models/      # Mongoose schemas
│   │   ├── useSocket.ts    │   ├── types/       # Shared type definitions
│   │   └── useDocumentSync │   └── index.ts     # Entry point
│   ├── config/             ├── tsconfig.json
│   ├── types/              └── package.json
│   ├── styles/
│   ├── App.tsx
│   └── main.tsx
├── vite.config.ts
├── tsconfig.json
└── package.json

The fastest way to run the entire project. A single command spins up MongoDB (with seed data), the Node.js server, and the Vite client:

docker compose up

Once all three containers are running, open http://localhost:5173.

The database is automatically seeded with two sample documents on first launch:

To start fresh, remove the volume and re-run:

docker compose down -v && docker compose up

If you prefer running without Docker:

• Node.js 20+
• A running MongoDB instance

# Server
cd server && npm install

# Client
cd client && npm install

Copy the example env files and adjust if needed:

cp server/.env.example server/.env
cp client/.env.example client/.env

# Terminal 1 - Server
cd server && npm run dev

# Terminal 2 - Client
cd client && npm run dev

Open http://localhost:5173. The app generates a unique document URL on load. Share the URL with another browser tab to see real-time collaboration.

1. The client connects to the server via Socket.IO
2. On visiting /documents/:id, the server retrieves or creates the document in MongoDB
3. The Quill editor loads the document content
4. User keystrokes emit send-changes events containing Quill Delta operations
5. The server broadcasts deltas to all other clients in the same document room
6. An auto-save interval persists the full document state every 2 seconds

MIT License - Copyright (c) 2021 Rami Atrouni