Real-Time Collaborative Code Editor

A full-featured web-based IDE enabling real-time collaboration, terminal access, and file management.

🚀 Features

• Real-time Collaboration: Multi-user cursor tracking and code editing using WebSockets.
• Interactive Terminal: Full shell access with command history and persistency.
• File System: Create, delete, move, and rename files/folders with drag-and-drop support.
• User Management: Authentication, workspaces, and role-based access control.
• Secure Sandbox: Docker-based execution environment (planned).

🛠️ Tech Stack

• Frontend: React, Vite, TypeScript, Monaco Editor, xterm.js
• Backend: NestJS, TypeORM, PostgreSQL, WebSocket Gateway
• Infrastructure: Docker (optional for database)

🏃‍♂️ Getting Started (Local Setup)

1. Clone the Repository

git clone https://github.com/paultanay/Realtime-Collaborative-Code-Editor.git
cd Realtime-Collaborative-Code-Editor

2. Install Dependencies

Install dependencies for both frontend and backend:

# Backend
cd backend
npm install

# Frontend
cd ../frontend
npm install

3. Environment Setup (CRITICAL STEP)

You must create .env files in both backend and frontend directories.

Backend (.env) (backend/.env) Copy .env.example to .env and update the values:

cp .env.example .env

Make sure your PostgreSQL database is running and the credentials match.

Frontend (.env) (frontend/.env) Copy .env.example to .env:

cp .env.example .env

4. Database Setup

Ensure PostgreSQL is running. If you have Docker, you can spin up a DB:

docker run --name collab-db -e POSTGRES_PASSWORD=postgres -e POSTGRES_DB=collaborative_editor -p 5432:5432 -d postgres

5. Run the Application

Open two terminal tabs:

Tab 1: Backend

cd backend
npm run start:dev

Tab 2: Frontend

cd frontend
npm run dev

Visit http://localhost:5173 to start coding!