COMPILATEUR

Run your source code on your browser itself without any environment setup .

View Demo · Report Bug · Request Feature

Table of Contents

• Project Breakdown
• About the Project
  • Built With
  • Features
  • Screenshots
• Getting Started
  • Prerequisites
  • Installation
• Usage
• Roadmap
• Contact
• Support
• License
• Deployment

Project Breakdown

🗂️client - Holds the client application

• .storybook - This holds all of our storybook configuration files

• src

  • api - This folder holds API configuration and endpoints for communicating to server

  • assets - This folder holds assets such as images, docs, and fonts

  • components - This folder holds all of the different components that will make up our views

  • constants - This folder holds constant variables used throughout the client application

  • hooks - This folder holds the custom react hooks used in the projects

  • icons - This folder holds all of the different custom icons

  • pages - These represent a unique page on the website i.e. Home or About. These are still normal react components.

  • store - This folder holds the different components and functions related to global state of the application

  • styles - This folder holds styling related files such as Provider,types,themes,etc.

  • types - This folder holds some of the custom type definitions used in the client app.

  • App.tsx - This is what renders all of our browser routes and different pages

  • main.tsx - This is what renders the react app by rendering App.tsx, should not change

• index.html - Single HTML page of our application to render different components

• package.json - Defines npm behaviors and packages for the client

• tsconfig.json - Specifies the root files and the compiler options required to compile the project.

🗂 src

• box - This folder holds the file related to command execution

• constants - This folder holds constant variables used throughout the server application

• controller - This folder holds controllers for different API endpoints

• languages - This folder holds logic to compile and run different programming languages on server

• routes - This folder holds the different API routes

• types - This folder holds some of the custom type definitions used in the server app.

• utils - This folder holds some utilities used in server app like custom types,utility functions,etc.

• app.ts - This file is the entry file of application and holds express server setup

• execute-command.ts - This file holds the function to execute commands with child_process module

🐳.dockerignore - Tells docker which files to ignore

🐳Dockerfile - Contains all the commands a user could call on the command line to assemble an image

📦️package.json - Defines npm behaviors and packages for the server

🔧tsconfig.json - This file specifies the root files and the compiler options required to compile the server app.

🙈.gitignore - Tells git which files to ignore

📝README.md - This file!

About The Project

The motivation behind this project was that I wanted to know about how online judges on different coding platforms works and run the source codes in the browser. So for that reason I started researching on how can I built something like that in Node JS and then I created the REST API for the same with express and node.

So this project will enable anyone who has access to internet and any web browser to compile and run source codes of various languages like C,C++,Java,Python,Javascript (Node JS),Golang,Rust,Ruby,Elixir,etc. without any environment setup on their local machine.

Built With

• React
• Node
• Docker

Features

• REST API created from scratch with Express JS and Node JS
• Can compile and run 9 different programming languages
• Uses docker container for smooth development flow
• Fast and robust Client application created with React JS
• Use of styled-components for styling react components
• Easily give user inputs to source code through Input Modal
• Testing of react components with JEST testing framework
• Use of storybook to test UI components in isolation

Screenshots

1. Options to Choose Programming Language You Want To Run

2. Easily give user inputs to source code through Input Modal

2. Run and See Output Results

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

This is an example of how to list things you need to use the software and how to install them.

• Docker

• Windows Installation

• Mac Installation

• Ubuntu

• NPM

npm install npm@latest -g

Installation

1. Clone the repo

git clone https://github.com/satishnaikawadi2011/online-compiler

2. Install NPM packages for Server

npm install

3. Install NPM packages for Client

cd client
npm install

Usage

The primary goal of this project is to help you run your source code on mobile or desktop or any other device in your browser itself without any environment setup.

For more examples, please refer to the Working Demo

Roadmap

See the open issues for a list of proposed features (and known issues).

Maintainer

Important decisions regarding the project are taken by the following maintainer.

Satish
@satishnaikawadi2011

Support

License

Compilateur is licensed under the MIT License.

Deployment