Back to Projects
In Development

Online Compiler IDE

Browser-based multi-language code compiler

Next.jsDockerMonaco EditorWebSocketsPython

Overview

The Online Compiler IDE is a browser-based coding environment that lets users write and execute code in multiple languages without installing anything. Each execution runs inside an isolated Docker container with resource limits, preventing abuse and ensuring security. Results stream back to the browser in real-time via WebSockets.

Key Features

Monaco editor (same as VS Code) with syntax highlighting
Multi-language support: Python, JavaScript, TypeScript, C++, Java, Go
Real-time output streaming via WebSockets
Isolated Docker containers per execution — no cross-user interference
CPU and memory limits per container to prevent abuse
Code history and session persistence
Shareable code snippets via unique URLs

How It Works

1

Write Code

User writes code in the Monaco editor in the browser. Language is auto-detected from selection.

2

Submit Execution

Frontend sends code + language to the Executor Service via REST or WebSocket.

3

Docker Spawn

Executor Service creates a short-lived Docker container with the appropriate language runtime, injects the code, and runs it.

4

Stream Output

stdout and stderr stream back to the browser in real-time via WebSocket. Container is destroyed after execution or timeout.

Tech Stack

Frontend

  • Next.js
  • TypeScript
  • Monaco Editor
  • WebSockets

Executor

  • Python FastAPI
  • Docker SDK
  • Container isolation

Infrastructure

  • Docker
  • Docker Compose
  • Nginx

Architecture

A lightweight two-tier architecture: Next.js frontend talks to a Python executor service that spins up isolated Docker containers per code run.

Browser
Next.js Frontend
Monaco Editor · WebSocket client
Executor Service
FastAPI Executor
Code routing + job management
Docker Engine
Container orchestration
Isolated Containers
Python Runner
python:3.11-slim
Node Runner
node:20-alpine
C++ Runner
gcc:latest
Java Runner
openjdk:21

Data Flow

  1. 1User writes code in Monaco editor → clicks Run → WebSocket payload sent to Executor Service.
  2. 2Executor validates language and code size → Docker SDK spawns an isolated container with memory/CPU caps.
  3. 3Code is injected into the container and executed — stdout/stderr piped back through WebSocket in real-time.
  4. 4Container auto-destroyed after execution completes or hits 10-second timeout.

Interested in building something similar?

Get in Touch