Skip to content

SEMINAR.md

Latest commit

 

History

History
545 lines (445 loc) · 22.1 KB

SEMINAR.md

File metadata and controls

545 lines (445 loc) · 22.1 KB

CollabCode — Real-Time Collaborative Code Editor

📌 Project Overview

CollabCode is a full-stack, real-time collaborative code editor that enables multiple users to simultaneously write code, edit documents, chat, make video calls, and get AI-powered coding assistance — all within a single browser-based IDE. It is inspired by platforms like VS Code Live Share, Google Docs, and Replit.

Author: Aditya Kumar Singh
Type: B.Tech CSE Final Year Project
Category: Web Application (Real-Time Collaboration)

🎯 Problem Statement

In modern software development, teams frequently need to collaborate on code in real time — whether for pair programming, code reviews, interviews, or teaching. Existing solutions are either:

  • Too expensive (VS Code Live Share requires VS Code installation)
  • Too limited (Most online editors lack multi-file, document editing, or video calling)
  • Not integrated (Separate tools for code, docs, chat, and video)

CollabCode solves this by providing an all-in-one, browser-based collaborative IDE with zero installation required.

🎯 Objectives

  1. Develop a real-time collaborative code editor with conflict-free multi-user editing
  2. Support multi-file workspace management (create, rename, delete, upload files/folders)
  3. Integrate a rich document editor (Google Docs-like) with collaborative editing
  4. Provide real-time chat with emoji support and reactions
  5. Enable video conferencing via WebRTC peer-to-peer connections
  6. Offer AI-powered code assistance using Google Gemini API
  7. Support code execution in 15+ programming languages
  8. Implement user authentication with JWT-based security

🛠️ Technology Stack

Frontend Technologies

Technology Version Purpose
React 19.1 UI component library (SPA framework)
Vite 6.3 Build tool & development server (HMR)
Tailwind CSS 4.1 Utility-first CSS framework for styling
React Router DOM 7.6 Client-side routing
Framer Motion 12.31 Animations and transitions
Monaco Editor 0.55 Code editor (same engine as VS Code)
Tiptap 2.4+ Rich text document editor (ProseMirror-based)
Yjs 13.6 CRDT library for real-time conflict-free sync
Socket.IO Client 4.8 Real-time bidirectional communication
simple-peer 9.11 WebRTC abstraction for video calls
Axios 1.10 HTTP client for API calls
React Icons 5.5 Icon library (Feather, Lucide icons)
emoji-picker-react 4.17 Emoji picker component
Zustand 5.0 Lightweight state management

Backend Technologies

Technology Version Purpose
Node.js 18+ JavaScript runtime
Express 5.1 Web framework for REST API
Socket.IO 4.8 WebSocket server for real-time events
Yjs (server) 13.6 Server-side CRDT document handling
ws 8.19 Raw WebSocket server for Yjs sync
better-sqlite3 12.6 Embedded SQLite database
bcryptjs 3.0 Password hashing (salt + hash)
jsonwebtoken 9.0 JWT token generation & verification
dotenv 17.2 Environment variable management
nodemon 3.1 Auto-restart server on file changes
CORS 2.8 Cross-Origin Resource Sharing

External APIs

API Purpose
Piston API (emkc.org) Remote code execution in 15+ languages
Google Gemini API AI-powered code assistance (explain, debug, optimize)
Google STUN Servers NAT traversal for WebRTC connections

🏗️ System Architecture

┌─────────────────────────────────────────────────────────────────┐
│                        CLIENT (Browser)                         │
│                                                                 │
│  ┌──────────┐  ┌──────────┐  ┌────────┐  ┌───────┐  ┌───────┐ │
│  │  Monaco   │  │  Tiptap  │  │ Video  │  │ Chat  │  │  AI   │ │
│  │  Editor   │  │  Editor  │  │  Chat  │  │       │  │ Asst  │ │
│  └────┬─────┘  └────┬─────┘  └───┬────┘  └───┬───┘  └───┬───┘ │
│       │              │            │            │          │      │
│  ┌────┴──────────────┴────┐  ┌───┴────────────┴───┐  ┌───┴───┐ │
│  │     Yjs (CRDT Sync)    │  │   Socket.IO Client  │  │ Fetch │ │
│  │   y-monaco / y-prosemirror│ │                    │  │       │ │
│  └────────────┬───────────┘  └─────────┬──────────┘  └───┬───┘ │
└───────────────┼────────────────────────┼─────────────────┼─────┘
                │ WebSocket              │ WebSocket        │ HTTP
                │ (port 3002)            │ (port 3001)      │
┌───────────────┼────────────────────────┼─────────────────┼─────┐
│               │          SERVER        │                 │      │
│  ┌────────────▼───────────┐  ┌────────▼────────┐  ┌─────▼────┐ │
│  │   Yjs WebSocket Server │  │  Socket.IO Server│  │ Express  │ │
│  │   (Document Sync)      │  │  (Chat, Video    │  │ REST API │ │
│  │                        │  │   Signaling)     │  │ (Auth,   │ │
│  └────────────────────────┘  └─────────────────┘  │  Rooms)  │ │
│                                                    └─────┬───┘ │
│                         ┌──────────────────┐             │      │
│                         │   SQLite Database │◄────────────┘      │
│                         │  (Users, Rooms)   │                   │
│                         └──────────────────┘                    │
└─────────────────────────────────────────────────────────────────┘

                    External Services
        ┌──────────────────┐  ┌──────────────────┐
        │  Piston API      │  │  Google Gemini   │
        │  (Code Execution)│  │  (AI Assistance) │
        └──────────────────┘  └──────────────────┘

📁 Project Structure

collabcode/
├── client/                     # Frontend (React + Vite)
│   ├── index.html              # Entry HTML with Node.js polyfills
│   ├── package.json            # Frontend dependencies
│   ├── vite.config.js          # Vite configuration
│   └── src/
│       ├── main.jsx            # React entry point
│       ├── App.jsx             # Root component with routing
│       ├── index.css           # Global styles & design tokens
│       ├── socket.js           # Socket.IO connection factory
│       ├── api.js              # Piston API for code execution
│       ├── constants.js        # Language versions mapping
│       ├── context/
│       │   └── AuthContext.jsx # Authentication state (React Context)
│       ├── pages/
│       │   ├── HomePage.jsx    # Landing page with room creation
│       │   ├── AuthPage.jsx    # Login / Register page
│       │   └── EditorPage.jsx  # Main IDE layout (tabs + sidebar)
│       └── components/
│           ├── CodeEditor.jsx  # Monaco editor + Yjs + file explorer
│           ├── DocumentEditor.jsx # Tiptap rich text editor
│           ├── VideoChat.jsx   # WebRTC video conferencing
│           ├── Chat.jsx        # Real-time chat with emoji
│           ├── AIAssistant.jsx # Gemini-powered code AI
│           ├── Sidebar.jsx     # User list + actions
│           ├── Client.jsx      # User avatar component
│           └── Output.jsx      # Code execution output panel
│
├── server/                     # Backend (Node.js + Express)
│   ├── index.js                # Main server (Express + Socket.IO + Yjs)
│   ├── auth.js                 # Authentication logic (JWT + bcrypt)
│   ├── database.js             # SQLite schema & queries
│   ├── .env                    # Environment variables
│   └── package.json            # Backend dependencies
│
├── README.md
└── DEPLOYMENT.md

🔧 Detailed Module Description

Module 1: User Authentication

Aspect Details
Registration Username + Email + Password → bcrypt hash → SQLite → JWT token
Login Email + Password → bcrypt compare → JWT token (7-day expiry)
Authorization Bearer token in HTTP headers, verified via middleware
Security Passwords hashed with bcrypt (10 salt rounds), JWT with configurable secret

Flow:

User → Register/Login → Server validates → bcrypt hash/compare
  → JWT generated → Stored in localStorage → Sent with all API requests

Module 2: Room Management

  • Users create rooms with UUID-based Room IDs
  • Rooms can be public or private (password-protected)
  • Room membership tracked in SQLite (room_members table)
  • Invite via link — share the room URL or Room ID
  • Guest access supported (optional authentication)

Module 3: Real-Time Code Editor (Monaco + Yjs)

This is the core module — a multi-file code editor with real-time collaboration.

Feature Implementation
Editor Engine Monaco Editor (same as VS Code)
Real-Time Sync Yjs CRDT via WebSocket (y-websocket)
Conflict Resolution CRDT (Conflict-Free Replicated Data Type) — no conflicts possible
Multi-File Support Yjs shared array for file list + per-file Yjs text
Language Support 20+ languages with syntax highlighting
Cursor Awareness Multi-user cursors with usernames and colors
File Operations Create, rename, delete, upload files/folders
Zoom Adjustable font size (10–30px) with + / − controls
Format Built-in code formatting
Download Download individual files or entire workspace

How CRDT (Yjs) Works:

User A types "Hello"     User B types "World"
       ↓                        ↓
 Yjs encodes as           Yjs encodes as
 operation vectors        operation vectors
       ↓                        ↓
   WebSocket ─────────→ Server ←──────── WebSocket
                           ↓
                  Broadcasts to all
                           ↓
              Both see "HelloWorld"
              (Mathematically guaranteed
               no conflicts via CRDT)

Module 4: Rich Document Editor (Tiptap)

A Google Docs-like collaborative document editor built with Tiptap (ProseMirror).

Features:

  • Bold, Italic, Underline, Strikethrough
  • Headings (H1, H2, H3)
  • Bullet lists, Numbered lists, Blockquotes
  • Code blocks with syntax highlighting (lowlight)
  • Tables (insert, add/remove rows/columns)
  • Images, Links, Text alignment
  • Font sizes, Colors, Highlight
  • Subscript, Superscript
  • Undo / Redo
  • File upload support (.txt, .md, .docx, .pdf)
  • Download as text
  • Real-time collaboration via y-prosemirror + Yjs

Module 5: Video Conferencing (WebRTC)

Peer-to-peer video calling using WebRTC with Socket.IO signaling.

How WebRTC Works:

Step 1: User A joins video room
Step 2: User B joins → Server notifies User A
Step 3: User A creates RTCPeerConnection
Step 4: User A creates "offer" (SDP) → sends via Socket.IO to User B
Step 5: User B receives offer → creates "answer" → sends back
Step 6: ICE candidates exchanged for NAT traversal
Step 7: Direct peer-to-peer media stream established

Features:

  • Camera toggle on/off
  • Microphone toggle on/off
  • Screen sharing (replaces video track)
  • Fullscreen mode
  • Multi-user grid layout (auto-adjusting grid columns)
  • User count display

Module 6: Real-Time Chat

Feature Details
Messages Text messages with username & timestamp
Emoji Full emoji picker integration
Reactions Quick emoji reactions on messages
Typing Indicators Shows when others are typing
History Last 100 messages stored on server
Sync Chat history sent to new joiners

Module 7: AI Code Assistant

Feature Details
Engine Google Gemini API (gemini-1.0-pro)
Quick Actions Explain Code, Find Bugs, Optimize, Document
Context Sends current code + language to AI
Chat Full conversational interface
Proxy API calls proxied through backend to avoid CORS

Module 8: Code Execution

Feature Details
Engine Piston API (emkc.org) — sandboxed execution
Languages JavaScript, Python, Java, C, C++, Go, Rust, Ruby, PHP, TypeScript, Kotlin, Swift, C#, and more
Output Stdout/Stderr displayed in terminal-style output panel
Safety Sandboxed — no access to host system

🗄️ Database Schema (SQLite)

-- Users table
CREATE TABLE users (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    username TEXT UNIQUE NOT NULL,
    email TEXT UNIQUE NOT NULL,
    password TEXT NOT NULL,          -- bcrypt hashed
    avatar_color TEXT DEFAULT '#4ECDC4',
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

-- Rooms table
CREATE TABLE rooms (
    id TEXT PRIMARY KEY,             -- UUID
    name TEXT,
    created_by INTEGER,
    is_private INTEGER DEFAULT 0,
    password TEXT,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (created_by) REFERENCES users(id)
);

-- Room membership
CREATE TABLE room_members (
    room_id TEXT,
    user_id INTEGER,
    role TEXT DEFAULT 'member',      -- 'owner' or 'member'
    joined_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    PRIMARY KEY (room_id, user_id)
);

-- Documents
CREATE TABLE documents (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    room_id TEXT,
    type TEXT DEFAULT 'code',
    content TEXT,
    language TEXT DEFAULT 'javascript',
    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

ER Diagram:

┌────────────┐        ┌──────────────┐        ┌────────────┐
│   USERS    │        │ ROOM_MEMBERS │        │   ROOMS    │
├────────────┤        ├──────────────┤        ├────────────┤
│ id (PK)    │◄──────►│ user_id (FK) │        │ id (PK)    │
│ username   │        │ room_id (FK) │◄──────►│ name       │
│ email      │        │ role         │        │ created_by │
│ password   │        │ joined_at    │        │ is_private │
│ avatar_color│       └──────────────┘        │ password   │
│ created_at │                                │ created_at │
└────────────┘                                └────────────┘
                                                    │
                                              ┌─────▼──────┐
                                              │ DOCUMENTS  │
                                              ├────────────┤
                                              │ id (PK)    │
                                              │ room_id(FK)│
                                              │ type       │
                                              │ content    │
                                              │ language   │
                                              │ updated_at │
                                              └────────────┘

🔄 Development Methodology

Software Development Life Cycle: Agile (Iterative)

The project follows an Agile Iterative approach:

Phase Activities
Phase 1: Planning Requirement analysis, technology selection, architecture design
Phase 2: Core Development Code editor with Monaco, Yjs integration, Socket.IO server
Phase 3: Feature Expansion Document editor, chat, video calling, AI assistant
Phase 4: UI/UX Polish VS Code-inspired dark theme, responsive design, animations
Phase 5: Testing & Deployment Integration testing, browser compatibility, deployment

Development Workflow

Plan → Code → Test → Review → Deploy → Iterate
  ↑                                        │
  └────────────────────────────────────────┘

🔐 Security Measures

Measure Implementation
Password Hashing bcrypt with 10 salt rounds
Token-Based Auth JWT with 7-day expiry
CORS Protection Whitelisted origins only
Input Validation Server-side validation on all endpoints
Sandboxed Execution Code runs in Piston's isolated containers
Environment Variables Secrets stored in .env, not in code

📡 Communication Protocols

Protocol Purpose Port
HTTP/REST Authentication, room CRUD, AI proxy 3001
WebSocket (Socket.IO) Chat, typing indicators, video signaling 3001
WebSocket (raw) Yjs CRDT document synchronization 3002
WebRTC Peer-to-peer video/audio streaming Dynamic
STUN NAT traversal for WebRTC Google STUN

🖥️ UI/UX Design

Design Philosophy

  • VS Code-inspired dark IDE aesthetic
  • Professional color palette: #1e1e1e (background), #252526 (sidebar), #007ACC (accent blue)
  • Typography: Inter (UI), JetBrains Mono (code)
  • Sharp-bordered panels, flat buttons, subtle hover animations

Pages

Page Route Purpose
Home / Landing page with room creation/joining
Auth /auth Login / Register form
Editor /editor/:roomId Main IDE with tabs (Code, Document, Video)

🚀 How to Run

Prerequisites

  • Node.js 18+ installed
  • npm installed

Steps

# 1. Clone the repository
git clone <repo-url>
cd collabcode

# 2. Install server dependencies
cd server
npm install

# 3. Create server .env file
echo "PORT=3001
YJS_PORT=3002
JWT_SECRET=your-secret-key
GEMINI_API_KEY=your-gemini-api-key" > .env

# 4. Start the server
npm run dev
# Server starts on port 3001, Yjs on port 3002

# 5. Install client dependencies (new terminal)
cd ../client
npm install

# 6. Create client .env file
echo "VITE_BACKEND_URL=http://localhost:3001
VITE_YJS_URL=ws://localhost:3002" > .env

# 7. Start the client
npm run dev
# Client starts on http://localhost:5173

📊 Supported Programming Languages

Language Version Language Version
JavaScript 18.15.0 Python 3.10.0
TypeScript 5.0.3 Java 15.0.2
C 10.2.0 C++ 10.2.0
C# 6.12.0 Go 1.16.2
Rust 1.68.2 Ruby 3.0.1
PHP 8.2.3 Swift 5.3.3
Kotlin 1.8.20 R 4.1.1

✅ Key Features Summary

# Feature Technology
1 Real-Time Code Editing Monaco Editor + Yjs CRDT
2 Multi-File Workspace Yjs shared arrays
3 Real-Time Document Editing Tiptap + y-prosemirror
4 Video Calling WebRTC + Socket.IO signaling
5 Real-Time Chat Socket.IO
6 AI Code Assistant Google Gemini API
7 Code Execution Piston API (15+ languages)
8 User Authentication JWT + bcrypt + SQLite
9 Room Management UUID rooms with invite links
10 Zoom In/Out Monaco updateOptions API
11 File Upload/Download FileReader API + Blob
12 Screen Sharing WebRTC screen capture
13 Typing Indicators Socket.IO events
14 Emoji & Reactions emoji-picker-react
15 Code Formatting Monaco built-in formatter

🔮 Future Scope

  1. Terminal Integration — Embedded terminal for running shell commands
  2. Git Integration — Commit, push, pull directly from the IDE
  3. Multi-Cursor Awareness — See exactly where each user's cursor is
  4. Code Reviews — Inline commenting and PR-style reviews
  5. Deployment — One-click deployment to cloud platforms
  6. Mobile Responsiveness — Full mobile-friendly editor
  7. Plugin System — Allow users to install custom extensions
  8. Code History / Versioning — Track and revert to previous versions

📚 References

  1. Monaco Editor — https://microsoft.github.io/monaco-editor/
  2. Yjs CRDT — https://yjs.dev/
  3. Tiptap Editor — https://tiptap.dev/
  4. Socket.IO — https://socket.io/
  5. WebRTC — https://webrtc.org/
  6. Piston API — https://github.com/engineer-man/piston
  7. Google Gemini API — https://ai.google.dev/
  8. React — https://react.dev/
  9. Vite — https://vitejs.dev/
  10. Tailwind CSS — https://tailwindcss.com/

Document prepared for B.Tech CSE End Semester Seminar — CollabCode Project