Minimal Coding Playground

Demo

jsx-edit.mp4

terminal-preview.mp4

Getting started

Setting it up locally

• Create a new React application to use as a template

npx create-react-app template

• Build the "playground" image using the following Dockerfile

# pull official base image
FROM node:16.17.0

WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm install --silent
RUN npm install [email protected] -g --silent

# add app
COPY . ./

EXPOSE 3000

# start app
CMD ["npm", "start"]

• put the Dockerfile inside root directory of the newly created (template) React app
• build the image with the name "playground"

mv Dockerfile template/
docker build -t playground .

• Clone the backend repo

git clone https://github.com/piyushpradhan/coding-playground-backend.git
yarn
yarn start:dev

• Clone this repo and setup the .env file

git clone https://github.com/piyushpradhan/coding-playground.git

• .env file

# running locally 
# URL of the backend server
REACT_APP_BASE_URL='http://localhost:4000/api'
REACT_APP_BASE_ADDRESS='http://localhost:4000'

• Install dependencies and run the app

yarn
yarn start

How it works

Things to improve

• Assign some of the heavy tasks, like creating containers to background threads
• Implement a custom and better terminal interface
• Better overall UI
• Authentication and dashboard with existing playgrounds (containers) allowing users to load or delete their existing playgrounds
• Better file tree
• Multiple tabs in editor