用 Vibe Coding 打造活動報名系統：一個非工程師的真實開發覆盤
TL;DR：用 Vibe Coding 的方式在一天內從零打造完整活動報名系統——技術選型 Next.js + Supabase + Vercel + Resend，踩了三個真實 Bug（Email 寄送失敗、名額計算競爭條件、Webhook 驗簽）並完整覆盤。提煉出五個 Vibe Coding 實戰心法：明確需求、小步迭代、錯誤日誌第一、AI 不是 Google、永遠先做 MVP。這是非工程師也能複製的生產力系統範例。
為什麼我要自己做報名系統？
最近，我決定為 Vibe Coding 實戰社群的夥伴舉辦一場直播活動。照理說，用 Google 表單或 Accupass 就能搞定報名——但身為一個推廣 Vibe Coding 的人，如果自己能用 Vibe Coding 來做報名系統，那豈不是很棒嗎？
更重要的是，我想要完全掌控報名流程：自動寄出確認信、即時顯示剩餘名額、後臺管理報名資料、匯出 CSV⋯⋯這些功能在第三方平臺上雖然有，但客製化的空間非常有限。
最好的學習方式，就是自己動手做。而最有說服力的教學，則是把自己踩過的坑真實地分享出來。
▲ 用 Vibe Coding 的方式，從零打造活動報名系統
於是我決定挑戰：用 Vibe Coding 的方式，在一天之內把活動報名系統從零做到上線。以下是我的真實覆盤——包含技術選型的思路、開發過程中踩的坑，以及我從中提煉出的五個實戰心法。
技術選型：為什麼是這個組合？
開始動手之前，我先確定了技術架構。雖然 Vibe Coding 的精神是用自然語言跟 AI 對話來開發，但你至少要知道自己想用什麼工具——這就像做菜之前，你得先決定要用瓦斯爐還是電磁爐？
▲ 活動報名系統的技術架構
我選擇了以下這個組合：
- Next.js：React 生態系中最成熟的全端框架，前後端一把抓
- Supabase：開源的 Firebase 替代方案，內建資料庫、身份驗證和即時訂閱
- Vercel：Next.js 的最佳部署平臺，推上去就自動部署
- Resend：專為開發者設計的 Email 服務，支援 React 模板
為什麼選這個組合？因為它們之間的整合非常順暢，而且 AI（特別是 Claude）對這些工具的理解程度很高。當你跟 AI 說「幫我用 Supabase 做報名功能」，它能立刻寫出正確的程式碼——這在 Vibe Coding 中非常重要。
開發過程：一天之內完成了什麼？
我使用 Claude Code 作為 AI 協作工具，透過自然語言一步步描述需求。整個過程大致分為三個階段。
▲ Vibe Coding 開發流程：需求描述 → AI 生成 → 驗證修正
第一階段：資料庫設計與基本功能
我先跟 AI 描述了報名系統的需求：「我需要一個活動報名系統，支援多種票種、報名後自動寄確認信、額滿時自動候補。」AI 幫我設計了資料庫結構，包含活動、票種、報名三張主要資料表，還有對應的 API 路由。
第二階段：前端介面與報名流程
接著，我描述了每個頁面的樣子：活動列表頁、活動詳情頁（含報名表單）、後臺管理頁面。AI 根據我的描述，生成了完整的 React 元件，包含表單驗證、狀態管理和錯誤處理。
第三階段：Email 模板與進階功能
最後，我請 AI 幫我設計報名確認信、活動提醒信和活動更新通知的 Email 模板，支援線上、實體和混合三種活動格式。
▲ 報名系統的功能架構
整個過程中，我幾乎不需要自己寫程式碼。但我需要做三件事：描述清楚需求、驗證 AI 的產出、提供修正方向。這三件事聽起來簡單，實際操作起來卻是 Vibe Coding 的核心功力。
真實踩坑：三個讓我學到教訓的 Bug
系統做出來之後，我興高采烈地上線測試。結果，一連踩了三個坑——每一個都讓我對 Vibe Coding 有了更深的體會。
Bug #1：報名時出現資料庫安全錯誤
第一位測試者報名時，系統直接跳出錯誤：「new row violates row-level security policy」。
▲ Bug #1：資料庫安全政策阻擋了公開報名
問題出在哪？ Supabase 的 Row Level Security（RLS）是一套資料庫層級的安全機制——它會檢查「誰」有權限做「什麼操作」。AI 在設計資料庫時確實寫了「任何人都可以報名」的規則，但報名函式實際執行時，用的是訪客身份（未登入），導致權限檢查失敗。
怎麼解決？ 我跟 AI 說：「報名 API 要改用 service role，繞過 RLS。」AI 立刻建立了一個 service role 的客戶端，專門用於公開報名的資料寫入。
這個 Bug 教會我：Vibe Coding 不代表你完全不用懂技術。你至少要能看懂錯誤訊息，並且用正確的關鍵字跟 AI 溝通。
Bug #2：報名成功，但確認信沒寄出
報名功能修好後，我發現雖然後臺顯示報名成功，但報名者的信箱裡空空如也——確認信根本沒寄出去。
▲ Bug #2：在 Serverless 環境下，非同步任務可能來不及執行
問題出在哪？ AI 在寫程式碼時，把「寄信」這個動作設計成「射後不理」（fire and forget）——也就是發出寄信指令後，不等它完成就直接回傳成功。這在一般伺服器上沒問題，但在 Vercel 的 Serverless 環境中，函式回傳之後會立刻被終止，寄信的程式還沒執行完就被殺掉了。
怎麼解決？ 只需要加一個 await 關鍵字——讓程式等寄信完成之後才回傳結果。這個修改只有一行，但如果你不理解 Serverless 的運作原理，根本不知道問題出在哪裡？
Bug #3：報名後票數沒有即時更新
報名成功後，頁面上的剩餘名額依然顯示原本的數字，沒有減少。
▲ Bug #3：快取機制讓頁面看不到最新的資料
問題出在哪？ Next.js 為了提升效能，會把頁面資料快取起來。當有人報名成功後，快取裡的票數資料是舊的，導致頁面顯示的數字跟實際情況不一致。
怎麼解決？ 在報名 API 成功後，主動呼叫 revalidatePath 來清除該頁面的快取，強制 Next.js 重新取得最新資料。同時，在前端也呼叫 router.refresh() 來更新畫面。
AI 開發 vs 傳統開發：差在哪？
經歷了這整個開發過程，讓我對 AI 輔助開發有了更清晰的認知。它跟傳統開發最大的差異，不在於程式碼本身，而在於開發者的角色定位。
▲ AI 開發 vs 傳統開發的角色轉變
| 面向 | 傳統開發 | Vibe Coding |
|---|---|---|
| 核心技能 | 寫程式碼 | 描述需求 |
| 除錯方式 | 讀程式碼找問題 | 描述問題讓 AI 修 |
| 開發速度 | 數天到數週 | 數小時到一天 |
| 學習門檻 | 高（需程式基礎） | 中（需邏輯思維） |
| 適合對象 | 工程師 | 任何有想法的人 |
但要注意的是，Vibe Coding 並不是完全不用懂技術——你至少需要具備以下能力：
- 看懂錯誤訊息：知道系統在抱怨什麼
- 理解基本架構：知道前端、後端、資料庫各自扮演什麼角色
- 精準描述問題：能把你遇到的狀況用清楚的語言傳達給 AI
五個 Vibe Coding 的實戰心法
從這次開發經驗中，我總結了五個實戰心法，分享給同樣想嘗試 Vibe Coding 的朋友。
▲ Vibe Coding 五大實戰心法
心法一：先想清楚再開口
不要急著跟 AI 說幫我做一個報名系統。先花十分鐘想清楚：你需要哪些功能？使用者的操作流程是什麼？有哪些邊界情況要處理？想得愈清楚，AI 給你的產出就愈精準。
心法二：給 AI 足夠的脈絡
AI 不會讀心。如果你只說報名有問題，它可能改了一個完全不相關的地方。你要說：「使用者用 Gmail 報名後，後臺顯示成功，但信箱沒收到確認信。」脈絡愈完整，AI 的判斷就愈準確。
心法三：看得懂輸出，才能驗證結果
AI 生成的程式碼可能有隱藏的問題——就像我遇到的「射後不理」Email 問題。你不需要能自己寫出那段程式碼，但你要能理解它在做什麼，才能判斷是否正確。
心法四：小步快跑，逐步迭代
不要試圖一次把所有功能都做完。先做最核心的報名流程，確認能動之後，再加上 Email 通知、後臺管理、票種設定等進階功能。每一步都測試、驗證、修正，才不會一錯就是一大片。
心法五：建立自己的除錯思維
遇到 Bug 的時候，先冷靜下來想：「問題可能出在哪一層？是前端顯示的問題、API 邏輯的問題、還是資料庫的問題？」有了初步判斷，再跟 AI 討論，效率會大幅提升。
結語：最好的學習就是實戰
這套活動報名系統現在已經正式上線，接受報名中。整個開發過程讓我更加確信：Vibe Coding 是真的可行的，但它不是魔法——它需要你具備邏輯思維、問題描述能力，以及持續迭代的耐心。
▲ Vibe Coding 實戰工作坊，帶你親手打造自己的數位作品
如果你也想親手體驗 Vibe Coding 的威力，歡迎參加我的 Vibe Coding 實戰工作坊。在三個小時的工作坊中，我會帶你從零開始，用自然語言跟 AI 協作，做出一個屬於你自己的作品。不需要任何程式基礎，只需要帶著你的想法來就好。
未來不屬於會寫程式的人，而是屬於會跟 AI 協作的人。
☕️ 請 Vista 喝杯咖啡
