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

可以直接操作,而不是只看靜態截圖。

活動報到與現場營運系統的虛構資料公開 Demo
Build 時由 Chromium 實際開啟公開 Demo 擷取;畫面中的名單、組織、座位與 token 全部為虛構資料。

06 / Takeaway

真正的證據是系統已進入實際活動流程。

這個專案不只呈現 QR 元件或作品集 Demo;我負責的後端已支援真實活動,把參與者端、管理端、API、資料庫、篩選、現場例外處理與資料匯出連成可操作流程。