Code-With-Me (Production Build)

A beautiful, real-time collaborative code editor with instant live execution capabilities for 20+ programming languages. Built to rival modern online IDEs.

Features

• Real-time Collaboration: Instant synchronization across multiple users using Yjs (Conflict-free Replicated Data Types) and WebSockets.
• 20+ Programming Languages: Supports Python, Node.js, C/C++, Java, Go, Rust, Ruby, PHP, Swift, Kotlin, Dart, Scala, Perl, Lua, R, Bash, Haskell, and Elixir.
• Live Code Execution: Fast compilation and execution powered by an isolated Piston Docker Engine.
• Interactive Stdin: Full support for interactive inputs (stdin) for programs that require user input (e.g., Python's input()).
• Premium UI: Dark mode, glassmorphism UI, modern syntax highlighting, customizable fonts and layouts, all bundled optimally with Vite.
• Code Utilities: Download code locally, auto-share links, run shortcuts (Ctrl+Enter / Cmd+Enter).
• Secure Sandboxing: Code executes in a strictly resource-limited containerized environment preventing malicious actions.

Tech Stack

• Frontend: Vanilla JS (ES6+), CodeMirror 6, Vite, Vanilla CSS.
• Backend: Node.js, Express, Socket.io, Y-Websocket.
• Execution Engine: Piston (Dockerized, multi-language sandbox).

Local Development Setup

1. Requirements

• Node.js v18+
• Docker & Docker Compose (required for the execution engine)

2. Install Dependencies

npm install

3. Start the Execution Engine (Piston)

You need to run the sandbox engine in a separate Docker container:

docker-compose up -d

Then, install the language runtimes:

chmod +x install-languages.sh
./install-languages.sh

4. Build and Start the Application

Build the frontend and start the backend:

npm run build
npm start

Alternatively, for frontend dev mode with HMR, you can run npm run dev, but ensure the backend server is running on port 3000 to handle WebSockets and Execution.

The application will be running at http://localhost:3000

Deployment

To deploy this application to Render:

1. Web Service (Node.js):

   • Deploy this repository as a Web Service on Render.
   • Set Build Command: npm install && npm run build
   • Set Start Command: npm start
   • Set PISTON_URL environment variable pointing to your deployed Piston engine.

2. Execution Engine (Docker):

   • Deploy the docker-compose.yml or Piston engine image separately on a Docker-compatible host (Render Private Service or a separate VPS) to keep execution secure.

Credits

Engineered for TechGenDM.