Frontend Roadmap/Capstone Projects
Project Blueprint Document
Status: Coming SoonPhase: blueprint readyarchitectEst: 65 hours

Collaborative Document Editor

Real-Time Collaborative Rich Editor with CRDT Conflict Resolution

Build status noteYjs document mapping defined. Multiplayer socket synchronizers and offline buffer systems planned.
Architecture Focus:
Yjs document synchronizationClient-side change mergingIndexedDB local cachingPresence cursor positioning
Tech Stack:
ReactTypeScriptYjsWebSocketsIndexedDBTailwind CSSJest

Blueprint Information Only

This project's code implementation will come later in the curriculum. However, the complete architecture blueprint, functional specifications, core modules, milestones, and interview design explanations are fully active and available below to aid in your frontend system design study.

1. Problem Statement

Concurrent edits by multiple users on shared text documents cause text overlapping, out-of-order logs, and document corruption without real-time conflict-free reconciliation.

2. Business Context & Friction

Real-time collaborative workspaces need instant conflict resolution and smooth multiplayer indicators to deliver a seamless writing experience.

Target Users:Collaborative Writers, Document Editors, Content Managers

3. Learning Objectives

  • Implement document operations using Yjs CRDT collections
  • Establish multiplayer synchronization using WebSocket connections
  • Build offline-first edit saving using IndexedDB client caches
  • Expose real-time user cursor pointers and active labels

4. Functional Requirements

Real-Time Sync Pipeline

must-have

Use WebSockets to broadcast document edits and merge conflict-free replicated data updates dynamically.

Offline Local Auto-Save

must-have

Buffer unsaved edits in IndexedDB when offline. Sync updates automatically when the connection is restored.

Multiplayer Cursor Indicators

should-have

Display mouse cursors, text highlights, and name labels for all active collaborators.

Interactive Revisions History

should-have

Support browsing previous edits, tracking changes by user, and reverting to historical versions.

5. Non-Functional Specifications

Performance

  • •Reconciliation algorithms must process text operations in under 5ms.
  • •Cursor updates must render within 16ms of input events.

Scalability

  • •System must support up to 50 active writers editing a single document simultaneously.
  • •Payload sync sizes must contain minimal delta change values rather than sending the full document text.

Accessibility (A11y)

  • •Provide screen reader descriptions when other users edit text sections.
  • •Support keyboard shortcuts to navigate document revisions history lists.

Security

  • •Encrypt all WebSocket text transfers using secure WSS connections.
  • •Validate document access rights before establishing synchronization channels.

Reliability & Fault Tolerance

  • •Save documents to IndexedDB periodically to prevent loss if the browser tab crashes.
  • •Merge offline revisions cleanly without overwriting updates from online users.

Observability & Telemetry

  • •Log websocket reconnection events and transmission latencies.
  • •Track local database read/write durations for storage diagnostics.

6. Core Modules Breakdown

CRDT Sync Engine

Handles Yjs document state, compiles editor updates, and applies changes from peers.

Responsibilities:
  • •Manage Yjs document instances
  • •Apply delta updates to text state
  • •Format editor AST changes

WebSocket Link Handler

Manages WebSocket connections, handles retries, and broadcasts edit payloads.

Responsibilities:
  • •Maintain active connection link
  • •Broadcast document changes
  • •Process incoming user presence state

Local Buffer Adapter

Saves offline document backups to IndexedDB and runs sync routines when online.

Responsibilities:
  • •Save document updates to browser database
  • •Load document state on offline startup
  • •Reconcile local modifications on connection restore

7. Key User Flows

User writes document offline

  1. User drops connection but continues typing.
  2. App saves modifications to IndexedDB database.
  3. When online, the app syncs updates via WebSockets and merges edits cleanly with other updates.

Multiple users edit the same paragraph

  1. User A and User B type in the same paragraph simultaneously.
  2. Edits are processed through Yjs logic.
  3. Both viewports update instantly, showing cursor positions and merged text without glitches.

8. Architectural Blueprint

frontend Architecture

  • •Single Page Application wrapping Slate.js or Lexical editor windows in Yjs providers.
  • •Offline database adapters managing client caches.

state Management

  • •Zustand managing active user details, sidebar controls, and UI theme states.
  • •Yjs managing the collaborative document state.

data Fetching

  • •WebSockets for real-time document synchronization.
  • •Initial document load via HTTP API requests on app start.

caching

  • •IndexedDB storing local document copies.
  • •Cache documents in memory for instant editor rendering.

routing

  • •Vite standard internal views routing.

deployment

  • •Statically generated site deployed to AWS S3 distributions with Cloudflare edge caching.

9. Component Execution Plan

ComponentResponsibilityNotes
RichEditorCanvasBinds editor handlers (Slate.js/Lexical) to the Yjs provider.Updates local AST on key inputs.
CollaboratorCursorsRenders floating mouse cursor pointers and labels for other active users.Positioned using absolute viewport coordinates.
StatusIndicatorHighlights if the editor is connected, offline, or sync'ing files.Displays warnings on connection failures.

10. API Specifications

GET/api/v1/documents/:id
Get Document Details

Fetch base document contents and metadata on app startup.

Response Payload
{
  "id": "d1",
  "title": "Project Plan",
  "content": "Base text outline..."
}

11. Logical Data Schemas

Collaborator

Schema mapping active user presence details.

id: stringname: stringcolor: stringcursorPosition: number

12. Curriculum Milestones

Phase 1: Foundation

Editor AST Setup

  • •Configure Lexical or Slate text editor component.
  • •Implement basic custom AST mappings for text data.
Phase 2: Core Features

Yjs CRDT Integration

  • •Integrate Yjs document structure.
  • •Implement conflict-free document merges on local edits.
Phase 3: Advanced Features

WebSocket Sync Channels

  • •Deploy websocket server router.
  • •Sync text modifications and updates between clients in real-time.
Phase 4: Production Hardening

Offline Storage & Caching

  • •Integrate IndexedDB document buffering.
  • •Add auto-sync logic on connection restore.
Phase 5: Documentation and Interview Explanation

Tradeoff Analysis

  • •Publish detailed design document comparing OT vs CRDT models.
  • •Prepare interview checklist detailing cursor sync algorithms.

13. Technical Execution Roadmap

1

Build core editor interface

Create rich text editor layouts and hook keypress events.

2

Integrate Yjs libraries

Bind editor data updates to Yjs document models.

3

Deploy WebSocket server

Create a socket server to broadcast update events to peers.

4

Configure IndexedDB backing

Write storage queries to save document backups locally.

14. Systems Interview Deep Dive

Elevator Pitch

“I designed a real-time collaborative document editor that uses Yjs CRDTs for conflict-free text merging, WebSockets for sync, and IndexedDB for offline-first data resilience.”

Architecture Summary

Document state is maintained as a Yjs model. Edits trigger delta updates sent via WebSockets. IndexedDB stores local backups, while shared socket presence channels sync cursor paths.

Architectural Tradeoffs

  • ▲CRDTs use more memory than Operational Transformation (OT), but they simplify offline merging by eliminating the need for a central server.
  • ▲Rendering multiple cursors can cause layout lag, which we prevent by using absolute positioning outside the editor DOM tree.

Possible Follow-up Questions

  • ?Explain the differences between CRDTs and OT models.
  • ?How do you handle conflict resolution if two users edit the same word offline?

15. Future Enhancements

  • Add threads for inline comments.
  • Incorporate markdown auto-formatting options.

Related Curriculum Tracks:

performance engineeringgraphql client platform
Prev: Next.js Streaming Commerce AppAll CapstonesNext: Frontend Observability Dashboard