Web App

BadmintonManager

バドミントンサークルの練習をもっとスマートに。 コート振り分けと勝敗管理を、ひとつのアプリで完結させます。

BadmintonManager アプリのモックアップ
Role
UI Design / Full-stack
Type
Web アプリ
Stack
Next.js / Supabase / Hono
Demo Email
admin@badminton.com
Demo Password
admin1234

Overview

所属するバドミントンサークルで、出席確認・ペア決め・勝敗集計を毎回手作業していたことがきっかけです。 出席者を選ぶだけでコートとペアを自動振り分けし、試合結果からランキングまでを一気通貫で管理できるアプリを設計・実装しました。

Features

  • 参加者の追加・編集と、当日の出席者選択
  • 男女均等を意識したコート・ペアの自動振り分け
  • 勝敗・スコアの記録と、勝率ランキングの自動集計
  • マルチテナント(サークル単位のデータ分離)と RBAC
  • 管理者パネルでのメンバー招待・役割変更

Approach

更新が頻繁な画面には force-dynamic を限定適用し、常に最新データを表示。 API は Hono のキャッチオールに集約し、認証・サークルチェックをミドルウェアで共通化しています。 設計から実装・CI・Vercel デプロイまでを一貫して担当しました。

Tech Stack

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • shadcn/ui
  • Hono
  • Prisma
  • Supabase
  • Vercel

Screens

利用の流れ

ログイン画面
ログイン
参加者管理画面
参加者管理
コート振り分け画面
コート振り分け
試合結果入力画面
試合結果入力
ランキング画面
ランキング
サークル管理画面
サークル管理