Features

• Monaco editor on frontend
• Terminal using xterm.js that can be used by multiple users at a time
• Multiple resizeable windows
• Code files synced with backend using websockets which is restored on refreshing the page
• Terminal connected with real docker container
• Both client and server are dockerised to avoid vendor locking

Source Codes:

• Client: https://github.com/rohitranjan-2702/playground-client
• Server: https://github.com/rohitranjan-2702/playground-server

Tech used

Frontend:

• NextJS
• Typescript
• Socket-io/client
• monaco-editor/react
• xterm.js
• docker

Backend:

• ExpressJS
• Typescript
• Socket-io
• node-pty
• docker

Future Improvements:

• Support nodejs and vite for now
• multiple editor support
• add and delete files
• file-tree improve
• output window fix