Live Code Studio

A real-time collaborative coding interview platform.

📺 Demo

Features

• Real-time Collaboration: Shared interview session state.
• WebAssembly Execution: Secure client-side execution for Python (via Pyodide).
• Browser-Based Execution: Secure execution for JavaScript and TypeScript.
• Simplified Stack: No complex backend compilers required.
• Dockerized: Single container for both Frontend (Static) and Backend (API).

Supported Languages

• JavaScript
• TypeScript
• Python (WASM)

Quick Start (Local)

1. Run with Docker (Recommended):

   docker build -t live-code-studio .
   docker run -p 8000:8000 live-code-studio

   Open http://localhost:8000.

2. Run Manually (Dev Mode):

   npm run dev

   • Backend at http://localhost:8000
   • Frontend at http://localhost:8080

Deployment (Render)

This project is configured for one-click deployment on Render and continuous deployment via GitHub Actions.

1. Push to GitHub.
2. Create Blueprint in Render dashboard.
3. Connect your repository.
4. Render will auto-detect render.yaml and deploy.

CI/CD Pipeline

A GitHub Actions workflow (.github/workflows/ci-cd.yml) is configured to:

1. Run Backend Tests (pytest).
2. Build Frontend (Type check & compile).
3. Automatically Deploy to Render if tests pass (Main branch only).

Setup Required: To enable auto-deployment from the pipeline, adding a secret to your GitHub Repo is required:

1. Go to Render -> Service Settings -> Deploy Hook.
2. Copy the URL.
3. Go to GitHub -> Settings -> Secrets -> Actions -> New Repository Secret.
4. Name: RENDER_DEPLOY_HOOK, Value: (Your Render URL).

Project Structure

• frontend/: React + Vite + Monaco Editor (TypeScript).
• backend/: FastAPI (Python) for session sync.
• Dockerfile: Multi-stage build for production.
• render.yaml: Render deployment configuration.