專案亮點
- 極簡手機版介面設計 (Mobile-first)
- Firebase 即時資料同步與權限管控
- 智慧人均費用自動計算邏輯
- Next Event 核心儀表板
- Google 生態系零成本部署方案
專案背景
在羽球球團的日常運作中，每週都需要經歷「調查出席時間」、「確認搶場結果」、「公告當週場次」以及「計算並收費」的循環。傳統使用 LINE 記事本或 Notion 表格，對於手機用戶來說操作層級太深且介面不友善。本專案旨在將此流程重新定義，打造一個專為球員現場使用的智慧管理系統。
核心特色
1. 智慧化週流程管理
將「預約 -> 投票 -> 確定 -> 收費」的繁瑣邏輯整合為一個自動化的儀表板。首頁的 Next Event 區塊會自動抓取最近一筆已確認的活動，讓成員一進站就能掌握時間、地點與費用。
2. 即時出席統計與自動拆帳
- 出席調查：採用「有空/不確定/沒空」三態切換，資料透過 Firebase Firestore 即時更新，不需要手動重新整理網頁。
- 自動拆帳：系統根據該時段的預設場費（例如每小時 500 元）與目前「有空」的人數，自動計算出建議的人均費用，大幅減少主揪的人力負擔。
3. 手機優先的極簡 UI
徹底捨棄傳統的橫向大表，改用卡片式設計。重點資訊如場地編號、場數與付款人等，皆以高對比度的視覺風格呈現，確保球友在劇烈運動間隙也能輕鬆閱讀與操作。
4. 高效能且安全的架構
整合 Google Auth 驗證系統，確保每筆投票與場地登記皆能追蹤到實際使用者，並透過 Firestore Security Rules 確保資料安全性。專案結構輕量化，支援 PWA 技術可直接安裝至手機桌面，秒開即用。
技術實作
- Frontend: React 19 + TypeScript 構建，利用 CSS Variables 定義具現代感的高對比度「球場綠」主題色。
- Backend/BaaS: 深度整合 Firebase 生態系（Auth, Firestore, Hosting），實現 Serverless 架構並達成零成本營運。
- Optimization: 使用 Vite 進行建置，確保極速的載入體驗與良好的開發效率。
