/coding-playground

A minimal coding playground

Primary LanguageTypeScript

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 react-scripts@3.4.1 -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 .
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

coding_playground_design

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