パーソナル・フィットネス・ウェブサイト

Next.js 15、Tailwind CSS、Framer Motion、Rechartsを使用して構築された、アカウント不要の完全無料パーソナルフィットネストラッカー。

DEMO LINK

Overview

• Role: フルスタック開発者 & UI/UXデザイナー
• Stack: Next.js 15, TypeScript, Tailwind CSS v4, shadcn/ui, Framer Motion, Recharts, Vitest, Playwright
• Key Result: データベース構築コストゼロの、100%サーバーレスでプライベートなクライアントサイドデータアーキテクチャ
• Summary: パーソナライズされたワークアウトプラン、カロリー目標、進捗トラッキング、栄養記録機能を備えた、完全無料でアカウント不要のパーソナルフィットネスプラットフォーム。肥大化した商用ツールを避けるために個人用として作成され、すべてのデータはアカウント作成を必要とせず、クライアントのブラウザのローカルストレージに厳密に保存されます。

The Problem

• Challenge: 商用のフィットネスプラットフォームは、必須のトラッキング機能（カスタムの毎日の目標、マクロ栄養素の内訳、ワークアウトの記録など）を、高額なサブスクリプションによるペイウォールの背後に隠しています。
• Audience: 主に個人の日常的な使用のために構築され、クリーンでプライバシーを尊重し、商用トラッカーに代わる完全無料の代替手段を提供します。
• Constraints: バックエンドのデータベースがない状態で、ワークアウトプラン、アクティブなログ、カスタム食品などのリレーショナル構造を保存するには、信頼性の高いクライアントサイドのシリアライゼーション手法が必要でした。

Approach & Decisions

• Architecture: 初期レイアウトのサーバーサイド生成と動的なクライアントサイドの状態フックにNext.jsのApp Routerを活用する、ローカルファーストのReact SPAパターン。
• Key Decisions: 外部データベースを統合する代わりに、8つの独立したブラウザのローカルストレージキーを個別のリレーショナルスキーマテーブルとして使用しました。
• Trade-offs: 完全で即座に利用可能なプライバシーと、ホスティングの維持コストゼロ（フォールバックとして手動のJSONエクスポート/インポートを構築）を優先し、ネイティブのクロスデバイス同期を犠牲にしました。
• Data Flow: ユーザーのインタラクション -> Reactのフック状態 -> localStorageの同期 -> 動的なUIレイアウトの更新とRechartsによる視覚化。

Key Results & Impact

• Outcome: 私自身のワークアウトと栄養のワークフローに合わせて正確に調整された、完全にカスタマイズされた日常的なユーティリティ。
• Comparison: 主流の商用トラッカーのペイウォール、サインアップの障壁、高額なサブスクリプションコストを回避します。
• Impact: 日常的な個人的な使用において、商用のカロリーやワークアウトのトラッカーを完全に置き換え、すべての健康指標を完全にローカルに保持します。

Technical Deep Dive

• Notable Details: Next.jsでのSSRの不一致/ハイドレーションエラーを避けるために、localStorageのシリアライズされたデータを安全にパースするカスタムReactフック。
• Verification: PlaywrightによるE2Eテストを使用し、さまざまなビューポートサイズでUIフローとレスポンシブレイアウトを検証しました。
• Optimizations: 重いRechartsのチャート作成モジュールを遅延読み込み（Lazy loading）し、初期ページのバンドルを軽量に保ち、高いGoogle PageSpeedスコアを確保しました。
• Code Quality: ストリクトモードのTypeScriptコンパイル、パスベースのモジュールエイリアス、およびモジュール式のレイアウトアーキテクチャ。

Reflections

• Differently: 次のイテレーションでは、サードパーティのサーバーに個人の指標を保存せずにクロスデバイス同期を可能にするために、WebRTCピアツーピアのデータ同期を実装したいと思います。
• Successes: ネイティブアプリのように感じられる、Tailwind v4とshadcn/uiを使用した、美しくレスポンシブなダークテーマのダッシュボードを提供しました。
• Lessons: 永続的なブラウザ状態のパターンを処理する方法と、レイアウトスキーマが変更された場合のクライアントサイドでのデータ移行戦略についての理解が深まりました。

My Contributions

• Full-Stack Development: Next.js 15を使用して、オンボーディングのアンケート、パーソナライズされたプランの計算、カロリーログのトラッキング、カスタムの栄養入力フォームを構築しました。
• UI/UX Design: ダークテーマのユーザーインターフェース、レスポンシブなグリッド、インタラクティブなダッシュボードカード、そして滑らかなFramer Motionのアニメーションを作成しました。
• Architecture & Performance: localStorageのキー戦略、データ検証のラッパーを設計し、チャートのレンダリングパイプラインを最適化しました。

Project Architecture

このアプリケーションは、Next.js 15上に構築された、最新のクライアント中心のモジュール式アーキテクチャに従っています。

• Layered Structure: 生のトラッキングロジック（カスタムフック）と視覚的なプレゼンテーションコンポーネントの分離。
• Feature Modules: オンボーディング、ワークアウト、栄養トラッキング、進捗チャートなどの機能ごとに論理的に構成されています。
• State Management: カスタムラッパーを使用して、Reactの状態フックをブラウザのストレージ層とリアクティブに同期させます。
• Refactoring & Improvements: パフォーマンスとコアウェブバイタルを最適化するために、重いチャート作成ライブラリに動的インポートを実装しました。

Demo Preview

• Dashboard View: 毎日のカロリー摂取量、アクティブなワークアウトプランのチェックリスト、および視覚的な毎週の進捗チャートの概要。
• Workout Planner: カスタムルーチンの作成機能とプログラムセレクター。
• Calorie Tracker: カスタム追加の食品リストを備えたマクロ栄養素トラッカー。

Hosting Note:
ライブアプリケーションはVercelにデプロイされており、pfwfm.vercel.app でサインアップなしにすぐにアクセスして利用できます。