A modern, secure, and powerful web-based code execution environment supporting multiple programming languages. Built with React, TypeScript, Node.js, and Docker for secure code execution.
- β¨ Features
- π Quick Start
- π§ Configuration
- ποΈ Architecture
- π Troubleshooting
- π API Documentation
- π§ͺ Testing
- π Security
- π€ Contributing
- π License
- π Acknowledgments
- π Support
- JavaScript π: Full ES6+ support with Node.js runtime
- C++ β‘: C++17 standard with STL support
- Ruby π: Latest Ruby with gem support
- Go π΅: Latest Go version with package management
- Monaco Editor (VS Code's editor)
// Example of editor configuration const editorOptions = { theme: 'vs-dark', language: 'javascript', automaticLayout: true, minimap: { enabled: true }, fontSize: 14, };
- Intelligent code completion
- Real-time syntax highlighting
- Error detection and linting
- Multiple themes (Dark/Light/High Contrast)
- Containerized code execution with resource limits:
# Example Docker container limits services: code-runner: mem_limit: 512m cpus: 0.5 pids_limit: 100 ulimits: nproc: 100 nofile: soft: 1024 hard: 2048
- Real-time code execution
- Quick feedback
- Multiple language support
- Secure sandboxed environment
- Code sharing capabilities
- Custom themes
- Keyboard shortcuts
- Code snippets
- Docker Desktop 20.10.0+
- Git
-
Clone the repository
git clone https://github.com/AmirHaytham/Super-multi-prog-lang-playground.git cd Super-multi-prog-lang-playground
-
Create necessary environment files
Create
backend/.env
:NODE_ENV=development PORT=5002
Create
frontend/.env
:REACT_APP_API_URL=http://localhost:5007 REACT_APP_REPORT_WEB_VITALS=true WDS_SOCKET_PORT=0
-
Start Docker Desktop
- Make sure Docker Desktop is running
- Open Docker Desktop
- Wait until you see "Docker Desktop is running" in the system tray
-
Build and Run
# Clean up any old containers (if needed) docker-compose down --rmi all # Build and start services docker-compose up --build # If you see any errors, try running the services separately: docker-compose up --build backend # In first terminal docker-compose up --build frontend # In second terminal
-
Verify Installation
- Backend API should be running at: http://localhost:5007
- Frontend should be running at: http://localhost:3007
- Try opening the frontend URL in your browser
- Test code execution with a simple program
-
Port Conflicts
# If you see "port already in use" error: # Windows: netstat -ano | findstr "5007" netstat -ano | findstr "3007" # Then kill the process using the PID shown
-
Docker Build Fails
# Clean Docker system docker system prune -a docker volume prune # Rebuild from scratch docker-compose build --no-cache
-
Frontend Can't Connect to Backend
- Check if both containers are running:
docker-compose ps
- Verify backend logs:
docker-compose logs backend
- Make sure your firewall isn't blocking the ports
-
Container Startup Issues
# Stop all containers and remove volumes docker-compose down -v # Start with detailed logs docker-compose up --build --force-recreate
After setup, try these examples to verify everything works:
JavaScript:
console.log("Hello from JavaScript!");
C++:
#include <iostream>
int main() {
std::cout << "Hello from C++!" << std::endl;
return 0;
}
Ruby:
puts "Hello from Ruby!"
Go:
package main
import "fmt"
func main() {
fmt.Println("Hello from Go!")
}
POST /api/execute
Content-Type: application/json
{
"language": "javascript", // Supported: javascript, cpp, ruby, go
"code": "console.log('Hello, World!')",
"timeout": 30000
}
GET /api/languages
Response:
{
"languages": [
{
"id": "javascript",
"version": "ES6+",
"runtime": "Node.js"
},
{
"id": "cpp",
"version": "C++17",
"compiler": "g++"
},
{
"id": "ruby",
"version": "Latest",
"runtime": "Ruby"
},
{
"id": "go",
"version": "Latest",
"runtime": "Go"
}
]
}
# Backend Tests
cd backend
npm test
# Frontend Tests
cd frontend
npm test
# E2E Tests
npm run test:e2e
# Generate coverage reports
npm run test:coverage
-
Container Isolation
- Separate containers for each execution
- Network isolation
- Resource limits
- No persistent storage
-
Code Execution Limits
const executionLimits = { timeout: 30000, // 30 seconds memory: '512m', processes: 100, fileSize: '10m' };
-
Input Validation
- Code size limits
- Language validation
- Syntax checking
- Malicious code detection
-
Container Build Failures
# Clean Docker cache docker builder prune # Remove all containers and images docker-compose down --rmi all
-
Performance Issues
# Check container stats docker stats # Monitor container logs docker-compose logs -f --tail=100
-
Network Problems
# Inspect network docker network ls docker network inspect multi-lang-playground_app-network
-
Frontend Connection Issues
- Check API URL in
.env
- Verify CORS settings
- Check browser console logs
- Check API URL in
-
Backend Errors
# Check backend logs docker-compose logs backend # Access container shell docker-compose exec backend sh
- Code splitting
- Lazy loading
- Caching strategies
- Asset optimization
- Request queuing
- Caching layer
- Load balancing
- Resource pooling
We welcome contributions! Please follow these steps:
-
Fork and Clone
git clone https://github.com/AmirHaytham/Super-multi-prog-lang-playground.git
-
Create Feature Branch
git checkout -b feature/amazing-feature
-
Commit Changes
git commit -m 'Add amazing feature'
-
Push and Create PR
git push origin feature/amazing-feature
- Follow TypeScript best practices
- Write unit tests
- Update documentation
- Follow code style guide
Need help? We're here to assist:
- π Check the Documentation
- π Search Issues
- π¬ Follow on Twitter
- π§ Email: amir.haytham.salama@gmail.com
GitHub β’ Twitter β’ Report Bug β’ Request Feature
Made with β€οΈ by Amir Haytham