◼ PORTFOLIO PROJECT ◼

PulseHabit

Neo-Brutalistデザインの習慣トラッカー。
オフラインファースト × クラウド同期 × ダークモード。
React Native + Supabase でフルスタック実装。

React Native Expo SDK 54 Supabase TypeScript Zustand SQLite Offline-First
SCREENSHOTS

アプリの全画面

Today
2026年2月23日 日曜日
✓ 🏃 ランニング
毎日 • 06:00
12
✓ 📖 読書 30分
毎日 • 21:00
8
💧 水を2L飲む
毎日 • 終日
5
2/3 COMPLETE
+
TODAY HABITS STATS PROFILE
TODAY — LIGHT
Today
2026年2月23日 日曜日
✓ 🏃 ランニング
毎日 • 06:00
12
✓ 📖 読書 30分
毎日 • 21:00
8
💧 水を2L飲む
毎日 • 終日
5
2/3 COMPLETE
+
TODAY HABITS STATS PROFILE
TODAY — DARK
Stats
FEBRUARY 2026
12
CURRENT
28
LONGEST
87%
RATE
COMPLETION CALENDAR
M
T
W
T
F
S
S
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
TODAY HABITS STATS PROFILE
STATS
Profile
user@example.com
3
HABITS
87%
OVERALL
THEME
☀ LIGHT
☽ DARK
⚙ SYS
🔔 Notifications
Daily reminders enabled
☁️ Sync Status
✓ SYNCED
📤 Export Data
CSV / JSON
TODAY HABITS STATS PROFILE
PROFILE
FEATURES

主な機能

⚡
オフラインファースト
SQLiteにローカル保存 → キュー経由でSupabaseに同期。ネット不要で完全動作。
☁️
クラウド同期
Supabase + Row Level Securityでユーザーごとにデータ分離。リトライロジック付き。
🌗
ダークモード
Light / Dark / System。Zustand + useColorSchemeでシームレス切り替え。
🔥
ストリーク追跡
現在のストリーク、最長記録、達成率をリアルタイム計算。SVGリング表示。
🎨
Neo-Brutalist UI
10個のカスタムコンポーネント。太ボーダー、オフセットシャドウ、モノスペースフォント。
🔒
Supabase Auth
メール認証。セッション管理、自動リフレッシュ、RLSによるデータ保護。
ARCHITECTURE

システム構成

🖥 UI Layer
React Native Expo Router Brutal Components
▼ useTheme() · useHabits() ▼
📦 State
Zustand authStore habitStore settingsStore
▼ mutations ▼
💾 Local DB
expo-sqlite
🔄 Sync Queue
retry + purge
▼ RLS-protected ▼
☁️ Supabase
Auth PostgreSQL RLS
SYNC PIPELINE

オフライン同期の仕組み

01
ローカル書き込み
全ての変更はまずSQLiteに書き込み。UIは即座にレスポンス。
02
キューイング
変更をsync_queueテーブルにエンキュー。テーブル名・操作・データを記録。
03
セッション検証
Supabaseセッションの有効性を確認。user_idの不一致を自動修正（ローカルID → auth UID）。
04
RLS通過
Row Level Securityが各行のuser_idとauth.uid()を照合。一致しないデータは拒否。
05
リトライ & パージ
失敗したアイテムはリトライカウンタで再試行。一定回数超過で自動パージ。
TECH STACK

技術スタック

Framework
React Native
Platform
Expo SDK 54
Navigation
Expo Router v6
Language
TypeScript
State
Zustand
Local DB
expo-sqlite
Backend
Supabase
Design
Neo-Brutalist
STORE LISTING (MOCK)

擬似ストアページ

P
PulseHabit — 習慣トラッカー
mer-prog
★★★★★ 4.8 (mock)
インストール
毎日の習慣を、一つずつ積み上げよう。

PulseHabitは、Neo-Brutalistデザインの習慣トラッカー。オフラインファーストで動作し、Supabaseでクラウド同期。
VERSION
1.0.0
SIZE
~25 MB
CATEGORY
Health & Fitness
PLATFORM
iOS / Android
※ ポートフォリオ用モックアップ — 実際のストアには未公開

PulseHabit

Built by mer-prog — 2026

GitHub →