FANMAP ADMIN — 2026 | Haru Li

DETAIL

問題

App 端的活動、地點、票券與應援申請都需要有人維護，且後台的資料模型必須與 App 完全一致，否則兩邊會各長出一套格式。

做法

同一個團隊的管理後台，後台前端由我主導開發，後端由團隊其他成員負責。以開源 Shadcn admin 模板為基礎，重寫認證與權限層，實作帳密登入、8 小時 session、受保護路由，以及管理員帳號、角色與細粒度權限。與 App 共用活動、地點、票券、應援申請等核心型別，不另建一套格式。與後端以 OpenAPI 先定契約再各自實作，管理端點統一走 /admin/* 與 JWT Bearer，每個 operation 標註所需權限交由後端強制授權，前端的路由與按鈕隱藏只負責使用體驗。法務文件採草稿／發布版本分離，避免未完成的文字直接被 App 讀到。測試以 Vitest browser mode 執行。

結果

後台基礎層與法務文件管理頁已可操作，其餘 14 條管理路由的欄位與 API 骨架已就位，依後端完成順序逐頁實作中。

TECH STACK //

React 19ViteTypeScriptTanStack RouterTanStack QueryTanStack TableShadcn UIReact Hook FormZodi18nextVitestOpenAPI