https://github.com/mehtaab11/knotpad
A high-performance collaborative workspace engineered with React, Node.js, and MongoDB. Features a dual-channel architecture using REST APIs for secure authorization and WebSockets for real-time rich-text editing.
https://github.com/mehtaab11/knotpad
express js jwt mongo node quill react realtime-collaboration sharing-ideas socket-io tailwindcss
Last synced: 2 days ago
JSON representation
A high-performance collaborative workspace engineered with React, Node.js, and MongoDB. Features a dual-channel architecture using REST APIs for secure authorization and WebSockets for real-time rich-text editing.
- Host: GitHub
- URL: https://github.com/mehtaab11/knotpad
- Owner: Mehtaab11
- Created: 2026-06-05T09:59:27.000Z (21 days ago)
- Default Branch: main
- Last Pushed: 2026-06-20T04:50:23.000Z (6 days ago)
- Last Synced: 2026-06-20T06:10:03.449Z (6 days ago)
- Topics: express, js, jwt, mongo, node, quill, react, realtime-collaboration, sharing-ideas, socket-io, tailwindcss
- Language: JavaScript
- Homepage:
- Size: 3.84 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# KnotPad - Ideas Tied Together
A high-performance, real-time collaborative workspace engineered to allow multiple users to edit rich-text documents simultaneously. KnotPad bridges the gap between stateless REST APIs and stateful WebSockets to deliver a seamless, Google Docs-style editing experience.
## 🧠 System Architecture
KnotPad utilizes a "Dual-Channel" architecture, splitting traffic between traditional HTTP protocols and persistent WebSocket connections to optimize both security and speed.
### 1. The Real-Time Sync Engine (WebSockets)
Instead of overwriting the database on every keystroke, KnotPad uses **Operational Transformation (OT)** via Quill.js Deltas.
* When User A types, the client generates a mathematical Delta (e.g., *insert 'x' at index 42*).
* The Socket.io server instantly routes this Delta exclusively to the secure "Room" for that specific document.
* Collaborator clients intercept the Delta and inject it into their local UI, creating the illusion of zero-latency simultaneous typing.
* A silent background chron-job batches the final state and pushes it to MongoDB every 2 seconds to ensure data persistence without network bottlenecking.
### 2. The Presence & Cursor System (In-Memory State)
To handle real-time user avatars and flying cursors, the backend maintains a lightweight, server-side memory ledger.
* **Presence:** When a user connects, the Node server queries MongoDB for their identity, generates an avatar profile, and adds them to an `activeRooms` array stored in RAM. This array is broadcasted to the room, updating the UI instantly when users join or drop off.
* **Cursors:** Keystrokes and mouse clicks trigger indexing events. The server broadcasts the exact coordinate index of a user's cursor, allowing the frontend to render a floating HTML flag over the text in real-time.
### 3. Security & Authorization (REST API)
* Standard operations (Authentication, Dashboard loading, Title updating) are handled via a stateless Express REST API.
* Routes are protected by **JSON Web Tokens (JWT)**.
* Custom WebSocket Middleware intercepts incoming socket connections, decodes the JWT, and verifies the user's ID against the document's `owner` and `collaborators` arrays in MongoDB before granting them access to the live room.
## ✨ Core Features
* **Multiplayer Editing:** Sub-millisecond text syncing using WebSockets and mathematical Deltas.
* **Live Remote Cursors:** See exactly where your collaborators are clicking and typing in real-time with color-coded, named flags.
* **Dynamic Presence Avatars:** The header UI dynamically updates to show colored initials of exactly who is currently viewing the document.
* **Auto-Save & Status Indicators:** Visual UI feedback confirms when changes transition from local memory to the cloud database.
* **Smart Dashboard Routing:** Automatically organizes user workspaces into isolated "My Documents" and "Shared with Me" data views based on DB arrays.
## 🛠️ Tech Stack
**Frontend**
* **React.js** (Vite)
* **TailwindCSS** (Styling)
* **Quill.js** (Vanilla JS Rich-Text Engine)
* **Quill-Cursors** (Coordinate mapping module)
* **Socket.io-client** (Event listening and broadcasting)
**Backend**
* **Node.js & Express.js** (RESTful API)
* **Socket.io** (WebSocket Server & Room Routing)
* **MongoDB Atlas & Mongoose** (Database)
* **Bcrypt & JWT** (Password hashing and secure stateless sessions)