🔗 點此造訪正式上線網站 (JOJOZOO Camp) (註：此為企業正式營運中之商業產品。由於原始碼具版權保護，本 Repo 僅供架構分享與能力佐證，不提供完整業務邏輯程式碼)
📸 系統成果截圖
🚩 營運痛點：人工作業的產能瓶頸
每年夏令營報名期間，公司面臨極大的營運壓力：
- 報名資訊破碎：傳統 Google 表單無法即時控管名額，導致熱門梯次嚴重超賣。
- 對帳耗時費力：財務需手動核對數百筆匯款，家長往往需等待 2-3 天才能確認報名成功，造成客服量爆增。
- 候補管理混亂：手動處理候補順序極易出錯，損害客戶對品牌的信任。
🎯 產品策略：建立「極簡化報名體驗」
本系統不僅是報名表，更是營運與體驗的核心：
- 一站式流暢體驗：家長從「填寫資料」、「費用試算」到「完成匯款回報」皆可在同一個頁面順暢執行，無需跳轉或等待郵件。
- 即時名額控管：透過技術手段達成毫秒級的名額扣減，徹底解決熱門梯次的超賣痛點。
- 數據化營運：管理後台提供各梯次報名趨勢圖，幫助行銷團隊即時調整推廣預算分配。
📈 商業價值與影響力
- 節省行政成本：每季節省超過 100 小時 人工對帳與客服處理時間。
- 品牌信譽提升：專業的報名流程與即時的反饋，大幅提升了高端客戶對夏令營品牌的滿意度。
- 開發 ROI 極大化：以零外部委外成本，完成市價約 NT$200,000+ 的客製化系統。
✨ 核心功能
- 自動費用計算：支援早鳥優惠、多人同行折扣與推薦碼機制。
- 即時名額顯示：系統即時反映剩餘名額，並支援額滿自動轉入候補流程。
- 線上匯款回報：整合付款流程，家長可直接於線上回報匯款資訊，減少人工溝通。
- 報名狀態查詢：提供自助式查詢服務，降低客服詢問量。
後端管理系統
- 資料可視化儀表板：即時監控各梯次報名狀況與收款進度。
- 候補名單管理：自動化排序與處理流程。
- 一鍵報表導出：支援 CSV 匯出，與內部財務系統無縫銜接。
- 系統維護模式：具備即時封閉前台報名的緊急開關。
🏗️ 核心架構設計
sequenceDiagram
participant User as 家長 (Frontend)
participant CF as Firebase Functions
participant DB as Firestore
User->>CF: 送出報名請求
activate CF
CF->>DB: 開啟 Transaction
activate DB
DB-->>CF: 取得目前名額 (currentCount)
alt currentCount < maxCapacity
CF->>DB: currentCount + 1
CF->>DB: 建立 SUCCESS 報名紀錄
DB-->>CF: Commit
CF-->>User: 報名成功
else currentCount >= maxCapacity
CF->>DB: 不扣減名額
CF->>DB: 建立 WAITING 候補紀錄
DB-->>CF: Commit
CF-->>User: 進入候補名單
end
deactivate DB
deactivate CF
🛠️ 技術挑戰與解決方案
挑戰：複雜的多梯次名額競爭與對帳延時
- 問題：夏令營開放報名瞬間會有大量流量衝擊，且家長匯款後的人工對帳往往造成名額佔用與實際收款的資訊落差。
- 行動：
- Backend Guards：在 Firebase Functions 實作了原子性的交易檢查，確保名額扣減不發生超賣。
- 即時回報系統：設計了「一鍵上傳匯款末五碼」功能，前端即時顯示待審核狀態，將對帳時差從天降至分鐘級。
- 結果：系統上線後，23 個梯次全部於 1 小時內順利完成報名，且 0 發生重複收費或名額糾紛。
🛠️ 技術棧
- 前端：React 19, Vite, Tailwind CSS (Vite Plugin)
- 後端與資料庫：Firebase (Firestore, Functions)
- 邏輯與介面：React Router, Recharts, Date-fns, Lucide React
- 部署：靜態主機搭配標準 CI/CD 流程
📈 成果證明
📎 延伸閱讀
- 數位轉型實戰：全自動報名轉型方案 — 從商業價值定位切入的專案總結報告
由行銷企劃部開發 (2026)
💡 AI 協作筆記：本專案之 [架構設計/邏輯優化/Bug 修復] 係透過與 AI 深度對話共同完成，展現了高效能的 AI 輔助開發模式。