Online code-editor

Online code-editor

Description

Seamlessly write Python, C++, JavaScript, Java, and React code in your browser, with instant output. While React operates directly on the browser, the rest execute securely on isolated servers.

My Role

My role was to fully implement this project by setting up Django, Docker, Next, and Monaco Editor

Plan of Action

Authentication

I used fingerprint to generate a unique fingerprint for each user. This fingerprint is then used to authenticate the user. I know this is not the best way to authenticate users, but I wanted to keep things simple since this project will be only used for demonstration purposes.

To generate a fingerprint I used fingerprintjs on the client side. I store fingerprints in cookies and send it with each request in the header.

I also made a custom middleware to authenticate users using fingerprint and append user object to the request object.

Isolated environment

I used docker to create an isolated environment for each execution. I created a docker image with all the dependencies installed. I then used this image to create a container for each execution. I used py-docker to interact with docker. You could also configure docker to also host your application.

Limit execution time and memory usage

To set a limit on system calls and resource usage, I have configured docker to use seccomp profile for system calls and have enforced resources using ulimit. Depending on your use case and the language you are executing, you might want to configure these settings. I will recommend you start with the least resource & permission and then add more as you need.

Code Editor

I used monaco editor to give users a look and feel they are already familiar with. I also added some customizations to make it more user-friendly.

Technologies Used

  • React (https://reactjs.org/)
  • Next.js (https://nextjs.org/)
  • Python (https://www.python.org/)
  • Py-docker (https://docker-py.readthedocs.io/en/stable/)
  • Django (https://www.djangoproject.com/)
  • Django Rest Framework (https://www.django-rest-framework.org/)
  • Monaco Editor (https://microsoft.github.io/monaco-editor/)
  • Docker (https://www.docker.com/)
  • Fingerprintjs (https://github.com/fingerprintjs/fingerprintjs)

Future Scope

  • Add support for environment variables for code execution.
  • Making the editor collaborative using websockets & CRDT.
  • Add support for more languages.
  • Add support for more frameworks.