Online Compiler

The Problem: Friction in Prototyping

Developers often need to test a quick snippet of code, try a new algorithm, or verify logic in a different language. However, spinning up a new local environment, configuring compilers, or navigating clunky online IDEs creates unnecessary friction. I wanted to build a lightweight, frictionless solution that felt as powerful as VS Code but lived entirely in the browser, requiring zero setup.

The Solution

I built a modern, browser-based code editor and compiler that supports 10 programming languages (including C++, Python, Java, Go, and Rust) with a seamless, lag-free developer experience. It features a clean, responsive UI with a familiar file/folder management tree, auto language detection, and standard inputs (stdin) execution.

Engineering & Architecture

To deliver a premium VS Code-like experience, I had to carefully select and integrate frontend technologies that could handle heavy DOM manipulation and real-time editing.

• Monaco Editor Integration: Instead of reinventing the wheel or using basic textareas, I integrated Microsoft's Monaco Editor (the engine behind VS Code). This provided out-of-the-box syntax highlighting, intelligent code completion, and mini-map support.
• Next.js & TypeScript: The application is built on Next.js for optimized performance and SEO. TypeScript ensures strict type safety across complex state management, particularly when handling file trees, editor states, and language configurations.
• Secure Execution Engine: Compiling arbitrary code in the browser is dangerous and computationally heavy. To solve this, I integrated the Wandbox API as the remote execution engine. When a user runs code, the payload is securely dispatched to Wandbox, compiled in an isolated container, and the stdout/stderr streams are piped back to the client in real-time.
• Dynamic Resizable UI: I engineered a resizable split-pane layout using custom React hooks to manage drag events. This allows users to effortlessly resize the file explorer, editor, and terminal output windows to suit their workflow, mirroring professional desktop IDEs.

Overcoming Challenges

One of the main challenges was state synchronization between the selected file in the file explorer and the Monaco Editor instance. Since users can rapidly switch between files of different programming languages, the editor's language model had to update instantly without losing the undo/redo history stack of the previous file.

I solved this by caching the Monaco ITextModel instances in memory. When a user switches files, the application simply swaps the active model rather than unmounting and remounting the editor component. This resulted in instantaneous file switching and preserved local state perfectly.

The Result

The final product is a blazing-fast, robust online compiler that feels like a native desktop application. It features a complete dark/light mode ecosystem and handles complex multi-language execution flawlessly. It serves as a testament to building high-performance, developer-focused tooling on the web.