A real-time collaborative code interview platform with in-browser code execution.
Link https://ai-dev-tools-zoomcamp-2025-production.up.railway.app/
- ✅ Shareable room links - Create a room and share the URL
- ✅ Real-time collaboration - Multiple users can edit the same code simultaneously
- ✅ Live cursors & presence - See who's connected and where they're editing
- ✅ Syntax highlighting - Monaco Editor (VS Code's editor) with multiple languages
- ✅ In-browser code execution:
- JavaScript - Sandboxed iframe execution
- Python - Pyodide (WebAssembly) runtime
- ✅ Dark theme - Clean, modern black & white UI
| Component | Technology |
|---|---|
| Frontend | React + Vite |
| Editor | Monaco Editor |
| Real-time sync | Yjs + y-websocket |
| Styling | Tailwind CSS |
| Backend | Node.js + Express |
| JS Execution | Sandboxed iframe |
| Python Execution | Pyodide (WebAssembly) |
┌─────────────────────────────────────────────────────────┐
│ Client │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────────┐ │
│ │ React │ │ Monaco │ │ Code Runner │ │
│ │ Router │ │ Editor │ │ (iframe/WASM) │ │
│ └─────────────┘ └──────┬──────┘ └─────────────────┘ │
│ │ │
│ ┌─────┴─────┐ │
│ │ Yjs │ │
│ │ CRDT │ │
│ └─────┬─────┘ │
└──────────────────────────┼──────────────────────────────┘
│ WebSocket
┌──────────────────────────┼──────────────────────────────┐
│ Server │
│ ┌─────────────┐ ┌─────┴─────┐ │
│ │ Express │ │ y-websocket│ │
│ │ API │ │ Server │ │
│ └─────────────┘ └───────────┘ │
└─────────────────────────────────────────────────────────┘
- Node.js 18+
- npm or yarn
-
Clone the repository:
cd homework-02-end-to-end -
Install all dependencies:
# Install root dependencies npm install # Install backend dependencies cd backend && npm install # Install frontend dependencies cd ../frontend && npm install
-
Start the development servers:
In one terminal, start the backend:
cd backend npm run devIn another terminal, start the frontend:
cd frontend npm run dev -
Open in browser:
- Frontend: http://localhost:5173
- Backend API: http://localhost:3001
- Click "Create New Room" on the home page
- Share the room URL with others
- Start coding together in real-time!
- Click "Run" to execute JavaScript or Python code
homework-02-end-to-end/
├── frontend/ # React frontend
│ ├── src/
│ │ ├── pages/
│ │ │ ├── Home.jsx # Landing page
│ │ │ └── Room.jsx # Code editor room
│ │ ├── App.jsx # Router setup
│ │ ├── main.jsx # Entry point
│ │ └── index.css # Tailwind styles
│ ├── package.json
│ └── vite.config.js
│
├── backend/ # Node.js backend
│ ├── index.js # Express server + WebSocket
│ ├── yjs-server.js # Yjs document sync
│ └── package.json
│
├── package.json # Monorepo config
└── README.md
- Runs in a sandboxed iframe with
sandbox="allow-scripts"only - No access to parent DOM, cookies, or localStorage
- 5-second timeout for infinite loop protection
- Runs in Pyodide (WebAssembly) - no server-side execution
- Isolated from the main page context
- Memory-limited by browser WASM constraints
| Method | Endpoint | Description |
|---|---|---|
| POST | /api/rooms |
Create a new room |
| GET | /api/rooms/:id |
Get room info |
| GET | /api/rooms |
List all rooms |
- Create room returns shareable link
- Two browsers can join same room
- Edits sync in real-time
- Syntax highlighting works
- JavaScript execution works
- Python execution works (Pyodide)
- Share link copies to clipboard
- Connection status indicator
- Room data is stored in-memory (lost on server restart)
- Pyodide initial load is ~10MB (lazy loaded on first Python run)
- TypeScript execution not supported (syntax highlighting only)
- No persistent file system
- Add Redis/MongoDB for room persistence
- Implement user authentication
- Add video/audio chat integration
- Support more languages (Go, Rust via WASM)
- Add collaborative cursor colors
- Implement test runner
MIT