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 more via the Piston API.
Seamless Coding Experience: With Monaco Editor integrated for a smooth and efficient coding environment.
Responsive Design: Built with TailwindCSS and Material UI for modern and responsive design.
3D Celebration Effects: Engage users with 3D 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