codeseed
Sign in
Explore Projects
TypeScriptadvancedwebAI generated

Real-Time Collaborative Markdown Editor

Build a multi-user Markdown editor where several people can edit the same document simultaneously and see each other's changes merge without conflicts, using a CRDT for conflict-free collaborative state. Learners practice CRDT-based state synchronization, WebSocket transport, and operational data structures under concurrent edits.

Estimate
~13.5h
Steps
6
Completed by
0
Proposed by
codeseed.app

Yjs · React · WebSocket · CodeMirror

Sign in to claim this project

Project roadmap

  1. 01

    Set up the editor UI

    ~2h

    Build a React app embedding a CodeMirror-based Markdown editor.

  2. 02

    Integrate a Yjs CRDT document

    ~2.5h

    Bind a Yjs shared document to the editor's text content.

  3. 03

    Build a WebSocket relay server

    ~2.5h

    Implement a server that relays Yjs updates between connected clients.

  4. 04

    Add presence indicators

    ~2h

    Show other users' cursors and selections in the shared document.

  5. 05

    Handle offline edits and reconnection

    ~2.5h

    Queue local edits made offline and merge them correctly upon reconnection.

  6. 06

    Load-test concurrent editing

    ~2h

    Simulate multiple concurrent editors and verify the document converges correctly.

Resources

Ready to build this?

Get a GitHub repo and start building. Your AI reviewer checks each step as you go.

~13.5h · 6 steps

Tech stack

YjsReactWebSocketCodeMirror