サブスク登録とタグ管理
サービス名、料金、支払い周期、初回支払日、タグ、通知タイミングをまとめて登録できます。
Purpose
更新日を忘れない
Focus
月額・年額支出を見える化
Build
PWA・通知・課金まで実装
Core Features
支払い予定を、入力・確認・振り返りまでつなげる
単なるメモではなく、支払日・通知・集計を同じデータから扱えるようにしています。
支払日カレンダー
登録した支払い予定をカレンダー上に展開し、月ごとの更新タイミングを確認できます。
通知とPWA導線
通知方法を選び、スマートフォンからも繰り返し開きやすい導線を用意しています。
Product Details
日常利用で必要になる状態をひと通り持たせる
通知、オフライン、プラン差分、多言語化など、継続利用するWebアプリで後から効いてくる部分も含めて作っています。
支出分析
月間・年間の支出額と、サービスごとの割合を確認可能。
通知
プッシュ通知、メール通知、両方の受け取り方法を選択可能。
オフライン補助
表示済みデータのキャッシュと、通信復帰後の同期待ち状態を扱う設計。
料金プラン
無料枠、Premium、買い切り導線を分けて案内。
多言語UI
日本語と英語のメッセージを持つアプリ構成。
Implementation
個人開発でも、運用を見据えた構成にする
画面だけでなく、認証、通知、課金、データ保存、通信が不安定なときの扱いまで含めて設計したサービスです。
- SvelteKit と Cloudflare Workers を前提にしたフルスタック構成
- D1 / Drizzle を中心にしたサブスクデータ管理
- IndexedDB を使ったオフラインキャッシュと同期待ちキュー
- Better Auth、Stripe、Resend、Web Push を組み合わせたユーザー・課金・通知基盤
PWA
スマートフォンでも繰り返し開きやすい体験を意識。
Data
サーバーDBとローカルキャッシュの役割を分離。
Reminder
支払日前に気づける通知導線を実装。
Billing
継続課金と買い切りの導線を分けて扱う構成。
Try It
実際のサービスを開く
SubTrackは公開URLから確認できます。ログイン後、サブスク登録やカレンダー表示などの動きを試せます。