CASE STUDY · FULL-STACK OPERATIONS

活動報到與
現場營運系統

把 QR 報到、名單查詢、即時統計、座位與入席管理、現場報名和 CSV 匯出接成一套可在活動現場操作的全端工作流。

開啟隱私安全 Demo ↗

正式版本的 repository 與資料庫維持 private;公開 Demo 只使用虛構資料,且不提供持久化寫入。

01 / Verified scope

用程式碼裡已存在的流程描述產品,不暴露正式名單。

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 元件,而是把參與者端、管理端、API、資料庫、篩選、現場例外處理與資料匯出連成可操作流程。