PROJECT 02MERN Stack / WebSockets2025

PulseSync

Real-Time Collaborative Code Sandbox & Developer Workspace

MongoDBExpress.jsReact 19Node.jsSocket.ioTypeScriptDockerMonaco EditorTailwind CSS

SOURCE CODE

pulsesync.dev/room#409

<25ms SYNC

Monaco Multi-Cursor4 Active

const room = useSocketRoom("dev");

// OT Event Stream

await docker.sandbox.exec(code);

DOCKER RUNNER

Isolated Micro-Containers

MERN STACK

MongoDB File Trees

STACK: MERN Stack • Socket.io • TypeScript • DockerREAL-TIME SYNC

<25ms

Sync Latency

500+

Concurrent Editors

Docker V2

Sandbox Security

// THE PROBLEM & CONTEXT

Architectural Challenges

Remote engineering teams need low-latency collaborative coding environments with instantaneous synchronized cursor tracking, live terminal outputs, and secure sandboxed code execution.

// THE SOLUTION & IMPLEMENTATION

Engineering Strategy

Designed a real-time full-stack MERN platform integrating Socket.io room broadcasting with Operational Transformation (OT) algorithms, Microsoft Monaco Editor, and a sandboxed Node.js/Docker execution engine.

VERIFIED SYSTEM FEATURES

5 MODULES

Built real-time collaborative code editor with Monaco Editor, multi-cursor awareness, and sub-25ms WebSocket synchronization via Socket.io.

Engineered isolated code runner backend capable of compiling and executing JavaScript, Python, and TypeScript inside sandboxed micro-containers.

Designed MongoDB data architecture to store workspace trees, file diff histories, version revisions, and role-based permissions.

Integrated integrated live terminal output with interactive stdout/stderr streaming over duplex WebSockets.

Implemented instant snapshot sharing and GitHub repository synchronization.

TECHNICAL ARCHITECTURE & SCHEMA DECISIONS

01 •Bi-directional WebSocket event architecture with room clustering and automatic heartbeat reconnection.

02 •MongoDB document hierarchy with optimistic concurrency control for concurrent file edits.

03 •Dockerized worker pool isolating untrusted code executions with strict memory and CPU throttling.

04 •Modular React component design with custom hooks managing editor operational transformations.

NEXT CASE STUDY // 003

OmniMetrics

Enterprise POS & Financial Analytics Intelligence Hub