Can this project be hosted for free during portfolio demonstrations?

IntermediatePortfolioMajorPlacementResumeReact & Full-Stack

Real-Time Collaborative Code Editor & Runner

Browser-based collaborative IDE supporting multi-user concurrent code editing via Operational Transformation (CRDT / Yjs), real-time WebSockets, Monaco Editor, and containerized code execution.

Author: Rohit Sharma (Principal Systems Architect & Placement Mentor)

Reviewed by Ananya Verma

Updated: Sep 29, 2026

Problem Statement & Objectives

Engineering teams and technical interviewers require synchronized, zero-latency code sharing where multiple developers edit the same file simultaneously without keystroke clobbering, race conditions, or editor desynchronization.

Real-World Context:Live technical interview platforms (similar to CoderPad / HackerRank), remote pair-programming tools, and interactive computer science classroom environments.

Key Project Objectives:

•Integrate Microsoft Monaco Editor into a React TypeScript interface supporting syntax highlighting for 10+ languages.
•Implement real-time bidirectional synchronization over WebSockets with room isolation so each collaborative session remains private.
•Resolve concurrent text edit conflicts gracefully using CRDTs (Conflict-Free Replicated Data Types).
•Provide a secure code execution sandbox evaluating Python, JavaScript, and C++ code with strict timeout limits.

System Architecture

React client hosts the Monaco Editor connected via WebSocket to a Node.js signaling cluster. Text mutations are structured as Yjs CRDT operations, eliminating central conflict resolution bottlenecks. Redis Pub/Sub synchronizes messages across multiple Node.js socket server instances. A decoupled sandbox worker executes user-submitted code in disposable, resource-constrained Docker containers.

+-----------------------+             +-----------------------+
|    BROWSER CLIENT A   |             |    BROWSER CLIENT B   |
|  (Monaco Editor + Yjs)|             |  (Monaco Editor + Yjs)|
+-----------------------+             +-----------------------+
            \                                     /
             \ (WebSocket WSS)                   / (WebSocket WSS)
              v                                 v
+-------------------------------------------------------------+
|                   NODE.JS / TYPESCRIPT GATEWAY              |
|         (Socket.io Room Hub + Authentication Handshake)     |
+-------------------------------------------------------------+
                               |
                               v
+-------------------------------------------------------------+
|                     REDIS PUB/SUB & STATE                   |
|     - Room State Presence & Cursor Position Broadcasting    |
|     - Active Collaboration Session Registry                 |
+-------------------------------------------------------------+
                               |
                               v
+-------------------------------------------------------------+
|                 SANDBOXED CODE EXECUTION RUNNER             |
|   - Isolated Docker Containers (CPU/RAM/Network Throttled)  |
|   - Subprocess Execution with 5-Second Timeout Deadlines    |
+-------------------------------------------------------------+

Database Design (Document & Cache (MongoDB / Redis))

Stores saved code snippets, revision histories, and active room connection metadata.

Table: roomsPK: room_code (VARCHAR 8)

Active and archived collaborative coding sessions.

room_codecreated_bylanguagecurrent_contentcreated_at

Table: execution_logsPK: id (UUID)

Audit trail of executed scripts and exit codes.

idroom_codelanguageexecution_time_msexit_codetimestamp

REST API Specifications

POST/api/v1/rooms/create

Generates a unique 6-character room token and initializes editor document state.

Response Payload:

{
  "room_code": "DEV-492",
  "language": "javascript",
  "websocket_url": "wss://api.example.com/ws/DEV-492"
}

POST/api/v1/execute

Executes provided code in an isolated sandbox and returns standard output stream.

Response Payload:

{
  "stdout": "Hello, World!\nCalculated Fibonacci(10) = 55\n",
  "stderr": "",
  "execution_time_ms": 84,
  "exit_code": 0
}

Step-by-Step Implementation Guide

Step 1: WebSocket Room Management in Node.js

Set up a Socket.io server with room joins, peer presence broadcasts, and disconnect cleanup handlers.

socket-server.ts

import { Server } from 'socket.io';

export function setupSocket(io: Server) {
  io.on('connection', (socket) => {
    socket.on('join-room', (roomId: string, username: string) => {
      socket.join(roomId);
      socket.to(roomId).emit('user-joined', { userId: socket.id, username });

      socket.on('editor-change', (delta) => {
        socket.to(roomId).emit('editor-change', delta);
      });

      socket.on('disconnect', () => {
        socket.to(roomId).emit('user-left', socket.id);
      });
    });
  });
}

Step 2: Monaco Editor Binding with Yjs Provider

Connect React component state to Monaco editor instances, syncing CRDT updates seamlessly across all peers.

EditorComponent.tsx

import React, { useRef, useEffect } from 'react';
import Editor from '@monaco-editor/react';

export const CollaborativeEditor = ({ roomId }: { roomId: string }) => {
  const editorRef = useRef<any>(null);

  const handleEditorDidMount = (editor: any) => {
    editorRef.current = editor;
    // Bind Monaco model to Yjs CRDT provider here
  };

  return (
    <div style={{ height: '600px', border: '1px solid #1e293b' }}>
      <Editor
        height="100%"
        defaultLanguage="python"
        theme="vs-dark"
        onMount={handleEditorDidMount}
      />
    </div>
  );
};

Placement Viva & Technical Questions

Questions commonly asked by college examiners and product company interviewers regarding this project architecture.

HTTP REST is unidirectional and request-driven: the client must continuously poll the server to discover updates, creating high HTTP header overhead and latency. WebSockets maintain a persistent, bidirectional, full-duplex TCP connection, allowing the server to push text mutations to clients in microseconds with minimal framing overhead.

Project FAQs

Yes. The Next.js/React frontend can be deployed on Vercel, and the Node.js WebSocket backend can be hosted on free tiers of Render or Railway.

Cross-Disciplinary Paths

Related Engineering Projects

View All Projects →

IntermediateFinal Year

Python

AI Resume Screening & Skill Matching Engine

An end-to-end NLP pipeline parsing unstructured candidate resumes (PDF/DOCX), extracting technical skill entities, and computing cosine similarity against job descriptions with FastAPI.

Core Competencies

Natural Language Processing (NLP)Named Entity Recognition (NER)TF-IDF & Dense Embeddings+3 more

Full Architecture & APIs

View Guide

AdvancedFinal Year

Java, SQL

Cloud-Native Banking & Transaction Engine

Distributed FinTech backend implementing ACID-compliant fund transfers, idempotency keys, JWT role-based security, and event-driven audit logging with Spring Boot and PostgreSQL.

Core Competencies

Spring Boot 3 & Spring Data JPAACID Transaction Isolation & Pessimistic LockingIdempotency Key Patterns in Financial APIs+3 more

Full Architecture & APIs

View Guide