Group Matching App

参加者の回答をもとに、AIを利用してグループ分けや会話スターターの生成を行うWebアプリケーションです。

技術スタック

フロントエンド

• React
• TypeScript
• Vite
• React Router
• Chakra UI
• Firebase Authentication

バックエンド

• Node.js
• Express
• TypeScript
• Firebase Admin SDK

Google Cloud / Firebase

• Firebase Authentication
• Cloud Firestore
• Cloud Run
• Gemini API
• Secret Manager
• Artifact Registry
• Cloud Logging

ディレクトリ構成

group-matching-app/
├── frontend/     # Reactフロントエンド
├── backend/      # Express API
├── .gitignore
├── package.json
└── README.md

必要な環境

• Node.js 24
• npm
• Google Cloud CLI
• Firebaseプロジェクト

セットアップ

リポジトリをクローンします。

git clone <リポジトリのURL>
cd group-matching-app

ルート、フロントエンド、バックエンドの依存関係をインストールします。

npm install
npm install --prefix frontend
npm install --prefix backend

環境変数

フロントエンド用の環境変数を作成します。

cp frontend/.env.example frontend/.env

frontend/.env にFirebase Webアプリの設定値を入力します。

VITE_FIREBASE_API_KEY=
VITE_FIREBASE_AUTH_DOMAIN=
VITE_FIREBASE_PROJECT_ID=
VITE_FIREBASE_STORAGE_BUCKET=
VITE_FIREBASE_MESSAGING_SENDER_ID=
VITE_FIREBASE_APP_ID=

バックエンド用の環境変数を作成します。

cp backend/.env.example backend/.env

backend/.env にGoogle Cloudプロジェクト情報を入力します。

PORT=8080
GOOGLE_CLOUD_PROJECT=

Google Cloud認証

ローカル環境でFirebase Admin SDKを使用するため、Application Default Credentialsを設定します。

gcloud auth login
gcloud auth application-default login
gcloud config set project <Google CloudプロジェクトID>

同じFirebaseプロジェクトを利用する場合は、Google Cloud側で適切なIAM権限が必要です。

開発サーバーの起動

フロントエンドとバックエンドを同時に起動します。

npm run dev

起動先は次のとおりです。

フロントエンド: http://localhost:5173
バックエンド:   http://localhost:8080

APIの動作確認：

http://localhost:8080/api/health

主な確認済み機能

• ReactとExpressの同時起動
• React Routerによる画面遷移
• Chakra UIの表示
• Firebase AuthenticationによるGoogleログイン
• Firebase IDトークンのExpress側での検証
• Firestoreプロジェクトの準備

注意事項

以下のファイルや情報はGitHubへコミットしないでください。

• .env
• Gemini APIキー
• Firebase Admin SDKの秘密鍵
• サービスアカウントJSON
• Application Default Credentials

実際の環境変数は各自で設定し、共有用には .env.example を使用してください。