Please wait, content is loading

Online
Code
Compiler

A web-based code editor and compiler supporting multiple programming languages such as C#, Python, C++, and more. This project provides a seamless coding experience using Monaco Editor and features real-time code compilation with ASP.NET Core.

Date

October 2024

Role

Full Stack Developer

[ View Website ]

The Challenge

Developers often face challenges when testing their code snippets in multiple languages online. Existing platforms lack real-time feedback, multi-language support, and an intuitive user interface.

The Research

Research focused on identifying the pain points developers face when writing and running code online. The goal was to provide a seamless coding experience across different languages with real-time feedback, using modern tools and APIs.

The Solution

This project integrates Monaco Editor for a smooth coding experience, with support for multiple languages through the Piston API. Real-time output is achieved using ASP.NET Core, and Docker allows for easy deployment.
3D visual effects are created using Three.js for celebrations upon successful code execution, making the user experience fun and engaging.

Key Features

The Online Code Compiler is equipped with several powerful features designed to provide developers with a seamless coding and compilation experience across multiple languages.

Real-time

Code

Compilation:

Using

ASP.NET

Core

for

instant

code

compilation

and

feedback.

Multi-language

Support:

Compile

and

run

C#,

Python,

JavaScript,

C++,

and

via

the

Piston

API.

Seamless

Coding

Experience:

With

Monaco

Editor

integrated

for

smooth

and

efficient

coding

environment.

Responsive

Design:

Built

with

TailwindCSS

and

Material

for

modern

and

responsive

design.

Celebration

Effects:

Engage

users

with

confetti

effects

using

Three.js

after

successful

code

execution.

Dockerized

Deployment:

Fully

containerized

for

easy

deployment

and

setup

via

Docker.

FAQ
(Frequently Asked Questions)

How does the code compilation work?: The code editor uses Monaco Editor and sends the code to the ASP.NET Core backend, which interacts with the Piston API to compile and run the code in real-time. The results are displayed in the output section immediately.
What languages are supported?: The platform supports multiple programming languages including C#, Python, C++, JavaScript, Dart, and more, thanks to the Piston API.
Is the platform mobile-friendly?: Yes, the platform is fully responsive and optimized for mobile devices using TailwindCSS, ensuring a smooth experience on any device.
How does the celebration effect work?: Upon successful code execution, a 3D celebration effect using Three.js is triggered to enhance user engagement by displaying confetti animations.
How is the project deployed?: The project is Dockerized, allowing for easy deployment. Using Docker Compose, both the frontend and backend are launched in isolated containers.

View All Works

case