The Sandbox Compiler (Overview)

8BIT Online Compiler is a modern, high-performance web-based code editor and execution platform designed to eliminate development environment setup. It lets students, educators, and developers write, test, and debug programs in five programming languages directly in the browser.

By combining the professional-grade Monaco Editor with a custom-built, secure OCi-Server execution microservice and a FastAPI backend, the compiler provides immediate feedback. To accelerate learning, the platform features a "Bring Your Own Key" (BYOK) Google Gemini AI integration, acting as an AI tutor that can complete code, fix bugs, and explain logic without any monthly subscription fees.

---

The Execution Pipeline (How It Works)

Here is a visual representation of how a user's code travels from the Monaco Editor through the FastAPI backend to the isolated OCi-Server container, and how Gemini AI provides dynamic assistance:

Rendering diagram...

1. Code Compilation and Isolation

• Microservice Architecture: Instead of relying on expensive third-party APIs, code execution is routed to a custom OCi-Server microservice.
• Temporary Environments: For each execution request, the microservice dynamically spins up a temporary directory (tempfile.TemporaryDirectory()).
• Subprocess Pipelines: Code is written to a designated file inside the temp folder and executed via Python's subprocess.Popen shell. The runner pipes user-provided input_data to stdin and captures stdout, stderr, and exit codes before cleaning up all files immediately.

2. BYOK Gemini AI Integration

• Gemini 2.5 Flash: Integrates Google's state-of-the-art gemini-2.5-flash model via the modern google-genai SDK for low-latency code assistance.
• Secure API Key Management: Rather than paying platform fees, developers save their own Gemini API key in their profile. Keys are sent securely and stored in a PostgreSQL database managed by SQLModel.
• Three Interaction Modes:
  • AUTOFILL (Code Completion): Analyzes the editor state and appends predicted code directly to the file.
  • FIX (Bug Fixing): Identifies compilation errors or logical flaws, replacing the code block with a corrected version.
  • EXPLAIN (Code Explanation): Generates line-by-line analyses of the active code and outputs them directly to the terminal panel.

---

Core Functionality (Features)

• 5-Language Support: Write, compile, and run Python, Java, C, C++, and JavaScript in a single interface.
• Dockable & Floating Terminal: A side-by-side terminal with an adjustable split-pane that can be docked at the bottom or popped out into a draggable, resizable floating window powered by Framer Motion.
• Monaco Editor Experience: Built-in syntax highlighting, smooth scrolling cursor animations, and custom font configurations (JetBrains Mono).
• Persistent Workspace: Automatically saves active language, code inputs, and user preferences in localStorage to survive page refreshes.
• Dynamic File Management: Upload existing source files (.py, .java, .cpp, .c) with automatic language detection, or download written code snippets with their appropriate extensions.
• Execution History: Logged-in users can save and access a history of their previous runs to reload them back into the workspace instantly.

---

The Sandboxed Architecture (Tech Stack)

• React 19 & Vite: Fast, modern frontend library with Tailwind CSS.
• FastAPI (Python): Asynchronous web framework for the backend, processing code execution and user auth endpoints.
• OCi-Server: Custom FastAPI runner service that compiles and runs languages natively (gcc, g++, node, java, python).
• SQLModel & PostgreSQL: Unified database object-relational mapping (ORM) for saving user details, encrypted API keys, and run history.
• Zustand: Lightweight state management to synchronize compiler states across components.
• Google GenAI SDK: Drives AI actions using gemini-2.0-flash.

---

Subprocess Security & UI Synced State (Challenges)

• Managing Subprocess Timeouts: Executing untrusted code inside server subprocesses runs the risk of infinite loops (e.g., while True). Adding strict execution timeouts (httpx async client timeout of 30.0s) ensures the server does not freeze under resource exhaustion.
• Fluid Multi-pane Workspace: Combining split-pane adjustments with Monaco Editor resizing requires careful layout calculations. Implementing a custom mouse-move handler combined with Monaco re-layout settings keeps the code editor responsive as panels drag.
• Dynamic Workspace Serialization: Serializing the state of 5 different languages inside the browser. Storing the active code block, input buffers, and language selections in localStorage prevents users from losing work when switching languages or refreshing the page.

---

Zero-Setup Web Coding (Conclusion)

The 8BIT Online Compiler simplifies coding education by packaging execution, editing, and explanation into a setup-free environment. Powered by FastAPI, React 19, and a secure OCi-Server microservice, it provides developers of all skill levels with a lightning-fast sandbox to write and run programs, complete with an intelligent Gemini-powered code tutor.