Real-Time Collaborative Code Editor

A modern, real-time collaborative code editor that allows multiple users to edit the same file simultaneously with conflict resolution using Operational Transformation (OT).

Features

✅ FRONTEND-1.1: Multi-User Simultaneous Editing

• Multiple users can join the same room and edit files together
• Real-time synchronization of all changes
• User presence indicators with colored cursors
• Live user list showing who's online

✅ FRONTEND-1.2: Conflict Resolution using Operational Transformation

• Implements OT algorithms to handle concurrent edits
• Automatic conflict resolution without data loss
• Version control to maintain document consistency
• Handles insertions, deletions, and cursor movements

✅ FRONTEND-1.3: Syntax Highlighting for Multiple Languages

• JavaScript (.js, .jsx) - Full syntax highlighting and IntelliSense
• TypeScript (.ts, .tsx) - Full syntax highlighting and IntelliSense
• Python (.py) - Full syntax highlighting and IntelliSense
• C/C++ (.c, .cpp, .cc, .cxx) - Full syntax highlighting
• Additional Languages: HTML, CSS, JSON, Markdown, Java, and more

Technology Stack

• Backend: Node.js + TypeScript + Express + Socket.io
• Frontend: React + TypeScript + Monaco Editor (VS Code editor)
• Real-time Communication: WebSockets via Socket.io
• Conflict Resolution: Custom Operational Transformation implementation
• Styling: Styled Components
• Code Editor: Monaco Editor (same engine as VS Code)

Installation & Setup

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Installation

1. Install server dependencies:

   npm run install:all

2. Start the development server:

   npm run dev

   This will start:

   • Backend server on http://localhost:3001
   • Frontend development server on http://localhost:3000

3. Open your browser and navigate to http://localhost:3000

Production Build

npm run build
npm start

Usage

1. Join a Room: Enter a room ID, your name, and the file you want to edit
2. Start Coding: The editor supports full syntax highlighting for multiple languages
3. Collaborate: Invite others to join the same room ID to collaborate in real-time
4. See Live Changes: Watch as other users type, with their cursors visible in different colors

Architecture

Real-Time Collaboration

• Uses WebSocket connections for instant communication
• Operational Transformation ensures consistency across all clients
• Document versioning prevents conflicts and data loss

Conflict Resolution (OT Implementation)

• Insert Operations: Handle concurrent text insertions
• Delete Operations: Manage concurrent deletions
• Position Transformation: Adjust cursor positions based on remote changes
• Version Control: Track document versions to maintain consistency

File Management

• Create new files with proper syntax highlighting
• Persistent file storage on the server
• Support for multiple file types and extensions

Supported File Types

Language	Extensions	Features
JavaScript	.js, .jsx	Syntax highlighting, IntelliSense, Error detection
TypeScript	.ts, .tsx	Syntax highlighting, IntelliSense, Type checking
Python	.py	Syntax highlighting, IntelliSense, PEP 8 formatting
C/C++	.c, .cpp, .cc, .cxx	Syntax highlighting, IntelliSense
HTML	.html	Syntax highlighting, Tag completion
CSS	.css	Syntax highlighting, Property completion
JSON	.json	Syntax highlighting, Validation
Markdown	.md	Syntax highlighting, Preview support

API Endpoints

• GET /api/files - List all files
• POST /api/files - Create a new file
• GET /api/files/:fileName - Get file content

WebSocket Events

Client to Server

• join-room - Join a collaboration room
• operation - Send text operation (insert/delete)
• cursor-position - Update cursor position

Server to Client

• document-state - Initial document state and user list
• operation - Receive text operation from other users
• cursor-update - Receive cursor position updates
• user-joined / user-left - User presence updates

Development

Project Structure

├── src/server/           # Backend TypeScript code
│   ├── index.ts         # Main server file
│   ├── OperationalTransform.ts  # OT implementation
│   └── DocumentManager.ts       # File management
├── client/              # React frontend
│   ├── src/
│   │   ├── components/  # React components
│   │   ├── types/       # TypeScript type definitions
│   │   └── App.tsx      # Main React component
│   └── public/          # Static assets
└── documents/           # Stored files (created automatically)

Key Components

1. CodeEditor: Monaco-based editor with real-time collaboration
2. Sidebar: File browser and creation interface
3. UserList: Shows online users and their status
4. JoinRoomModal: Room joining interface

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

License

MIT License - see LICENSE file for details

Future Enhancements

• Voice/Video chat integration
• Code execution and debugging
• Git integration
• Plugin system for additional languages
• Mobile responsive design
• User authentication and permissions
• Room persistence and history
• Advanced OT algorithms (e.g., ShareJS integration)