System Overview

Component Breakdown

Frontend (React)

• CodeMirror Editor - Rich text editing with LaTeX support
• Yjs Client - Local document state & conflict resolution
• Clerk Auth - User authentication & session management
• Real-time UI - Live cursor positions, user presence

Backend (Go)

• Gin Web Server - HTTP/GraphQL API
• Authentication - JWT verification with Clerk
• Authorization - Project access control
• File Management - Upload/download documents

Real-Time Layer (Node.js)

• Y-WebSocket Server - Manages document rooms
• Broadcast Hub - Distributes updates to clients
• Awareness - Tracks user presence & cursors
• Persistence - Stores document snapshots

Database (MongoDB,Redis,MinIO)

• Users - Account info & Clerk integration
• Projects - Document metadata, ownership, collaborators
• Files - Document content storage
• Snapshots - Periodic Y-doc backups

Architecture

┌──────────────────────────────────────────────────────────┐
│                    Web Browsers                          │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐    │
│  │ User A       │  │ User B       │  │ User C       │    │
│  │ (CodeMirror) │  │ (CodeMirror) │  │ (CodeMirror) │    │
│  └──────┬───────┘  └───────┬──────┘  └────────┬─────┘    │
└─────────┼──────────────────┼──────────────────┼──────────┘
          │                  │                  │
          │ HTTP/REST        │ HTTP/REST        │ HTTP/REST
          │ GraphQL          │ GraphQL          │ GraphQL
          │                  │                  │
          └──────────────────┼──────────────────┘
                             │
                    ┌────────▼────────┐
                    │  Backend Server │
                    │  (Go + Gin)     │
                    ├─────────────────┤
                    │ • Auth & JWT    │
                    │ • GraphQL API   │
                    │ • Rest API      │
                    │ • Permissions   │
                    │ • File/Zip ups  │
                    └────────┬────────┘
                             │
          ┌──────────────────┼──────────────────┐
          │                  │                  │
          ▼                  ▼                  ▼
     ┌─────────┐      ┌──────────────┐   ┌──────────┐
     │ MongoDB │      │ Y-WebSocket  │   │  MinIO   │
     │ (Users, │      │  Server      │   │ (Files)  │
     │ Projects)      │ (Node.js)    │   │          │
     └─────────┘      └──────┬───────┘   └──────────┘
                             │
          ┌──────────────────┘
          │
          │ WebSocket
          │ (Real-time sync)
          │
          └──────────────────┬─────────────────┐
                             │                 │
                    ┌────────▼────────┐        │
                    │    Yjs Docs     │        │
                    │  (In Memory)    │        │
                    └─────────────────┘        │
                             ▲                 │
                             │                 │
                    All connected clients ◄────┘
                    receive updates instantly

Data Flow

Document Edit → Sync

User types in CodeMirror
         │
         ▼
    Yjs detects change
         │
         ▼
    WebSocket update sent
         │
         ▼
   Y-Server receives
         │
         ▼
 Broadcast to all users
         │
         ▼
 All clients update live ✓

Project Access Flow

User requests project
         │
         ▼
  JWT token verified
         │
         ▼
Check owner/collaborator
         │
    ├─ Owner → Full access ✓
    ├─ Collaborator → Read/Write ✓
    └─ Other → Denied ✗