CodeExecutor is a web-based code editor and execution platform that allows users to write, edit, and run code directly in the browser. It supports multiple programming languages and provides an interactive development environment with real-time code execution capabilities powered by WebContainer/Docker technology.
The entire CodeExecutor platform is built with Angular 21, a modern TypeScript-based framework that delivers a responsive and intuitive user interface. The application provides a unified platform for code execution across different use cases with two distinct execution approaches.
For traditional programming languages (such as C, C++, Python, Java, etc.), CodeExecutor integrates with the Judge0 API. Judge0 runs on an Ubuntu server and uses isolate to securely execute user code in sandboxed, lightweight containers. This ensures that code submissions are executed in isolated environments, preventing malicious or runaway code from affecting the host system or other submissions.
For web application execution, CodeExecutor provides two secure approaches:
-
Docker Approach: Executes the uploaded Angular/React/VueJS code within an isolated Docker container. The compiled files are generated inside the container and returned to the client, ensuring complete isolation and security.
-
WebContainer Approach: Leverages browser-based WebContainer technology to build and execute Angular applications entirely locally within the browser environment. This approach eliminates the need for a backend Express.js server to create Docker images and manage file compilation, providing a streamlined, client-side execution experience.
React and Vue.js support is coming soon, with both frameworks compatible with both Docker and WebContainer execution approaches.
This project was generated using Angular CLI version 21.0.3.
To start a local development server, run:
ng serveOnce the server is running, open your browser and navigate to http://localhost:4200/. The application will automatically reload whenever you modify any of the source files.
Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
ng generate component component-nameFor a complete list of available schematics (such as components, directives, or pipes), run:
ng generate --helpTo build the project run:
ng buildThis will compile your project and store the build artifacts in the dist/ directory. By default, the production build optimizes your application for performance and speed.
To execute unit tests with the Vitest test runner, use the following command:
ng testFor end-to-end (e2e) testing, run:
ng e2eAngular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
For more information on using the Angular CLI, including detailed command references, visit the Angular CLI Overview and Command Reference page.