プライバシー重視の身体意識向上PWAを7日で構築
Google OAuth、AI駆動インサイト、オフラインサポート、多言語対応を備えた完全なウェルネスアプリを、ユーザーデータを100%ローカルに保持しながら提供した方法。
主な成果
課題
長年の友人が助けを求め、ユニークなウェルネスアプリのビジョンを持って来ました。偏頭痛や医療追跡に焦点を当てた典型的な頭痛トラッカーとは異なり、意識訓練アプリを望んでいました - 頭痛が発生する前に体のシグナルを認識するのに役立つものです。
具体的な要件：
- パターンとトリガーによる緊張性頭痛の追跡
- 身体意識と自己受容感覚シグナルに関する教育コンテンツ
- 段階的な機能解放（新しいユーザーを圧倒しない）
- シンプルな入力方法：ボタン、ドロップダウン、または自然言語
- 100%ローカルデータ保存 - サーバー側のデータなし、完全なプライバシー
課題：OAuth、AIインサイト、オフラインサポート、国際化を備えた本番対応PWAを、すべてのユーザーデータをデバイス上に保持しながら提供すること。
要件からの重要な引用：
「分析麻痺につながるほど圧倒的になりたくない。入力は固定リストやボタンやドロップダウン、あるいは不規則な間隔での自然言語テキストからでも良い。」
ソリューション
AI駆動開発プラットフォームを活用して、7日間で完全なソリューションを提供しました：
クリーンアーキテクチャ実装
- User、HeadacheEntry、CheckIn、Streakエンティティを含むドメイン層
- ログ記録、インサイト、ダッシュボードデータのユースケース
- 9つのZustandストアを含むインターフェースアダプター
- ローカルファースト永続化のためのIndexedDB
4フェーズのユーザージャーニー
アプリは段階的な機能解放を実装：
- LEARN（1週目）：教育コンテンツ + 基本的な強度ログ
- NOTICE（2-3週目）：頭痛の種類、場所、身体の緊張、気分
- UNDERSTAND（4週目以降）：BYOKモデルによるAI駆動インサイト
- PREVENT（継続）：ストリーク追跡、ゲーミフィケーション、アラート
Slack経由のリアルタイムコラボレーション
- 構造化されたアンケートを通じて要件を収集
- 各機能を専用スレッドで追跡
- 開発中の即座のフィードバックループ
- すべての決定を文書化し追跡可能
プライバシーファーストアーキテクチャ
すべてのデータはユーザーIDで名前空間化されたIndexedDBにローカル保存されます。各ユーザーは、ログ、チェックイン、設定用のストアを持つ独自の分離されたデータベースを取得します。データがデバイスを離れることはありません。
BYOK AI統合
ユーザーがAIインサイト用の独自のAPIキーを提供 - アプリにAPIコストなし、完全なデータプライバシー。アプリはOpenAIとAnthropicモデルの両方をサポートするVercel AI SDKを使用しています。
使用技術
成果
記録的な速さで納品
完全なPWAが、最初の要件から本番まで7日間で納品されました：
1日目：プロジェクトセットアップ、クリーンアーキテクチャ基盤、PWA設定
2日目：CI/CDパイプライン、オンボーディングウィザード、E2Eテスト
3日目：クイックログ、ダッシュボードホーム、状態管理
4-5日目：インサイトページ、i18n（英語 + 日本語）
6日目：Google OAuth、マルチユーザーデータ分離
7日目：UXポリッシュ、アナリティクス、本番デプロイ
ライブアプリケーション
- 本番URL：headache-awareness-trainer.vercel.app
- GitHubリポジトリ：kanaerulabs/headache-awareness-trainer
技術的成果物
| 指標 | 値 |
|---|---|
| 本番コード | 23,662行 |
| テストコード | 61,608行 |
| コード:テスト比率 | 1:2.6 |
| UIコンポーネント | 24+ Storybook付き |
| 言語 | 英語 + 日本語 |
| Lighthouse PWAスコア | 90+ |
提供された主要機能
- プログレッシブウェブアプリ：完全なオフラインサポート、ホーム画面に追加
- Google OAuth：セッション管理付きNextAuth.js v5
- AIインサイト：OpenAI/Anthropicサポート付きBYOKモデル
- i18n：完全な英語と日本語の翻訳
- プライバシーファースト：IndexedDBで100%ローカルデータ保存
- 段階的解放：エンゲージメントに基づいて機能が解放
これを可能にしたもの
- 異なる機能を並行して作業するAIエージェント
- 品質をスピードで保証する自動化TDDハーネス
- 遅延を排除するリアルタイムSlackコラボレーション
- 迅速で自信を持った開発を可能にするクリーンアーキテクチャ
- アーキテクチャを簡素化するプライバシーファースト設計（バックエンド不要）