ProjectsPOCKETNOTES
01 / Project Details
LiveOffline-first notes and journaling PWA
POCKETNOTES
PocketNotes is an offline-first notes and journaling PWA built to make capture, editing, and retrieval feel dependable in real-world conditions—not just in perfect network environments. The product is designed around a simple promise: your notes should remain available, editable, and safe whether the connection is stable, intermittent, or completely unavailable.
RoleFull-Stack Product Engineer
Duration2 Weeks
ClientPersonal Project
Year2026
Project Summary
A notes product that feels calm and immediate, while solving offline-first editing and reliable syncing without silent overwrites when connectivity returns.
02 / Snapshot
Local Availability
100% note CRUD works without network dependency
Sync Model
Outbox push + cursor-based incremental pull
Reliability Posture
Deterministic conflict preservation instead of silent overwrite
Release Readiness
Installable PWA, CI-validated, staged production deployment
03 / Overview
Building a notes experience that stays reliable when the network doesn’t.
PocketNotes was shaped as more than a simple CRUD app. The product needed to feel fast and minimal for everyday note-taking, but it also needed to behave like a dependable system when users went offline, reloaded the app, or reconnected after editing locally.
Challenge
Most note products look straightforward until reliability becomes the real requirement. The challenge here was building an interface that stays elegant while handling offline persistence, queued mutations, reconnect behavior, and version conflicts without making the product feel heavy or overly technical. A second challenge was rollout strategy. The production experience needed to be useful immediately, even before the sync backend was fully activated in live mode. That required a product architecture that could degrade gracefully to local-only note storage without breaking the user experience.
Solution
I designed PocketNotes as a local-first system from the start. Notes are created, edited, and deleted against IndexedDB through Dexie, while sync is treated as a background enhancement instead of a dependency. When a sync endpoint is configured, the app batches local outbox operations, pulls remote changes incrementally, and handles conflicts by preserving both versions rather than overwriting user work. On the frontend, the product uses a focused archive-and-editor layout with search, grid/list views, theme support, offline state messaging, installable PWA behavior, and clear sync feedback. On the backend, Firebase Auth, Firestore, and a dedicated HTTP sync function provide the infrastructure for authenticated multi-device sync when enabled.
04 / Stack & Scope
What shipped
Tech Stack
ReactTypeScriptViteTailwind CSSDexie / IndexedDBFirebase AuthCloud FirestoreCloud FunctionsWorkbox / vite-plugin-pwaZodVitestVercelGitHub Actions
Team Context
Solo Full-Stack Product Engineer
Deliverables
- Local-first notes repository backed by IndexedDB
- Resumable sync engine with batched push and incremental pull
- Deterministic conflict-copy workflow for version mismatches
- Auth-gated application flow with redirect-aware sign-in/sign-up
- Live production deployment with a graceful local-only fallback
- Validation pipeline for CRUD, offline persistence, sync recovery, delete sync, and conflict scenarios
Key Highlights
- Offline-first by design rather than offline as an afterthought
- Safe conflict handling that preserves user work instead of silently replacing it
- Shared data contracts across web and backend via `@pocket/shared`
- Staged deployment strategy that supports a live portfolio/demo rollout before full sync activation
- Real testing depth with both integration coverage and Playwright end-to-end scenarios
05 / Process
From product framing to final polish.
Step 01
Define the local-first product model
The first priority was deciding that note creation and editing should never depend on network availability. That decision shaped the entire architecture: local state became the source of immediate truth, while sync became a recovery and reconciliation layer.
Step 02
Build the archive and editor experience
The UI was structured around two core surfaces: a searchable archive for browsing notes and a focused editor for writing. Grid/list views, sync status, offline messaging, theme support, and clean state transitions were added to keep the product feeling polished despite the technical depth underneath.
Step 03
Design the sync contract and conflict behavior
The sync engine was built around an outbox-based push model and a cursor-based pull model. Local mutations enqueue operations in the same transaction that writes note changes, reducing drift between UI state and sync state. On version mismatch, the system creates a conflict copy and retains the server version, making the behavior explicit and deterministic.
Step 04
Harden the experience for production and review
The final layer focused on resilience and credibility: installable PWA behavior, service worker support, emulator-friendly development, shared schema validation, CI checks, unit tests, and end-to-end tests for offline persistence, reconnect recovery, deletion, and conflict handling.
06 / Gallery
Selected product views
07 / Closing Notes
PocketNotes focuses on trust as much as usability—making note-taking feel lightweight for users while applying serious engineering discipline behind the scenes.
Reliability First
Notes remain usable offline, survive reloads, and do not depend on constant connectivity.
Honest Sync Model
The system favors explicit conflict preservation over risky automatic overwrite behavior.
Scalable Foundation
The current live rollout already works as a portfolio-ready product while the full sync backend is structured for future activation.
08 / Next Project