Software Engineer · intermediate
Local-First Collaborative Editor with CRDTs
A notes app that works fully offline, stores data in the browser, and syncs edits between users in real time without conflicts using a CRDT — two people typing in the same document on a flaky connection and always converging on the same text.
Project overview
Local-first is the architecture trend of 2026, with SQLite compiled to WebAssembly giving the browser a real database. A collaborative editor built on CRDTs demonstrates concurrency and state-synchronization skill that most CRUD portfolios never touch.
Real-world use case
Field engineers fill out inspection reports on tablets with no signal, and their edits merge cleanly with the office’s changes when they reconnect — no "which version wins" dialogs.
Tools and technologies
- React
- Yjs
- y-webrtc or Hocuspocus
- SQLite-Wasm with OPFS
- IndexedDB
- TypeScript
Skills you can demonstrate
Real-Time Collaboration, Conflict-Free Replicated Data Types, Offline-First Architecture, State Synchronization, Browser Storage APIs
Build roadmap
- Build the single-user editor
A React text editor backed by a Yjs document. Persist it to IndexedDB so a refresh keeps your text. No networking yet. - Add real-time sync
Connect a sync provider and open the app in two windows. Type in both and watch edits appear instantly. Understand what the provider is actually sending. - Go offline on purpose
Disconnect one window, edit in both, reconnect. Confirm convergence. Then try the nasty cases: same position, deletions overlapping insertions. - Add multiple documents and rooms
A document list, shareable room links, and per-document persistence. Store the list itself in SQLite-Wasm with OPFS for a real local database. - Add presence and awareness
Show who is in the document and where their cursor is using the awareness protocol. Handle a user leaving without cleanup. - Deploy and document
Host the app and the sync server, write the sync-flow diagram and the offline test matrix results, and record the two-window demo.
Ways to extend the project
Add presence (cursors and names), an undo history that respects other users’ edits, and end-to-end encryption of the sync channel.
How to showcase your work
- GitHub: The app, a hosted demo with a shareable room link, and a README with a diagram of the sync flow and the offline test results.
- LinkedIn: Record two browser windows side by side, disconnect one, type in both, reconnect, and watch them merge. That clip explains CRDTs better than any paragraph.
- Resume: Use the architecture terms: "Built a local-first collaborative editor using CRDTs with offline persistence and real-time peer sync."