Design a Coding Playground – Frontend System Design

We’ll walk through the frontend system design for a coding playground like LeetCode or CodePen: a Monaco editor, a Run button that must not crash the tab, a preview that cannot steal the user’s cookies, and a Submit button that talks to a judge and streams a verdict. You’ll see why user code never runs on the app origin, how a Web Worker you can terminate is different from an iframe you cannot, why in-browser runtimes (esbuild-wasm, Pyodide) sit behind that boundary, and how an idempotent submit plus SSE keeps a refresh from double-charging a run.

This is not the VS Code for the web question. A browser IDE is about a text buffer, language servers, and a virtual file system. A playground is about executing untrusted code and showing a result. The editor is the easy part. The isolation boundary is the product.

Problem Statement

Design the frontend for a coding playground used for algorithm problems and front-end sandboxes.

Requirements:

• Edit JavaScript, TypeScript, Python, and HTML/CSS in... premium content.