VolleyScore

動機

在排球場，計分通常靠人工大聲報數，或由一人輪流操作實體計分板。計分板只能單點控制，位置也不固定，場上及場邊的人常常看不清楚。

VolleyScore 解決了這個問題：所有裝置加入同一個房間後，任何人都能用手機遠端計分；計分板螢幕則放在主審位置，場上球員與場邊觀眾都能清楚看到當前比分。

核心功能

房間碼遙控：建立 4 位數房間碼，其他裝置輸入碼或掃描 QR Code 後即可同步查看、操控比分，不需要登入帳號
Firebase 即時同步：透過 Firebase Realtime Database，分數變更在毫秒內反映至所有連線裝置
計分 / 顯示模式切換：同一台裝置可切換為計分操作模式或純顯示模式，彈性分配各裝置角色
拖曳對調隊伍：拖曳分數卡可對調兩隊的左右（或直式時上下）顯示位置
PWA 可安裝：支援加入主畫面，開啟速度與原生 App 相近，不需要上架 App Store
單裝置離線模式：無網路環境下仍可正常計分，斷線重連後自動同步

技術選型

為什麼選 Firebase Realtime Database？

Firebase 免費額度足夠個人專案使用，SDK 封裝了重連邏輯，省去大量樣板程式碼，不需要自架後端。

為什麼選 Vite？

Create React App 已停止維護，Vite 啟動速度快上許多，HMR 幾乎即時，開發體驗明顯提升。

PWA 設定

使用 vite-plugin-pwa 自動產生 Service Worker 與 Manifest。導覽請求採用 NetworkFirst（逾時 3 秒 fallback 快取），確保每次開啟 App 都優先取得最新版本；Firebase 資料與分析工具設為 NetworkOnly 不快取。

挑戰與解法

挑戰：多裝置同步時的 race condition

當兩台裝置同時點擊計分，可能發生覆蓋問題。透過 Firebase 的 runTransaction 確保分數更新為原子操作，避免資料衝突。

挑戰：Firebase 免費額度限制

房間資料在比賽結束後通常就沒用了，但不會自動清除，長期累積會超出免費儲存上限。串接 Google Apps Script 設定每週定期執行，透過 Firebase REST API 刪除超過 7 天未更新的房間，不需要另外起 server。