Make your own online compiler in React ⚛️

Setting up a compiler for your project is a big task. In this article, we will tackle, how to make your own simple online compiler in ReactJs using the Judge0 in less than 200 lines of Code( Interesting isn’t it ? )

Judge0 is a robust and scalable open-source online code execution system. It can be used to build a wide range of applications varying from competitive programming platforms, educational and recruitment platforms, to online code editors, and more.

We will Set up a compiler that supports 4 languages viz. C/C++/Python and Java.

Judge0 supports more than 50+ languages. For adding more language support you can read the Official documentation and implement any language as per your requirement.

I advise you to follow the table of content and don’t miss any steps. I will provide the full app code link at the end.

Table Content :

• Get Your API key
• Create React App
• Creating Your Components

- Get your API key :

Get your API key for free at https://rapidapi.com/judge0-official/api/judge0-ce/

- Create Your React App :

Follow the below steps to create your React project

npx create-react-app my-app
cd my-app
npm start

- Creating Components :

Let’s go and first create a Compiler folder. This folder will keep files related to the Compiler.

Create a file named: Compiler.js in Compiler

Let’s break down the above code :

• We have used 4 states.

i)input handles the source code that the user has provided.
ii)output handles the result that we get back from the judge0 compiler after submission of code.
iii)language_id handles the Language we want to compile our source code in
iv)user_input handles the stdin input provided by the user.

• The first fetch request Create your submission to the judge0 compiler and return a unique token.
• Using The unique token in our second fetch request we get back the result/output of our submitted code.
• Inside the render method, we have some JSX.

Note: The above file uses Bootstrap and Font Awesome instances so makes sure you include their cdn link in the index.js file under the public folder.

Now we are done with the Compiler functionality part.

We have added the support of execution for 4 languages, i.e, C/C++/Python and Java.

Go ahead and create a new file named Compiler.css under compiler folder

And that’s all we need to do.

we have built a simple online compiler in react using judge0.

Demo :

Github Repository :

https://github.com/akashgp09/Online-Compiler-Web

• Useful links :

Judge0 - API Documentation

Online Compiler in Jquery:

https://online-compiler.dosilovic.com/

Thanks for reading! If you enjoyed this article, please click the 👏 button and share to help others find it! Feel free to leave a comment 💬 below.
Have feedback? Let’s connect on Twitter.