Before you start
A coding agent, browser and three fictional journal entries.
Why this lesson exists
This lab adapts the “Build an Offline-First Personal Tracker” project write-up into a practice build. The time is an estimated first session, not a promise to finish a production system. Use the public repository as a reference when available; the exercise can be built with original sample content.
Do the exercise
Define the practice version
Start with one record type, stable identifiers and local storage. Implement export before adding cloud synchronization.
Build step 1
Choose one record type, such as a journal entry.
Build step 2
Save and query it with IndexedDB.
Build step 3
Add export before sync.
Build step 4
Add a module registry so features can be enabled independently.
Build step 5
Add authentication and per-user cloud tables.
Build step 6
Resolve sync conflicts with timestamps and visible status.
Run the experiment
Create three entries, reload, export them, remove only the disposable test copy and import into a fresh practice profile. Compare fields and identifiers.
A prompt to adapt
Replace the bracketed parts with your own practice details.
Work in a disposable practice project. Explain any setup requirements before changing files. Build one small step at a time and show how I can check it. Design an offline-first data contract for journal entries, workouts, and tasks. Include stable IDs, created and updated timestamps, deletion markers, sync status, and conflict rules. Show TypeScript types and IndexedDB indexes. Threat-model this browser app. Identify every place a secret could leak, every user-isolation failure that could expose another person’s records, and the server-side controls required before production. My first-version boundary: Start with one record type, stable identifiers and local storage. Implement export before adding cloud synchronization.
Run this experiment
Create three entries, reload, export them, remove only the disposable test copy and import into a fresh practice profile. Compare fields and identifiers.
Check your result
Use evidence from your output. A confident explanation from the AI is not enough.
- Reload preserves records.
- Export/import restores the same data.
- Network loss does not silently discard edits.
If it isn’t working
Do not add synchronization until conflict rules are explicit. Never embed production API secrets in client code.
Optional. Progress stays in this browser.
Where this came from
Public project repository ↗. The practice lesson is an adaptation, not a verbatim transcript. About the sources.
Prepared September 2026. Tools and interfaces change; use current official setup instructions. Session lengths are estimates.