跳到主要內容CASE STUDY · FULL-STACK OPERATIONS
活動報到與
現場營運系統
這套系統實際支援臺灣綜合大學系統 2026 年新進教師專業知能研習營;我負責後端實作,把 QR 報到、名單查詢、即時統計、座位/入席狀態、現場報名與 CSV 匯出接成可在活動現場操作的工作流。
實際使用:2026-08-28,國立成功大學國際會議廳。官方活動資訊 ↗。正式 repository 與資料庫維持 private;公開 Demo 只使用虛構資料,且不提供持久化寫入。
- 角色
- 全端現場營運工具開發
- 範圍
- QR 報到 · 即時統計 · 篩選 · 座位
- 狀態
- 正式系統 + 隱私安全公開 Demo
- 技術
- Next.js · Cloudflare D1 · Drizzle
- 年份
- 2026
00 / Project framing
專案脈絡與工程判斷
Problem活動現場需要在有限時間內完成報到、搜尋、篩選、座位確認與例外處理,而且操作狀態必須快速回饋。Decision以 Next.js API → D1 → Drizzle 串接資料層,搭配 QR、30 秒統計更新與多維篩選支援現場操作。Evidence目前可核對 30 秒更新、5 維篩選、預先報名 / 現場兩種名單來源與 CSV export;公開 Demo 僅使用 24 筆虛構資料。Next多活動、正式帳號 / RBAC、audit log、idempotency、多裝置衝突與 offline queue 都明確列為未來升級,不宣稱已完成。 01 / Verified scope
不是概念 Demo,而是實際活動後端。
後端負責承接參與者與管理端的活動資料流,讓報到、名單、座位/入席狀態與現場例外處理能透過 API 與資料庫一致更新;Portfolio 只公開不含真實名單的可操作版本。
30s管理後台自動更新週期
5搜尋/學校/系所/報到/入席篩選維度
2名單來源:事前報名與現場報名
CSV篩選後的現場結果可直接匯出
公開 Demo 內含 24 筆完全虛構的測試名單;這個數量只描述 Demo,不代表正式活動規模。
02 / User flow
從一個 QR token 到現場 Dashboard。
Attendee個人 QR token、基本資訊與座位
Check-in UI掃描、確認身分、回傳報到狀態
Next.js APIattendees、admin actions、權限檢查
D1 + Drizzle名單、報到、入席與時間紀錄
03 / Operations
Live Dashboard顯示總人數、已報到、已入席、現場報名與最後一筆報到。Field Filters依姓名、ID、學校、系所、報到和入席狀態快速定位。On-site Handling正式後台支援新增現場報名、調整座位與切換入席狀態。Operational Export將目前篩選結果匯出為 UTF-8 CSV,方便交接與結案。 04 / Privacy design
公開展示與正式營運資料完全分離。
- 正式 repository 保持 private,不公開 attendee token、姓名、單位、座位或管理密碼。
- 公開 Demo 移除原活動 Logo、電話與機構識別,改用虛構品牌與虛構人物。
- 公開後台為唯讀展示;QR 模擬只改目前瀏覽器記憶體,重新整理立即重置。
- Portfolio 不連正式資料庫,也不提供管理 API 的可寫入入口。
05 / Public demo
可以直接操作,而不是只看靜態截圖。
Build 時由 Chromium 實際開啟公開 Demo 擷取;畫面中的名單、組織、座位與 token 全部為虛構資料。06 / Takeaway
真正的證據是系統已進入實際活動流程。
這個專案不只呈現 QR 元件或作品集 Demo;我負責的後端已支援真實活動,把參與者端、管理端、API、資料庫、篩選、現場例外處理與資料匯出連成可操作流程。