{"id":51083166,"url":"https://github.com/mehtaab11/knotpad","last_synced_at":"2026-06-23T20:01:46.485Z","repository":{"id":362856023,"uuid":"1260258520","full_name":"Mehtaab11/KnotPad","owner":"Mehtaab11","description":"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.","archived":false,"fork":false,"pushed_at":"2026-06-20T04:50:23.000Z","size":4027,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-20T06:10:03.449Z","etag":null,"topics":["express","js","jwt","mongo","node","quill","react","realtime-collaboration","sharing-ideas","socket-io","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Mehtaab11.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-06-05T09:59:27.000Z","updated_at":"2026-06-20T04:56:32.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/Mehtaab11/KnotPad","commit_stats":null,"previous_names":["mehtaab11/collab-notepad","mehtaab11/knotpad"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Mehtaab11/KnotPad","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mehtaab11%2FKnotPad","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mehtaab11%2FKnotPad/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mehtaab11%2FKnotPad/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mehtaab11%2FKnotPad/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Mehtaab11","download_url":"https://codeload.github.com/Mehtaab11/KnotPad/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Mehtaab11%2FKnotPad/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34704748,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-23T02:00:07.161Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["express","js","jwt","mongo","node","quill","react","realtime-collaboration","sharing-ideas","socket-io","tailwindcss"],"created_at":"2026-06-23T20:01:44.507Z","updated_at":"2026-06-23T20:01:46.476Z","avatar_url":"https://github.com/Mehtaab11.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# KnotPad - Ideas Tied Together\n\n\nA 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.\n\n## 🧠 System Architecture\n\nKnotPad utilizes a \"Dual-Channel\" architecture, splitting traffic between traditional HTTP protocols and persistent WebSocket connections to optimize both security and speed.\n\n### 1. The Real-Time Sync Engine (WebSockets)\nInstead of overwriting the database on every keystroke, KnotPad uses **Operational Transformation (OT)** via Quill.js Deltas. \n* When User A types, the client generates a mathematical Delta (e.g., *insert 'x' at index 42*).\n* The Socket.io server instantly routes this Delta exclusively to the secure \"Room\" for that specific document.\n* Collaborator clients intercept the Delta and inject it into their local UI, creating the illusion of zero-latency simultaneous typing.\n* A silent background chron-job batches the final state and pushes it to MongoDB every 2 seconds to ensure data persistence without network bottlenecking.\n\n### 2. The Presence \u0026 Cursor System (In-Memory State)\nTo handle real-time user avatars and flying cursors, the backend maintains a lightweight, server-side memory ledger.\n* **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.\n* **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.\n\n### 3. Security \u0026 Authorization (REST API)\n* Standard operations (Authentication, Dashboard loading, Title updating) are handled via a stateless Express REST API.\n* Routes are protected by **JSON Web Tokens (JWT)**.\n* 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.\n\n## ✨ Core Features\n\n* **Multiplayer Editing:** Sub-millisecond text syncing using WebSockets and mathematical Deltas.\n* **Live Remote Cursors:** See exactly where your collaborators are clicking and typing in real-time with color-coded, named flags.\n* **Dynamic Presence Avatars:** The header UI dynamically updates to show colored initials of exactly who is currently viewing the document.\n* **Auto-Save \u0026 Status Indicators:** Visual UI feedback confirms when changes transition from local memory to the cloud database.\n* **Smart Dashboard Routing:** Automatically organizes user workspaces into isolated \"My Documents\" and \"Shared with Me\" data views based on DB arrays.\n\n## 🛠️ Tech Stack\n\n**Frontend**\n* **React.js** (Vite)\n* **TailwindCSS** (Styling)\n* **Quill.js** (Vanilla JS Rich-Text Engine)\n* **Quill-Cursors** (Coordinate mapping module)\n* **Socket.io-client** (Event listening and broadcasting)\n\n**Backend**\n* **Node.js \u0026 Express.js** (RESTful API)\n* **Socket.io** (WebSocket Server \u0026 Room Routing)\n* **MongoDB Atlas \u0026 Mongoose** (Database)\n* **Bcrypt \u0026 JWT** (Password hashing and secure stateless sessions)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmehtaab11%2Fknotpad","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmehtaab11%2Fknotpad","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmehtaab11%2Fknotpad/lists"}