Distributed Systems

Code-Collab Project

A browser-based, real-time collaborative coding environment (like 'Google Docs for code' + 'VS Code Live Share'). It allows multiple developers to write, edit, run, and share code simultaneously without conflicts, entirely self-hosted.

Project Scope

Real-Time Co-Editing & Live Cursors: Multiple users can type simultaneously with distinct cursor colors. Isolated Execution Environment: Every coding session gets its own isolated Docker container to safely run code. Integrated Terminal: A resizable terminal (with multi-tab support) synced over WebSockets so all participants can run commands. Session Management: Secure login (NextAuth), auto-saving, session history, and one-click link sharing.

Technology Stack

Next.jsReactTailwind CSSZustandMonaco EditorXTerm.jsYjsWebSocketsExpress.jsSupabasePrismaDockerNode-pty

Architecture

The Next.js frontend hosts the Monaco Editor and XTerm.js. Edits and cursors are synced via WebSockets using Yjs CRDTs. A separate Express API manages Docker container lifecycles to safely execute code in isolated node-pty instances, while Supabase and Prisma handle session state and NextAuth.

Clients / Users

👤

User 1

(Editor)

👤

User 2

(Editor)

👤

User 3

(Viewer)

⟷

Frontend

React.js (Web Application)

Code Editor

(Monaco Editor)

Real-time Collaboration

(Y.js WebSocket Client)

Terminal Interface

(Web Terminal)

UI Components

(Tailwind CSS)

⬇

⟷

Backend Server

Node.js + Express.js

REST API Routes

(Project, File, User Management)

WebSocket Server

(Real-time Collaboration)

Y.js Document Handling

(CRDT Synchronization)

Session & Room Management

Authentication & Authorization

Terminal Execution Service

File System Management

⬆

⟷

Real-time Collaboration Layer

Y.js (CRDTs)

Document State

Conflict Resolution

Real-time Sync

⟷

WebSocket Server

Room Management

Broadcast Updates

Handle Connections

⟷

Data Layer

MongoDB Atlas
(Database)

⟷

Stored Data

Users & Auth Data

Projects / Workspaces

File Metadata

Collaboration Sessions

⬇

Terminal Execution (Optional)

Pseudoterminal (node-pty)

Execute Shell Commands

Real-time Terminal I/O

Isolated Session per User

➔

Sandboxed Environment

Process Isolation

Workspace Directory

Security Restrictions

External Services / Integrations

Authentication

(Optional)

JWT / OAuth

User Management

Deployment

(Optional)

Docker / Cloud

Deploy Projects

Version Control

(Optional)

GitHub API

Repository Integration

Results & Validation

Zero-Conflict Guarantee: Yjs CRDTs ensure simultaneous edits are mathematically merged without any conflict, independently of a master server. Safe Execution: Code is safely sandboxed in ephemeral Docker containers, never on the host. High Performance: Instant peer-to-peer updates via binary WebSockets deltas, debouncing saves to the container instead of hitting the database on every keystroke.