爪痕 (Tsumeato)
大学体育館のバドミントンコート予約システム。海外大学の学生体育会向けに無償提供することを想定した、紙ベース予約(コピー配布)を置き換えるアプリです。
技術スタック
- Next.js (App Router) + TypeScript + Tailwind CSS
- Supabase (Auth + PostgreSQL + Row Level Security)
- Stripe (決済・返金 / 未実装、後日連携予定)
- PWA (manifest + Service Worker、QRコードからブラウザ直接アクセス)
- 日本語 / English / 中文 の3言語切り替え(カスタム軽量i18n、ヘッダー常時表示)
実装済み機能 (MVP)
- 予約カレンダー画面 (
/reserve): コート × 時間枠の空き状況をカレンダー表示。予約・キャンセル操作。
- アカウント登録・ログイン (
/signup, /login): 大学メールアドレスでのメール確認付きサインアップ、プロフィール入力(/profile)。
- 最小限のバックエンド: Supabase のテーブル設計・RLSポリシー・二重予約防止(ユニーク制約)。
決済(Stripe)連携、体育会スタッフ/管理者向け管理画面、CSV出力、レンタル機能(将来拡張)は未実装です。DB設計はレンタル機能を見据えた形(equipment / equipment_loans テーブル)にしてあります。
セットアップ
1. Supabase プロジェクトを作成
supabase.com で新規プロジェクトを作成し、Project Settings > API から URL と anon key を取得します。
2. スキーマを適用
Supabase ダッシュボードの SQL Editor で以下を順に実行してください。
supabase/migrations/0001_init.sql -- テーブル・RLS・関数
supabase/seed.sql -- (任意) サンプルコートの投入
もしくは Supabase CLI を使う場合:
supabase link --project-ref <project-ref>
supabase db push
3. 環境変数
.env.example を .env.local にコピーして値を設定します。
cp .env.example .env.local
NEXT_PUBLIC_SUPABASE_URL / NEXT_PUBLIC_SUPABASE_ANON_KEY: Supabase の Project Settings > APINEXT_PUBLIC_ALLOWED_EMAIL_DOMAINS: サインアップを許可する大学メールドメイン(カンマ区切り)。未設定なら制限なし- Stripe 関連は決済実装時まで空欄でOK
4. Supabase Auth の設定
- Authentication > URL Configuration の Redirect URLs に
http://localhost:3000/auth/callback(本番URLも追加)を登録してください。
- メール確認 (Confirm email) を有効にしてください(大学メールアドレスの本人確認に使用)。
5. インストール・起動
npm install
npm run dev
http://localhost:3000 にアクセスします。
ディレクトリ構成(抜粋)
app/
(auth)/login, signup # 認証画面
(main)/reserve, profile # 予約カレンダー / プロフィール
auth/callback # Supabase メール確認コールバック
api/reservations # 予約作成・キャンセル API
components/ # UI コンポーネント
lib/supabase/ # Supabase クライアント(browser/server/middleware)
lib/i18n/ # 多言語辞書・Context
lib/reservation/ # 時間枠生成・キャンセル期限などのルール
supabase/migrations/ # DBスキーマ (SQL)
types/database.ts # テーブル型定義
権限ロール
profiles.role に student / staff / admin を保持します(RLSで制御)。現時点では一般学生の予約フローのみ実装済みで、スタッフ/管理者向け画面は未実装です。
二重予約防止・タイムアウト設計
reservations テーブルに (court_id, reservation_date, start_time) の部分ユニークインデックス(status in ('pending_payment','confirmed'))を設定し、同時アクセスでも二重予約が発生しないようにしています。- Stripe 連携後は決済確定まで
status = 'pending_payment' とし、hold_expires_at を過ぎた仮予約は expire_stale_reservations() 関数(pg_cron 等での定期実行を想定)で自動失効させる設計です。MVPでは決済ステップがないため、予約は即座に confirmed になります。
