🍖

牛・豚・鶏の部位制覇を支援するWebアプリ「たべぶい」- AI食べ歩きコンシェルジュ機能付き

に公開
AI
React
FastAPI
webapp
Gemini
idea

はじめに

「たべぶい」は、牛・豚・鶏の各部位を食べた記録を管理し、制覇状況を可視化するWebアプリケーションです。特に、AI食べ歩きコンシェルジュ機能により、ユーザーの進捗に基づいて未制覇の部位が食べられるお店を推薦する点が特徴的です。

対象ユーザーと課題

ターゲットユーザー像

  • 焼肉・ホルモン愛好家: 部位ごとの違いを楽しみたい方
  • グルメ探求者: 新しい食体験を求める方
  • コレクター気質のある方: 制覇系のコンテンツに興味がある方
  • SNS投稿を楽しむ方: 食べ歩きの記録を残したい方

解決したい課題

  1. 記録の散逸: 食べた部位の記録が曖昧で、何を制覇したか分からない
  2. 目標設定の困難: 何を次に食べればよいかわからない
  3. 店舗選びの迷い: 未制覇部位が食べられる店が見つからない
  4. 達成感の不足: 制覇状況が可視化されず、モチベーションが維持できない

ソリューションと特徴

🎯 主要機能

  1. 部位記録システム: 牛・豚・鶏の各部位を写真付きで記録
  2. 制覇率可視化: 動物別・カテゴリ別の制覇状況をパーセンテージで表示
  3. AI食べ歩きコンシェルジュ:
    • 未制覇部位に基づく店舗推薦
    • ユーザーの進捗を考慮したパーソナライズされた提案
    • Google Gemini APIを活用した自然な会話
  4. 統計ダッシュボード: 週間記録数、連続記録日数などの活動統計

🚀 技術的特徴

  • マイクロサービス風アーキテクチャ: フロントエンド・バックエンド・データベースが分離
  • リアルタイム制覇率計算: データベースレベルでの高速集計
  • AI統合: ユーザーコンテキストを理解したインテリジェントな推薦
  • Docker完全対応: ワンコマンドでの環境構築

システムアーキテクチャ

「たべぶい」は3層構造のWebアプリケーションとして設計されています。

技術スタック詳細

フロントエンド

  • React 18 + Vite: モダンなSPA開発環境
  • React Router: ページルーティング
  • CSS Modules: スタイル管理

バックエンド

  • FastAPI: 高性能な非同期API フレームワーク
  • PyMySQL: MySQL データベースドライバー
  • Google Generative AI: AI コンシェルジュ機能
  • Pydantic: データバリデーション

データベース

  • MySQL 8.0: リレーショナルデータベース
  • 4つの主要テーブル:
    • animal_parts: 部位マスターデータ（牛・豚・鶏）
    • eating_records: 部位ごとの食事記録
    • eating_sessions: 食事セッション（レストラン・日時）
    • users: ユーザー情報

インフラ

  • Docker Compose: マルチコンテナ環境管理
  • 開発環境でのホットリロード対応

プロジェクトデモ動画

以下のデモ動画では、「たべぶい」の主要機能を実際の操作を通してご紹介します：

開発・技術的な特徴

パフォーマンス最適化

  • データベース設計: 制覇率計算の高速化を考慮した正規化
  • API設計: RESTfulな設計による予測可能なエンドポイント
  • フロントエンド: Viteによる高速な開発サーバーとHMR

AI統合のポイント

  • コンテキスト自動生成: ユーザーの制覇状況を動的に分析
  • プロンプト設計: 食べ歩きに特化したパーソナライズされた応答
  • エラーハンドリング: API障害時の適切な代替処理

まとめ

「たべぶい」は、単なる記録アプリを超えて、AI技術を活用したパーソナライズされた食体験の提案プラットフォームです。制覇系コンテンツとしての楽しさと、実用的な記録管理機能を両立し、食べ歩き愛好家の新たな発見をサポートします。

特にAI食べ歩きコンシェルジュ機能により、ユーザーの進捗状況に応じた的確な提案を行うことで、食べ歩きの楽しみを更に深めることができます。技術面でも、モダンなWeb技術スタックを活用した拡張性の高いアーキテクチャを採用しており、今後の機能追加にも柔軟に対応可能です。

Discussion