On this page
मैंने Coordly क्यों बनाया
"इस परियोजना की प्रेरणा टीम सहयोग के लिए अलग-अलग टूल का उपयोग करने की निरंतर परेशानी से मिली। एक विशिष्ट वर्कफ़्लो में कार्यों के लिए Jira या Trello, लिखने के लिए Google Docs, कॉल के लिए Zoom या Google Meet और चैटिंग के लिए Slack शामिल होते हैं।"
"कई अनुप्रयोगों में एक परियोजना का प्रबंधन अनावश्यक रूप से खंडित लगा। Coordly का प्राथमिक लक्ष्य यह पता लगाना था कि एक एकीकृत कार्यस्थान कैसे बनाया जाए जहां टीम इन सहयोग गतिविधियों को मूल रूप से एक ही छत के नीचे संभाल सके।"
CollabHub से Coordly तक
प्रोजेक्ट का नाम मूल रूप से CollabHub था। हालाँकि, बाद में नाम बदलकर Coordly कर दिया गया क्योंकि CollabHub बहुत सामान्य लगता था और पहले से ही अन्य उत्पादों से जुड़ा हुआ था।
Coordly को चुना गया क्योंकि यह छोटा, अधिक आधुनिक, ब्रांड करने योग्य है और टीम समन्वय के एप्लिकेशन के मुख्य लक्ष्य के साथ निकटता से संरेखित है।
एकीकृत कार्यस्थान
Coordly 'Collabs' की अवधारणा के आसपास बनाया गया है - कार्यस्थान कंटेनर नेमस्पेस।
जब उपयोगकर्ता Collab में शामिल होते हैं, तो उन्हें Tiptap-संचालित रिच-टेक्स्ट दस्तावेज़, एक ड्रैग-एंड-ड्रॉप कानबन टास्क बोर्ड, एक रीयल-टाइम मैसेजिंग चैनल और एक निरंतर वीडियो कॉल इंटरफ़ेस तक तत्काल, सिंक्रनाइज़ पहुंच प्राप्त होती है।
यह आर्किटेक्चर कॉन्टेक्स्ट-स्विचिंग को समाप्त कर देता है, जिससे टीमें एक दस्तावेज़ का संदर्भ ले सकती हैं, किसी कार्य के बारे में चैट कर सकती हैं और एक ही ब्राउज़र टैब के भीतर एक साथ वीडियो के माध्यम से बात कर सकती हैं।
System Architecture
Because Yjs operates natively over raw WebSockets and the chat/signaling system operates over Socket.IO (which also uses WebSocket/HTTP upgrades), the backend node server needed to securely route traffic to the correct protocol handler over a single HTTP port.
To solve this, the server intercepts the HTTP `upgrade` event. It analyzes the incoming request path—routing requests prefixed with `/socket.io/` to the Socket.IO engine, while passing all other relevant upgrade requests to the raw `wss.handleUpgrade` handler for Yjs document synchronization.
तीन रीयल-टाइम सिस्टम, एक कार्यस्थान
Collaborative Documents (Yjs)
Uses Yjs CRDTs over raw WebSockets (`y-websocket`) to coordinate document state across concurrent editors.
Chat & Signaling (Socket.IO)
Employs Socket.IO for ephemeral, room-based message broadcasting, including typing indicators and emoji reactions.
Video Calling (WebRTC & PeerJS)
Uses PeerJS and WebRTC for peer-to-peer media streaming, keeping the media path outside the application's main realtime server.
WebRTC मीडिया हॉट-स्वैपिंग
A significant UX challenge in building the video component was allowing users to toggle their camera or microphone without dropping and rebuilding the entire peer-to-peer call.
Rather than tearing down the WebRTC connection, Coordly uses `RTCPeerConnection.getSenders().find(s => ...)` combined with `sender.replaceTrack()`. `replaceTrack()` swaps the active media track without tearing down the existing peer connection. This keeps the network connection alive while instantly reflecting the new hardware state.
दृढ़ता रणनीति
The application splits persistence based on data characteristics. Application metadata, user profiles, tasks, and chat history are structured via Mongoose and stored in standard MongoDB collections.
Conversely, the real-time document state is decoupled from the REST API. It is captured by `y-mongodb-provider`, which stores the binary Yjs update buffers into a specialized MongoDB collection directly from the Node WebSocket server.
प्रमाणीकरण और प्राधिकरण
Coordly uses NextAuth for identity management, supporting OAuth flows (GitHub, Google) with a JWT session strategy.
Security is enforced server-side via `getServerSession` checks. API routes explicitly validate a user's `CollabParticipant` role before authorizing database operations, preventing unauthorized access to private workspaces.
इंजीनियरिंग चुनौतियाँ
1. मल्टीप्लेक्सिंग रीयल-टाइम प्रोटोकॉल
Problem: Running Yjs (raw WebSockets) and Socket.IO concurrently on the same backend port.
Approach: Intercepting the Node HTTP `upgrade` event and dynamically routing the socket based on the request URL path.
Result: A single Node.js server can route the two realtime protocols to their appropriate handlers.
2. समन्वय प्रणाली
Problem: Ensuring video, chat, and document states remained consistent without overwhelming the client.
Approach: Isolating component lifecycles and utilizing React Context to prevent unnecessary top-level re-renders.
Result: An interface where users can keep the video call in a floating PiP window while working in Docs or Tasks.
3. REST और CRDT संगति
Problem: Maintaining consistency between standard REST data (document titles/permissions) and CRDT document content.
Approach: Decoupling the storage mechanisms—using Mongoose for metadata and `y-mongodb-provider` for binary state.
Result: Keeps CRDT document state separate from conventional REST-managed metadata and permissions.
समझौते और सीमाएँ
- `documentServer.js` मेमोरी में कनेक्शन स्थिति को बनाए रखता है। क्षैतिज स्केलिंग के लिए Socket.IO और Yjs उदाहरणों को पाटने के लिए एक साझा बुनियादी ढांचा एडाप्टर (जैसे Redis) की आवश्यकता होगी।
- PeerJS डिफ़ॉल्ट STUN/TURN कॉन्फ़िगरेशन पर निर्भर करता है, जो सख्त कॉर्पोरेट फ़ायरवॉल में WebRTC कनेक्शन पर बातचीत करने के लिए संघर्ष कर सकता है।
- Node बैकएंड पर वर्तमान में कोई स्पष्ट API दर-सीमित लागू नहीं है।
मैंने क्या सीखा
यह मेरा पहला बड़ा बैकएंड और रीयल-टाइम भारी प्रोजेक्ट था। इसने मुझे बैकएंड आर्किटेक्चर की बुनियादी बातें सिखाईं, खासकर यह कि WebSockets, WebRTC और HTTP API जैसी विभिन्न संचार तकनीकों का उपयोग कैसे और कब करना है।
मैंने स्थानीय विकास और उत्पादन तैनाती, डेटाबेस स्कीमा को संभालने और सत्र प्रमाणीकरण को सुरक्षित रूप से प्रबंधित करने के बीच के बड़े अंतर को भी सीखा।
विकास के बीच में, मेरा लैपटॉप क्रैश हो गया और मैंने संपूर्ण असंबद्ध कोडबेस खो दिया। इसे खरोंच से फिर से बनाने से Git, संस्करण नियंत्रण और दूरस्थ रिपॉजिटरी का मूल्य मेरे लिए बहुत वास्तविक हो गया।
आज मैं अलग तरीके से क्या बनाता
"अगर मैं आज यह प्रोजेक्ट शुरू कर रहा होता, तो मैं पहले दिन से ही एक बहुत सख्त वास्तुकला योजना को प्राथमिकता देता, रीयल-टाइम सर्वर के बीच स्वच्छ सिस्टम सीमाएं स्थापित करता।"
"मैं एक विचार के बजाय, एक मूलभूत स्तंभ के रूप में AI एकीकरण के साथ मंच को आर्किटेक्ट भी करता, जिससे स्वचालित कार्य निर्माण या मीटिंग सारांश जैसी सुविधाओं की अनुमति मिलती।"
टेक्नोलॉजी स्टैक
| Technology | Role |
|---|---|
| Next.js 15 | फ्रंटएंड फ्रेमवर्क और API मार्ग |
| Yjs & Tiptap | CRDT रीयल-टाइम सहयोगी पाठ संपादन |
| Socket.IO | चैट, सिग्नलिंग और उपस्थिति |
| WebRTC & PeerJS | पीयर-टू-पीयर मीडिया स्ट्रीमिंग |
| Node.js | मल्टीप्लेक्स्ड WebSocket और सिग्नलिंग सर्वर |
| MongoDB | ऐप मेटाडेटा और CRDT स्टोरेज के लिए डेटाबेस |
| NextAuth | प्रमाणीकरण और JWT सत्र प्रबंधन |
| Framer Motion | द्रव UI एनिमेशन और खींचने योग्य PiP |