2025

My Journal App

let your thoughts get a companion .

Live Demo / App Project Notes Roadmap & Plan View Source Code

Queue CompactionSync Engine

IndexedDBOffline Storage

Offline-First PWAArchitecture

Web Push & CronReminders

Offline-First Architecture•PWA & Sync Engine

📓 My Journal App — Offline-First PWA

A premium, production-ready, offline-first personal journaling web application. This application features a custom offline synchronization engine, a dynamic Service Worker caching system, robust background push notifications, and a responsive custom-tailored layout matching modern design aesthetics.

React 19 (Vite)Node.js 20Tailwind CSS v4PWA Ready + Service WorkerMongoDB + MongooseBetter AuthIndexedDB Action QueueWeb Push & VAPID

🚀 Architecture Highlights & Sync Pipeline

Network-Resilient Native Feel

[ User Action ] ──► [ Online? ] ──► Yes ──► [ Express API Server ]
                          │
                          └──► No ──► [ IndexedDB Queue ] ──► [ Queue Compacter ] ──► [ Show Pending Sync Badge ]

[ Network Restored ] ──► [ Service Worker Sync ] ──► [ Replay Queue ]
                                                              │
                                                              ├──► [ Sync CREATE ] ──► [ Server Generates ObjectID ]
                                                              │                              │
                                                              │                              ▼
                                                              └──► [ Sync Remaining Updates/Deletes ] ◄── [ Resolve Temp ID -> Real ID ]
                                                                            │
                                                                            ▼
                                                              [ Update Local UI State ] ──► [ Sync Finished ✅ ]

← Swipe horizontally to explore architecture pipeline →

* Custom two-tier persistence layer: client writes to IndexedDB instantly, while background Service Workers orchestrate idempotent compaction and replay upon network reconnect.

📦 Core Technical Implementations

1. Offline-First Sync & Queue Compaction

When offline, user edits are intercepted into a local IndexedDB action queue. To prevent redundant API calls, a custom Queue Compaction Algorithm executes before replay:

CREATE ➔ DELETE: Discard both actions (nothing to sync).
CREATE ➔ UPDATE: Merge payload directly into CREATE action.
UPDATE ➔ UPDATE: Preserve only final UPDATE payload.
UPDATE ➔ DELETE: Discard UPDATE, dispatch only DELETE.

2. Temporary-to-Permanent ID Resolution

New offline entries generate client-side temporary IDs (temp-17825807).

• Worker replays the CREATE action upon reconnection; backend returns permanent BSON ObjectID.
• Sync engine intercepts the response and recursively updates all remaining queued downstream actions (subsequent updates/deletions) to replace the temporary ID with permanent ID before dispatch.
• Emits a sync-completed event to React to smoothly transition local state keys with zero UI flicker.

3. Stale App Shell Cache Lockout Prevention

Standard PWA caches can cause blank-screen app lockouts when a new build is deployed with new bundle hashes while the browser still serves a cached stale index.html.

• Implemented a custom Network-First with SWR (Stale-While-Revalidate) fallback handler specifically for document navigation requests.
• Static assets (fonts, icons, styles) check cache-first, but the document shell inspects the network for new layouts first before falling back to local offline caches.
• Service Worker lifecycle triggers (skipWaiting and clients.claim) activate updates immediately.

4. Dynamic Import Chunk Failure Recovery

In bundle-split React applications, navigating to lazy-loaded routes while offline throws an uncaught ChunkLoadError.

• Wrapped React Router routing nodes in a specialized ErrorBoundary that captures chunk load failures gracefully.
• Instead of white-screen crashing, renders a custom offline state screen with dynamic status indicators and an interactive "Retry Connection" handler.

5. Web Push Notification Stack & Automated Cron Reminders

VAPID Protocol + Collision Resolution + Scheduled Worker

VAPID Key Protocol:Backend signs push payloads using custom VAPID keys, communicating securely with browser push services (FCM/Mozilla) for native OS alerts.

Endpoint Collision Resolution:Resolves multi-user subscription collisions on shared browsers (e.g., logging out user A and logging in user B) by mapping subscriptions uniquely to the endpoint.

Cron Reminder Checks:A server-side Node Cron job executes at scheduled intervals to prompt registered users who haven't logged entries today.

🎨 Design, Typography & Mobile-First Controls

Plus Jakarta Sans Typography:Configured clean, modern geometric typography matching contemporary Apple and Linear design systems.

Segmented Settings Grid:Mobilized the settings dashboard with a segmented navigation grid (General, Notifications, Reminders, Account) resembling native iOS/Android control panels.

⚙️ Complete Tech Stack Specification

Layer	Technology	Purpose & Implementation Role
Frontend Engine	React 19 (Vite)	Declarative UI components & sub-millisecond compilation
Authentication	Better Auth SDK	Session validation, secure cookies & Google OAuth
Styling System	Tailwind CSS v4	Next-gen utility variables & responsive design tokens
Primary Database	MongoDB & Mongoose	Document store with object modeling and BSON ObjectId resolution
Offline Storage	IndexedDB	Local action queue persistence for offline edits
Push Notifications	Web Push & VAPID	Browser system push alerts with payload cryptographic signing
Task Scheduling	Node Cron	Automated daily reminder verification runs
API Documentation	Swagger / OpenAPI	Interactive API route specifications and testing sandbox