Кейс · Веб-приложение · TypeScript

habit-tracker: «Привычка», офлайн-трекер привычек (демо)

Демо-приложение: трекер привычек на Svelte 5, работает офлайн (PWA), без аккаунта и сервера, данные остаются в браузере. Серии с льготным днём, частота «каждый день», по дням недели или N раз в неделю, тепловая карта года на SVG, напоминания через Notification API, экспорт и импорт JSON со строгой проверкой схемы. День хранится строкой в поясе пользователя, поэтому перелёты и летнее время историю не меняют.

  • Svelte 5
  • TypeScript
  • Vite
  • PWA
  • Service Worker
  • fast-check
  • vitest
  • axe
  • Cloudflare Pages
  • GitHub Actions
Открыть живой сайт ewsirdev-habit.pages.devКод по запросу в Telegram

01 · Как выглядит

Скриншоты

Скриншот проекта «habit-tracker: «Привычка», офлайн-трекер привычек (демо)» на экране 1280 пикселей
Десктоп, 1280 px
Скриншот проекта «habit-tracker: «Привычка», офлайн-трекер привычек (демо)» на экране телефона, 390 пикселей
Телефон, 390 px

02 · О проекте

Что это и зачем

Демо-приложение: трекер привычек на Svelte 5, работает офлайн (PWA), без аккаунта и сервера, данные остаются в браузере. Серии с льготным днём, частота «каждый день», по дням недели или N раз в неделю, тепловая карта года на SVG, напоминания через Notification API, экспорт и импорт JSON со строгой проверкой схемы. День хранится строкой в поясе пользователя, поэтому перелёты и летнее время историю не меняют.

Ограничения

Напоминания работают только при открытой вкладке: серверного push нет.

Синхронизации между устройствами нет, используйте экспорт.

Данные хранятся в браузере: очистка данных сайта их удалит.

Что внутри

  • Серии с льготным днём: один изолированный пропуск не рвёт серию, не чаще раза в 7 дней
  • Дни как строки ГГГГ-ММ-ДД в поясе пользователя; арифметика через UTC-полночь; границу суток можно сдвинуть
  • Офлайн: service worker с версионированным кэшем; CSP connect-src 'self', внешних запросов нет
  • 29 тестов vitest, в том числе fast-check; кнопки не меньше 44 px, axe 0

03 · Как запустить

Запуск одной командой

git clone <репозиторий по запросу> habit-tracker
cd habit-tracker
npm ci
npm run dev

04 · Код

Репозиторий приватный

Исходники лежат в приватном репозитории. Напишите в Telegram, открою доступ.

Запросить код