Scroll
Index / Work / 05 · Habit Tracker
2025 HNG Internship 14 · Stage 3 Solo Next 16 · React 19PWA · Service WorkerOffline-first

An offline-capable PWA habit tracker styled as a hand-kept almanac. Built on Next 16 with the React Compiler, with a hand-written service worker (network-first for navigations, stale-while-revalidate for everything else) and a three-tier test suite that pins down auth, persistence, and offline rendering.

Client
HNG Internship 14 · Stage 3
Role
Solo
Duration
12 / 2025 — 01 / 2026
Stack
Next.js 16 · React 19 · React Compiler · Tailwind · Vitest · Playwright
Habit Tracker — cover
HABIT TRACKER · 2025 · COVER PLATE
05 / 11
3
test tiers · unit · integration · e2e
2
SW strategies · net-first + SWR
100%
offline after first load
Inscribe a habit
Inscribe a habit
§ 03 · Chapter

Service worker, hand-written

Three handlers and two strategies, all in one file. Install pre-caches the app shell. Activate purges the old cache version and claims clients. Fetch is the interesting part: navigations are network-first with a fall-back chain to the cached page, then the cached / shell, then a 503; everything else is stale-while-revalidate so the second visit is instant while the cache refreshes in the background.

Day 01 · the streak begins
Day 01 · the streak begins
§ 05 · Chapter

Streak walk

Habit completions are a sorted-on-read set of YYYY-MM-DD strings. The streak calculator walks backwards from today, counting consecutive days that appear in the set; duplicates are deduped via new Set before the walk. Vitest pins the edge cases — no completions, today missing, breaks on the first gap, duplicates ignored — and Playwright validates the full toggle-and-render loop in a real browser.

§99 · Continue

Have a brief?
Let's talk.

© 2026 · Moluno · Powered by sapa
v2.04.026 · 60Hz · 6.5244 N · 3.3792 E