CASE 07 ・ 個人產品
Smart DCA｜
先規劃架構，再讓 AI 執行
以定期定額為核心的投資工具 Web App，支援加密貨幣、美股、台股。我負責需求、架構與驗收，與 Claude 協作開發，一個人從 MVP 做到持續迭代的上線產品。
完成一個人把投資工具從 MVP 做到上線，並持續迭代
衡量約 10 個月、125 次版本提交，支援 3 個市場
做法先定義需求與架構，分階段交給 Claude 實作，每一段由我驗收
TIMELINE時間軸
2025.12
MVP 上線
自選股、情緒指標訊號、每日自動檢查與通知、手機版介面。
2026.02
外部 API 失效
行情資料來源出問題，修復沒成功，先還原到穩定版本，確保網站可用。
2026.05
大改版
新增技術分析論壇、投資組合追蹤、進階技術分析圖表、LINE 與 Web Push 推播；同時把 API 金鑰搬到伺服器端。
2026.06
權限與展示模式
付費權限改由伺服器驗證；新增免登入的展示模式，資料與正式站完全隔離。
2026.07
換建置方式
遷移到 Vite 預先編譯，新增交易日誌與鏈上數據頁。
2026.09
總經整合
加入經濟日曆與總經數據，並提供給 AI 顧問參考；交易日誌加入風控檢查。
PROBLEMS遇到的問題與解法
API 金鑰放在前端會外洩
問題早期為了快，AI 與行情服務的金鑰放在網頁程式裡，任何人打開開發者工具都看得到。
解法把呼叫改成經過 Supabase Edge Functions 代理，金鑰只存在伺服器端；使用者也可以自帶金鑰。
結果前端拿不到任何金鑰。
付費功能可以被繞過
問題如果只看前端的「是否付費」標記，使用者改一下就能用付費功能。
解法權限改在伺服器端查會員資料表驗證，不相信前端送來的標記。
結果付費功能只有真正有權限的帳號能用。
ARCHITECTURE架構規劃
我定義需求與功能範圍
→
我規劃架構與資料流
→
Claude依架構實作程式
→
我逐項驗收、上線
| 部分 | 用什麼 | 為什麼 |
|---|---|---|
| 前端 | React＋Vite＋Tailwind，部署在 GitHub Pages | 靜態網站免費託管，手機電腦開網址就能用，也能安裝成 App（PWA） |
| 會員、資料庫、儲存 | Supabase（Auth、PostgreSQL、Storage） | 登入、資料、論壇圖片在同一個平台；用資料列權限規則，讓每個人只讀得到自己的資料 |
| 伺服器端邏輯 | Supabase Edge Functions | 藏金鑰、驗證付費權限，不用自己架伺服器 |
| 排程與推播 | GitHub Actions、LINE、Web Push | 每日自動檢查訊號、新文章自動通知 |
| 圖表 | Chart.js、Lightweight Charts | 走勢圖與 K 線、技術分析繪圖 |
RESULT結果
從需求定義到上線由一個人完成，網站持續運作與更新中。
這個專案讓我確定，AI 可以大幅加速實作，但把問題說清楚、把架構想清楚，這些事沒辦法交給它。
打開 Smart DCA 展示模式 →