⚡ CollabCode: Real-Time Collaborative Code Editor

A high-performance, room-based collaborative code editor built with a Go (WebSocket) backend and a React (Monaco Editor) frontend.

🚀 Features

• Real-Time Synchronization: Instantly sync code changes across multiple clients using low-latency WebSockets.
• Room Isolation: Support for multiple concurrent documents ("rooms"). Users in the same room collaborate; users in different rooms are isolated.
• Monaco Editor Integration: Uses the same engine that powers VS Code for a premium editing experience (syntax highlighting, intellisense, etc.).
• Infinite Loop Prevention: Smart state management prevents "echo-back" loops during broadcasts.
• Cursor-Safe Updates: Remote changes are applied without moving the local user's cursor or destroying undo history.
• Modern UI: Polished dark-themed interface with status indicators and a theme toggle.

🛠️ Tech Stack

Backend

• Language: Go (Golang)
• Communications: WebSockets via gorilla/websocket
• Architecture: Hub/Client pattern with goroutines and channels (Mutex-free hot path)

Frontend

• Framework: React (Vite)
• Editor: Monaco Editor (@monaco-editor/react)
• Styling: Vanilla CSS

---

🏁 Getting Started

Prerequisites

• Go (1.20+)
• Node.js (v18+)

1. Run the Backend

cd backend
go run .

The server will start on http://localhost:8081.

2. Run the Frontend

cd frontend
npm install
npm run dev

The editor will be available at http://localhost:5173.

---

🏗️ Project Structure

.
├── backend/            # Go WebSocket Server
│   ├── main.go         # Entry point & HTTP routes
│   ├── hub.go          # Room-based broadcast logic
│   ├── client.go       # WebSocket connection management
│   ├── room.go         # Room management (thread-safe)
│   └── static/         # Minimal HTML test client
└── frontend/           # React + Vite Application
    ├── src/
    │   ├── App.jsx      # Main Editor UI
    │   ├── hooks/       # Custom WebSocket hooks
    │   └── assets/      # Styles and images
    └── package.json    # Frontend dependencies

🧠 Architecture Overview

Communication Flow

1. Client types in Monaco Editor.
2. React sends a JSON message (type: "code_change") via WebSocket.
3. Go Backend receives message in a readPump goroutine.
4. Hub broadcasts the message to all other clients in the same roomId.
5. Other Clients receive the message in their writePump goroutine.
6. React applies the update to Monaco via executeEdits to preserve local cursor/state.

Safety Mechanisms

• Write Deadlines: Prevents slow clients from blocking the server.
• Ping/Pong: Monitors connection health and cleans up "leaked" clients.
• Anti-Echo Ref: React uses an isRemoteUpdate ref to distinguish between local typing and remote sync.

---

🧪 Testing Collaboration

1. Open http://localhost:5173 in Browser Tab A.
2. Open the same URL in Browser Tab B.
3. Ensure both are joined to the same Room (e.g., doc-1).
4. Type in Tab A — watch Tab B update in real-time!