CodeColab - Real-Time Collaborative Code Editor

---

Table of Contents

• Project Overview
• Features
• Tech Stack
• Architecture & Workflow
• Setup & Installation
• Environment Variables
• Usage
• Deployment
• Contribution
• License
• Credits

---

Project Overview

CodeColab is a real-time collaborative code editor that enables multiple users to write, edit, and execute code simultaneously in shared rooms.
Users can create or join rooms, collaboratively update code, share inputs, execute code remotely, view output, and see who else is online, with typing indicators and language selection.

---

Features

• Create or join rooms with unique IDs generated by the backend to avoid collisions.
• Real-time collaborative editing with live synchronization of code among all participants.
• Language support including JavaScript, Python, Java, C++ (configurable).
• Typing indicators show who is typing in the room.
• Code execution using REC (Remote Code Execution).
• User presence indication to see list of active users.
• Responsive UI with sidebar toggle (including shortcut Ctrl+B).
• Input sharing and live updates across collaborators.
• Automatic cleanup of empty rooms on user disconnect or leave.
• Deployment-ready backend and frontend with best practices for WebSocket on Render.com or similar platforms.

---

Tech Stack

Backend

• Node.js
• Express.js
• Socket.IO (real-time communication)
• Axios (HTTP client)
• UUID (for unique room IDs)
• REC (remote code execution)
• Environment variables with dotenv
• Deployment on Render.com

Frontend

• React.js with hooks
• Monaco Editor (code editor component)
• Socket.IO-client
• React-resizable-panels (layout management)
• Tailwind CSS (styling)
• React Icons for UI icons

---

Architecture & Workflow

1. Room Management
   • Backend creates uniquely identified rooms with persistent state: code, language, users, input, and output.
   • Users create new rooms or join existing ones.
2. Real-time Communication
   • Socket.IO handles bidirectional real-time sync.
   • Events include joining/leaving rooms, code and input changes, language switching, typing notifications.
3. Code Execution
   • Users send code + input to backend.
   • Backend calls external code execution service (REC).
   • Outputs are broadcasted back to all users in the room.
4. Frontend UI
   • Responsive and user-friendly interface.
   • Editor, input/output areas, user list with typing indicators.
   • Sidebar toggling and keyboard shortcuts.

---

Setup & Installation

Prerequisites

• Node.js (v16+ recommended)
• npm or yarn
• Render.com account (optional for deployment)
• Access to Piston API or another code execution REST API

---

Backend

1. Clone the repo:

git clone https://github.com/yourusername/codecolab.git
cd codecolab/backend

2. Install dependencies:

npm install

3. Create .env file in backend folder:

FRONTEND_URL=https://your-frontend-domain.com
CODE_EXECUTION_URL=https://emkc.org/api/v2/piston/execute
PORT=5000

4. Run backend server:

npm start

---

Frontend

1. Move to frontend folder:

cd ../frontend

2. Install dependencies:

npm install

3. Create .env file in frontend folder:

VITE_BACKEND_URL=https://your-backend-domain.com

4. Run frontend:

npm run dev

5. Open http://localhost:3000 in your browser.

---

Environment Variables

Variable Name	Description	Example
FRONTEND_URL	Full URL of frontend app for CORS in backend	https://your-frontend.com
CODE_EXECUTION_URL	URL of external code execution API (Piston)	https://your-rec-url
PORT	Port on which backend listens	5000
VITE_BACKEND_URL	Backend URL for frontend socket connection	https://your-backend.com

---

Usage

• On loading the app, choose to Create a Room or Join a Room.
• Provide a unique username.
• If joining, paste a valid room ID or open a link that looks like https://yourfrontend.com/room/ROOMID (app will navigate to /room/<roomId>).
• Use Monaco Editor to write or edit code collaboratively.
• Optionally write stdin input in the input box.
• Select programming language.
• Click Execute to run code and get output.
• View active users and see typing notifications.
• Press Ctrl + B to toggle sidebar visibility.

---

Deployment

• Deploy frontend and backend as separate services on Render or your preferred cloud platform.
• Use environment variables to configure URLs.
• Ensure backend deployed as Web Service supports WebSockets.
• Use a keep-alive mechanism for avoiding cold starts in free plans.
• Use HTTPS URLs for secure WebSocket connections (wss://).
• Monitor logs to debug connection or execution issues.

---

Contribution

Contributions welcome!

• Fork repo
• Create feature branch
• Open pull request
• Follow coding and commit message conventions

---

License

This project is licensed under the MIT License.

---

Credits

Developed by Anuja Mishra.