Introduction
Why OfflineNotes, how the course is structured, and what you’ll have built by the end. Open →
OfflineNotes
Build OfflineNotes, a local-first notes app that works fully offline. Notes live in IndexedDB, a Rust→WASM CRDT engine merges concurrent edits conflict-free, a Service Worker makes it an installable PWA, and a thin sync server keeps every device in step when you're back online.
What you’ll build
Section titled “What you’ll build”Setup & Tooling
Astro, TypeScript, and the Rust→WASM toolchain (wasm-pack), in a pnpm workspace. Open →
App Shell
Build the Astro app shell and the first Web Components for the notes UI. Open →
IndexedDB Foundation
Wrap IndexedDB in a typed store for notes and their local op log. Open →
The Notes UI
Create, edit, and delete markdown notes as Web Components, backed by IndexedDB. Open →
Rust → WASM Toolchain
Compile Rust to WASM with wasm-bindgen and call it from TypeScript. Open →
A CRDT in Rust
Build the CRDT: an LWW register for fields and a sequence CRDT for the body. Open →
Wiring the WASM Core
Feed local edits through the WASM CRDT and persist its ops to IndexedDB. Open →
Service Worker (Offline)
Precache the app shell so OfflineNotes works fully offline and installs as a PWA. Open →
The Sync Server
Build a thin Hono server that stores and relays each note’s CRDT ops. Open →
Push & Pull Sync
Push local ops, pull remote ones, and merge them with the WASM engine. Open →
Background Sync
Defer sync while offline and retry automatically when connectivity returns. Open →
Conflict-free Merge
Watch two clients edit the same note offline and merge with zero conflicts. Open →
Deployment
Ship the PWA and the sync server, and pass the installability checks. Open →
Wrap-up
Review what you built, the trade-offs, and where to take OfflineNotes next. Open →