AI Coding 常用工具
GitHub：存版本、看差異、和人一起 reviewChrome：檢查畫面、表單與錯誤訊息Supabase：用測試資料練資料表與登入權限
公開展示再選部署平台
本機預覽就能完成；想公開展示時，再依你目前帳號與專案選一個有預覽環境的平台。
部署平台：依你目前帳號與專案選一個有預覽環境的平台
付款資料保護
付款是否開放，以各商品付款頁當下狀態為準；卡號只填在 TapPay 提供的安全欄位，本站不會保存。
30 天任務順序
四週，從第一個檔案走到測試與發布
學會建置本機環境、Git 與專案說明，理解資料庫、OAuth 登入、測試與部署，透過循序漸進的練習，讓自己正式成為 AI Coding 社群的一員。
第 1 週 · Day 1-7
建立專案，學會用 Git 安全儲存
- 建立能在本機執行的專案骨架
- 用 Git commit 與 feature branch 安全保存版本
第 2 週 · Day 8-14
寫好開發規則，讓 Codex 開始做 UI
- 用 README、SPEC、AGENTS.md 寫清楚開發規則
- 讓 Codex 完成第一版 React UI
第 3 週 · Day 15-21
讓網頁可以互動，接上 API 與資料
- 建立頁面、表單與本機 API
- 用環境變數和資料模型保護資料
第 4 週 · Day 22-30
完成登入、資料保護、測試與發布
- 完成 migration、登入、RLS 與假 Webhook
- 跑完 CI、smoke test 與 rollback 再決定是否發布
第 1 週Day 1-7：建立專案，學會用 Git 安全儲存
- 建立能在本機執行的專案骨架
- 用 Git commit 與 feature branch 安全保存版本
展開每日課程收合每日課程這週交作業：docs/project-brief.md、可執行專案骨架、Git 基準紀錄與 Private Repository
第 1 週
Day 1-7：建立專案，學會用 Git 安全儲存
- 建立能在本機執行的專案骨架
- 用 Git commit 與 feature branch 安全保存版本
- Day 1第 1 週：建立專案，學會用 Git 安全儲存
我們來做產品吧！
先找到真正想解決的問題，再用 MVP 定義 30 天做得完的產品範圍。
查看 Day 1 計劃 - Day 2第 1 週：建立專案，學會用 Git 安全儲存
建立本地端專案資料夾
建立本機專案資料夾，準備 Node.js、Git 與 Next.js 專案骨架。
查看 Day 2 計劃 - Day 3第 1 週：建立專案，學會用 Git 安全儲存
試著安裝需要的套件
依 package.json 與 lockfile 安裝套件，啟動本機畫面並檢查 Console。
查看 Day 3 計劃 - Day 4第 1 週：建立專案，學會用 Git 安全儲存
最重要的 Git 基礎
認識 Git、git status 與 .gitignore，看懂哪些檔案該保存、哪些不該進版控。
查看 Day 4 計劃 - Day 5第 1 週：建立專案，學會用 Git 安全儲存
如何用 Git 來安全儲存
照 status → diff → stage → commit 的順序，安全保存第一個版本。
查看 Day 5 計劃 - Day 6第 1 週：建立專案，學會用 Git 安全儲存
每一個功能更新都用 feature
每個新功能都開 feature branch，讓修改與 main 分開，做壞也能安全回頭。
查看 Day 6 計劃 - Day 7第 1 週：建立專案，學會用 Git 安全儲存
GitHub 基礎
建立 Private GitHub Repository，核對 remote 與 branch 後完成第一次 Push。
查看 Day 7 計劃
第 2 週Day 8-14：寫好開發規則，讓 Codex 開始做 UI
- 用 README、SPEC、AGENTS.md 寫清楚開發規則
- 讓 Codex 完成第一版 React UI
展開每日課程收合每日課程這週交作業：README.md、SPEC.md、AGENTS.md，以及可操作、可驗證的 React 畫面
第 2 週
Day 8-14：寫好開發規則，讓 Codex 開始做 UI
- 用 README、SPEC、AGENTS.md 寫清楚開發規則
- 讓 Codex 完成第一版 React UI
- Day 8第 2 週：寫好開發規則，讓 Codex 開始做 UI
專案守門員 README
把用途、啟動方式與限制寫進 README，讓自己、協作者與 Codex 都能快速看懂專案。
查看 Day 8 計劃 - Day 9第 2 週：寫好開發規則，讓 Codex 開始做 UI
開發前置作業 SPEC
用 SPEC 寫清楚功能、成功條件與不做的事，讓每項需求都能實際驗收。
查看 Day 9 計劃 - Day 10第 2 週：寫好開發規則，讓 Codex 開始做 UI
開發聖旨 AGENTS.md
用 AGENTS.md 規定 AI 能改什麼、要跑哪些檢查，以及何時必須停下來問你。
查看 Day 10 計劃 - Day 11第 2 週：寫好開發規則，讓 Codex 開始做 UI
開始動起來了！
讓 Codex 先讀規格、列計畫，再完成第一版 React UI，最後用 diff 與瀏覽器驗證。
查看 Day 11 計劃 - Day 12第 2 週：寫好開發規則，讓 Codex 開始做 UI
UI 基礎
把重複畫面拆成 React component，學會用 props 傳入不同內容。
查看 Day 12 計劃 - Day 13第 2 週：寫好開發規則，讓 Codex 開始做 UI
讓 UI 可以互動
用 props、state 與 event handler，讓按鈕和內容真的會回應操作。
查看 Day 13 計劃 - Day 14第 2 週：寫好開發規則，讓 Codex 開始做 UI
學會驗證資料
替資料畫面補上 loading、success、empty、error，確認每種狀態都有下一步。
查看 Day 14 計劃
第 3 週Day 15-21：讓網頁可以互動，接上 API 與資料
- 建立頁面、表單與本機 API
- 用環境變數和資料模型保護資料
展開每日課程收合每日課程這週交作業：HTTP 流程圖、分層頁面、表單、API、安全環境設定與資料模型
第 3 週
Day 15-21：讓網頁可以互動，接上 API 與資料
- 建立頁面、表單與本機 API
- 用環境變數和資料模型保護資料
- Day 15第 3 週：讓網頁可以互動，接上 API 與資料
資料如何在網路上跑起來
打開 Network 面板，看懂 HTTP request 與 response 如何在瀏覽器和伺服器之間往返。
查看 Day 15 計劃 - Day 16第 3 週：讓網頁可以互動，接上 API 與資料
開始建立分層頁面
用 Next.js App Router 建立頁面與共用 layout，讓網址和導覽結構清楚分層。
查看 Day 16 計劃 - Day 17第 3 週：讓網頁可以互動，接上 API 與資料
測試、驗證、測試、驗證⋯⋯
建立有 label、欄位驗證與錯誤提示的表單，先用本機假資料測試。
查看 Day 17 計劃 - Day 18第 3 週：讓網頁可以互動，接上 API 與資料
電腦網頁版可以動了，手機版呢？
用不同 viewport 和鍵盤操作檢查 Responsive UI，讓手機和電腦都能順利使用。
查看 Day 18 計劃 - Day 19第 3 週：讓網頁可以互動，接上 API 與資料
練習串接 API
定義 API contract，再用 Next.js Route Handler 串起表單與本機 API。
查看 Day 19 計劃 - Day 20第 3 週：讓網頁可以互動，接上 API 與資料
如何建立 .env 儲存秘密資料
用 .env 保存秘密、用 .env.example 留變數名稱，避免 Key 跑進前端或 Git。
查看 Day 20 計劃 - Day 21第 3 週：讓網頁可以互動，接上 API 與資料
資料間的關聯圖
畫出 table、欄位與關聯，先用 data model 想清楚資料要怎麼存。
查看 Day 21 計劃
第 4 週Day 22-30：完成登入、資料保護、測試與發布
- 完成 migration、登入、RLS 與假 Webhook
- 跑完 CI、smoke test 與 rollback 再決定是否發布
展開每日課程收合每日課程這週交作業：migration、登入與 RLS、Webhook 與冪等設計、ADR、品質檢查、成果頁與發布報告
第 4 週
Day 22-30：完成登入、資料保護、測試與發布
- 完成 migration、登入、RLS 與假 Webhook
- 跑完 CI、smoke test 與 rollback 再決定是否發布
- Day 22第 4 週：完成登入、資料保護、測試與發布
一次弄懂最容易卡關的 migration
用 migration 管理資料表變更，先在本機驗證，再準備安全的 rollback。
查看 Day 22 計劃 - Day 23第 4 週：完成登入、資料保護、測試與發布
做一個登入介面
用 Supabase Auth 建立登入、登出與 protected page，先分清身份驗證和權限。
查看 Day 23 計劃 - Day 24第 4 週：完成登入、資料保護、測試與發布
用 RLS 驗證保護網頁
用 RLS 與 auth.uid() 限制每筆資料，確認不同帳號不能讀到彼此內容。
查看 Day 24 計劃 - Day 25第 4 週：完成登入、資料保護、測試與發布
Webhook 基礎
建立假 Webhook，用 raw body、signature 與 Web Crypto 驗證事件來源。
查看 Day 25 計劃 - Day 26第 4 週：完成登入、資料保護、測試與發布
如何避免重複資料一直讀
用 event_id、unique constraint 與 atomic write，避免同一事件被重複處理。
查看 Day 26 計劃 - Day 27第 4 週：完成登入、資料保護、測試與發布
隨時都要記錄每項決策
用 ADR 記下重要技術選擇、代價與重新評估條件，之後不用再猜當初為何這樣做。
查看 Day 27 計劃 - Day 28第 4 週：完成登入、資料保護、測試與發布
程式碼品質檢查
依序跑 lint、type-check、test、build 與 smoke，讓本機與 CI 一起守住品質。
查看 Day 28 計劃 - Day 29第 4 週：完成登入、資料保護、測試與發布
準備你的期末報告
把問題、做法、測試、限制與成果整理成 project case study，準備你的期末報告。
查看 Day 29 計劃 - Day 30第 4 週：完成登入、資料保護、測試與發布
恭喜您 30 天的努力！
重跑 quality gate、production build 與 smoke，寫好 rollback 後再決定是否公開發布。
查看 Day 30 計劃
AI Agent 能幫你處理的四種工作
介面設計：把畫面、手機排版與互動拆成一項一項檢查安全檢查：先找出秘密、權限與遠端動作的影響範圍測試與除錯：先重現問題，再縮小範圍，不靠猜產品規格：把腦中的點子變成 AI 和合作的人都能照做的說明