App Showcase

モダンなポートフォリオ・ショーケースサイト。Supabase、Stripe、Gorse 推薦システム、AI チャットボットを統合したフルスタックアプリケーションです。

▲ 画像をクリックするとポートフォリオページへ移動します

📱 プロジェクト概要

「App Showcase」は、架空のアプリストアを通じてポートフォリオを紹介するフルスタックWebアプリケーションです。ECサイトのようなUI/UXを持ちながら、ユーザー管理、レビューシステム、AIチャットボット、マーケティング分析ダッシュボードなど、多彩な機能を実装しています。

🛒 フロントエンド 検索・フィルタ・レビュー・チャットボット統合	⚙️ 管理画面 商品・ブログ・お問い合わせ・マーケティング管理
👤 マイページ 購入履歴・お気に入り・プロフィール管理	🤖 AI機能 チャットボットによる商品推薦・FAQ対応

✨ 主な機能

• 🛍️ 製品カタログ: 製品の閲覧、検索、フィルタリング
• 💳 Stripe 決済: セキュアな決済処理
• 🤖 AI チャットボット: OpenAI GPT-4o-mini を使用したインテリジェントなカスタマーサポート
• 🎯 推薦システム: Gorse を使用したパーソナライズされた製品推薦
• 👤 ユーザー認証: Supabase Auth による安全な認証
• 📝 レビューシステム: 製品レビューと評価
• 📞 お問い合わせ: 管理者への直接メッセージ機能

🛠️ 技術スタック

総合構成: Cursor × TaskMaster × Playwright × React × Vite × TypeScript × Stripe × Supabase × Vercel × GitHub Actions × Python × FastAPI × LangChain × OpenAI API × RAG × Gorse API × AWS（EC2, Lambda）

フロントエンド

• React 19 + TypeScript
• Vite
• Styled Components
• Framer Motion
• Mantine UI

バックエンド

• Supabase (PostgreSQL + Auth + Storage)
• FastAPI (Python) - AI チャットボット API
• Vercel - ホスティング

外部サービス

• OpenAI GPT-4o-mini - AI チャット
• Stripe - 決済処理
• Gorse - 推薦エンジン

📚 ドキュメント

詳細なドキュメントは docs/ ディレクトリにあります：

• セキュリティスキャンガイド
• 環境変数設定
• チャットボットセットアップ
• Gorse セットアップガイド
• FAQ
• 利用規約
• プライバシーポリシー

🚀 クイックスタート

前提条件

• Node.js 18+
• Docker & Docker Compose
• Python 3.9+ (チャットボット用)
• Supabase アカウント
• OpenAI API キー
• Stripe アカウント

インストール

# リポジトリをクローン
git clone https://github.com/Yucco-K/showcase.git
cd showcase

# 依存関係をインストール
npm install

# Python 依存関係をインストール（チャットボット用）
cd api/chat
pip install -r requirements.txt
cd ../..

# 環境変数を設定
cp .env.example .env
# .env ファイルを編集して必要な環境変数を設定

開発環境の起動

# フロントエンドの起動
npm run dev

# Python API の起動（別ターミナル）
cd api/chat
python -m uvicorn index:app --reload --port 8001

# Gorse の起動（別ターミナル）
docker-compose -f docker-compose.gorse.yml up -d

ビルド

# 本番用ビルド
npm run build

# プレビュー
npm run preview