Next.js（App Router）を基盤に、スペシャルティコーヒーのECサイト「MyHobbyCoffee」を個人開発。フロントエンド実装だけでなく、Stripe決済、Supabase在庫/注文管理、microCMS連携、管理画面、レコメンドAPIまでを一気通貫で構築しました。UI/UX設計と業務要件（在庫連動・注文通知・運用管理）の両立を意識し、MVPから拡張可能な構成にしています。
【プロジェクト概要】
- プロダクト: コーヒー豆販売EC + レコメンド機能
- 開発形態: 個人開発（要件整理〜実装〜運用想定まで担当）
- 主要技術: TypeScript / Next.js 16 / React 19 / Tailwind CSS 4 / Zustand
【実装した主な機能】
1) ECの購入体験
- 商品一覧/詳細、カート、数量選択、重量（g）選択
- 注文確定までの導線をApp Router上で実装
- 決済完了後のサンクスページ遷移まで設計
2) 決済・注文処理（Stripe連携）
- Checkout Session生成APIを実装
- 商品価格とグラム数から単価を計算し、line_itemsへ反映
- キャンセル/成功URLを環境変数ベースで切り替え
3) 在庫連動（Supabase連携）
- 注文作成時にbean_stocksを参照し、在庫不足を事前判定
- Stripe Webhook（checkout.session.completed）で注文データ反映
- 管理画面から注文ステータス更新（paid/delivered）を可能化
4) CMS連携（microCMS）
- メニュー/ブログ情報をヘッドレスCMSから取得
- フォールバックを実装し、CMS未設定時でも開発継続できる構成
- 既存スキーマを保ったままUI側で表示制御
5) レコメンド機能
- 回答フォーム（複数設問）から嗜好プロファイルを生成
- 酸味/苦味/焙煎度をスコアリングして最適候補を返却
- 在庫情報を加味した候補提示（在庫0を除外）にも対応
6) 管理機能・運用機能
- Supabase Authログイン + 管理者ガード
- 注文一覧の定期自動更新（15秒ポーリング）
- Gmail APIを用いた通知メール送信処理を実装
【連携先・外部サービス】
- microCMS: 商品/ブログのコンテンツ管理
- Stripe: 決済（Checkout / Webhook）
- Supabase: 認証、在庫、注文データ管理
- Gmail API: 注文通知メール
【設計/実装で工夫した点】
- 価格整合性: フロント依存ではなく、API側で商品情報を再取得して金額計算
- 在庫整合性: 購入前チェック + 決済完了イベントでの永続化を分離
- 失敗耐性: 環境変数不足時のwarning/fallbackを用意し、段階的に機能有効化
- 拡張性: UI層（購入体験）と外部連携層（決済/在庫/CMS）を分割
【開発プロセス（PR運用を意識した進め方）】
- 仕様整理: Plan/Specを先に文章化し、作業スコープをMVP単位で固定
- 実装: 「UI → 状態管理 → API → 管理画面」の順で段階開発
- レビュー観点: Reviewチェックリスト（セキュリティ/レイアウト/仕様準拠）で自己点検
- Git運用: 小さなコミットで履歴を分け、後からPRで差分意図を説明しやすい形に管理
【担当範囲】
- 要件定義、画面設計、フロント実装
- API実装（在庫判定/決済連携/Webhook処理）
- 認証・管理画面・通知連携
- 開発環境整備（Docker/Dev Container）
【まとめ】
Next.js × TypeScriptで、ECのUI実装だけでなく、Stripe決済、Supabase在庫管理、microCMS連携、Webhookによる注文反映までを一貫して開発。要件整理から運用設計まで実施し、MVPを素早く成立させつつ拡張可能な構成で実装しました。
