A scalable, containerized cloud IDE and code execution platform similar to Replit, built with modern web technologies. This platform allows users to create, manage, and execute code in isolated Docker containers with real-time collaboration features.

Dashboard & Container Management

Container Management Monitor and control running environments

Main Dashboard Overview of active containers and workspaces

Code Editor & Development Environment

Code Editor Monaco editor with syntax highlighting

Template Selection Choose from pre-configured environments

• Features
• Tech Stack
• Prerequisites
• Project Structure
• Quick Start
• Usage
• Configuration
• Development
• Contributing
• License

• Multi-Language Support: Create workspaces for React, Node.js, HTML/CSS/JS, and more
• Containerized Execution: Isolated Docker containers for each user workspace
• Real-time Code Editing: Live code editor with syntax highlighting
• Template-based Setup: Quick start with pre-configured development environments
• User Management: Session-based user workspaces with persistent storage
• Container Management: Automatic container lifecycle management with idle cleanup
• Web-based Dashboard: Intuitive React frontend for managing environments

• React 18+ - bootstrap UI library
• Vite - Fast build tool and dev server
• vs code-server Editor - VS Code-like code editor

• Node.js 20+ - JavaScript runtime
• Express.js - Web application framework
• Docker SDK - Container management
• WebSocket - Real-time communication
• cors - Cross-origin resource sharing

• Docker - Containerization platform
• Docker Compose - Multi-container orchestration
• Nginx - Reverse proxy (optional)

Before setting up the project, ensure you have the following installed:

• Node.js (v18.0.0 or higher)
• npm or yarn package manager
• Docker (v20.0.0 or higher)
• Docker Compose (v2.0.0 or higher)
• Git for version control

• RAM: Minimum 4GB (8GB recommended)
• Storage: At least 10GB free space
• OS: Linux, macOS, or Windows with WSL2

└── repl-editor/
    ├── backend/                    # Node.js backend (API, container management, logic)
    │   ├── src/
    │   │   ├── command/            # custom vs code extension
    │   │   ├── config/             # Starter template configuration port mapping & command etc
    │   │   ├── constant/           # Constant for application level
    │   │   ├── event/              # EvenEmiiter configuration and accessbility
    │   │   ├── init/               # initializtion of docker instance node at once singleton
    │   │   └── docker.js           # docker service manager for creating,termination
    │   │   └── index.js            # Express app configuration
    │   │   └── terminal.js         # Loging and attach to external editor docker logs/shell
    │   ├── package.json
    │
    ├── dockerfiles/                # Dockerfiles for each starter template/environment
    │   ├── node-starter.Dockerfile
    │   ├── react-starter.Dockerfile
    │   ├── html-starter.Dockerfile
    │
    ├── frontend/                   # React-based dashboard and UI for managing containers
    │   ├── src/
    │   │   ├── components/         # Reusable React components
    │   │   └── api.js              # Managing api axios services
    │   │   └── config.js           # Managing config/env exporter
    │   │   └── App.jsx             # Main App component
    │   ├── public/
    │   ├── package.json
    │   └── vite.config.js
    │
    ├── starter_templates/          # Prebuilt starter templates
    │   ├── react-starter/          # React + Vite setup
    │   ├── node-starter/           # Node.js API/app
    │   ├── html-starter/           # Plain HTML/CSS/JS
    │
    ├── user_workspaces/            # Per-user workspace directories (mounted into containers)
    │   ├── user-user-001/
    │   ├── user-user-002/
    │   └── ...
    │
    ├── /                    # Utility scripts
    │   ├── build_docker_starter.sh # Build all Docker starter images
    │   └── run_app.sh              # Run the complete application
    │
    ├── .gitignore                  # Git ignore rules
    ├── docker-compose.yml          # Multi-container setup
    ├── package.json                # Root package.json
    └── README.md                   # Project documentation

Contains the API server, user/session management, and logic for:

• Spinning up and managing Docker containers
• Container lifecycle management
• Idle container cleanup and termination
• WebSocket connections for real-time updates
• File system operations within user workspaces

Stores individual Dockerfiles for different development environments:

• node-starter.Dockerfile - Node.js development environment
• react-starter.Dockerfile - React + Vite development setup
• html-starter.Dockerfile - Static HTML/CSS/JS environment

React-based dashboard that users interact with to:

• Create new development environments
• Manage existing containers
• Access code editors
• Monitor container status
• Configure environment settings

Contains boilerplate source code for new environments:

• Ready-to-use project templates
• Pre-configured development setups
• Best practices and folder structures
• Sample code and documentation

Per-user directories where each user's code lives:

• Persistent storage for user projects
• Mounted as volumes into Docker containers
• Maintains file permissions and ownership
• Automatic backup and cleanup policies

git clone https://github.com/md-786910/repl-editor.git
cd repl-editor

chmod +x build_docker_starter.sh
chmod +x run_app.sh

./build_docker_starter.sh

# Install root dependencies
npm install

# Install backend dependencies
cd backend && npm install && cd ..

# Install frontend dependencies
cd frontend && npm install && cd ..

./run_app.sh

• Frontend Dashboard: http://localhost:3016
• Backend API: http://localhost:4000

1. Access Dashboard: Navigate to the frontend dashboard
2. Select Template: Choose from available starter templates
3. Configure Environment: Set up your development environment
4. Start Coding: Access the integrated code editor

• View Active Containers: Monitor running environments
• Start/Stop Containers: Control container lifecycle
• Resource Monitoring: Check CPU and memory usage
• Cleanup: Remove idle or unused containers

• vs code-server Editor: VS Code-like editing experience
• Syntax Highlighting: Support for multiple languages
• Auto-completion: Intelligent code suggestions
• File Explorer: Navigate your project structure

# Start backend in development mode
cd backend
npm run dev

# Start frontend in development mode (in another terminal)
cd frontend
npm run dev

# Build frontend
cd frontend
npm run build

# Build and start backend
cd backend
npm run build
npm start

1. Added new Template to existing Directory:

   mkdir starter_templates/new-template

2. Add Dockerfile:

   touch dockerfiles/new-template.Dockerfile

3. Update Build Script: Edit scripts/build_docker_starter.sh to include the new template

4. Test Template:

   ./scripts/build_docker_starter.sh

1. Fork the Repository
2. Commit Changes: git commit -m 'Add amazing feature'
3. Push to Branch: git push origin feature/amazing-feature
4. Open Pull Request

• Follow ESLint and Prettier configurations
• Write tests for new features
• Update documentation as needed
• Use conventional commit messages

This project is licensed under the MIT License - see the LICENSE file for details.

• Documentation: Check the Wiki
• Issues: Report bugs on GitHub Issues
• Discussions: Join our GitHub Discussions

Happy Coding! 🎉