Case · Web app · TypeScript
habit-tracker: "Habit", an offline habit tracker (demo)
A demo app: a habit tracker on Svelte 5 that works offline (PWA) with no account and no server; data stays in the browser. Streaks with a grace day, daily, weekday or N-times-a-week frequency, a year heatmap in SVG, reminders through the Notification API, JSON export and import with strict schema checks. A day is stored as a string in the user's time zone, so travel and daylight saving do not change history.
- Svelte 5
- TypeScript
- Vite
- PWA
- Service Worker
- fast-check
- vitest
- axe
- Cloudflare Pages
- GitHub Actions
01 · How it looks
Screenshots
02 · About
What it is and why
A demo app: a habit tracker on Svelte 5 that works offline (PWA) with no account and no server; data stays in the browser. Streaks with a grace day, daily, weekday or N-times-a-week frequency, a year heatmap in SVG, reminders through the Notification API, JSON export and import with strict schema checks. A day is stored as a string in the user's time zone, so travel and daylight saving do not change history.
Limitations
Reminders work only while the tab is open: there is no server push.
There is no sync between devices, use export.
Data is stored in the browser: clearing site data deletes it.
What is inside
- Streaks with a grace day: one isolated miss does not break a streak, at most once in 7 days
- Days as YYYY-MM-DD strings in the user's zone; arithmetic through UTC midnight; the day boundary can be shifted
- Offline: a service worker with a versioned cache; CSP connect-src 'self', no external requests
- 29 vitest tests, including fast-check; targets of at least 44 px, axe 0
03 · How to run
Run it locally
git clone <repository on request> habit-tracker
cd habit-tracker
npm ci
npm run dev04 · Code
The repository is private
The source is in a private repository. Message me on Telegram and I will open access.
Request the code