接下來的 30 天，我給自己設定一個目標：做出一個屬於自己的記帳 App。

這次參加鐵人賽，我選擇 Vibe Coding。大一時曾接觸 AI 輔助程式開發，但仍有許多基礎沒有真正理解，因此想藉這次挑戰重新學習。

對我來說，Vibe Coding 不只是讓 AI 幫我寫程式，而是透過 AI 協助思考、解決 Bug，並理解程式背後的原理。

這 30 天，我會使用 VS Code 搭配 Gemini，記錄每天的開發過程與學習成果，希望最後不只完成 App，也能真正累積自己的程式能力。

下面是我這三十天的計畫：

第一階段：基礎建立與 UI 打造 (Day 1 - Day 5)

Day 1：確認專案開發動機、設定 30 天目標。

Day 2：設計記帳 App 核心介面 (JSX + CSS)，完成靜態表單與清單。

Day 3：使用 useState 實作新增、刪除消費項目與動態總金額計算，並檢視開發環境與 GitHub 儲存庫設定。

Day 4：加入表單輸入驗證防呆（防止空白/負數）與消費分類標籤選單。

Day 5：美化元件 UI 介面，優化整體卡片與按鈕視覺排版。

第二階段：資料流與狀態進階管理 (Day 6 - Day 10)

Day 6：使用 useEffect 與 localStorage 實作資料在地化儲存（重整不消失）。

Day 7：重構資料結構，加入「日期」與「收支類型（收入/支出）」欄位。

Day 8：實作單筆資料的「編輯 / 修改」功能。

Day 9：新增清單篩選功能（按月份、分類或收支類型過濾）。

Day 10：新增搜尋功能，可以透過項目關鍵字即時搜尋明細。

第三階段：元件化拆分與圖表分析 (Day 11 - Day 20)
Day 11：拆分元件（Header、ExpenseForm、ExpenseList、TotalCard）。

Day 12：學習 Props 傳遞與元件間的溝通機制。

Day 13：引入圖表套件（如 Recharts），建置圓餅圖顯示各分類支出比例。

Day 14：建立長條圖，顯示近 7 天或當月的每日消費趨勢。

Day 15：製作「每月預算設定」與「超支警示條」功能。

Day 16：新增「一鍵清空所有紀錄」與「批次刪除」功能。

Day 17：實作 CSV 檔案匯出功能（將記帳資料下載成 Excel 檔）。

Day 18：加入暗黑模式（Dark Mode）切換功能。

Day 19：實作多幣別轉換工具（可動態切換台幣、美元、日圓等）。

Day 20：針對小螢幕進行 RWD 響應式網頁設計優化。

第四階段：路由、API 與作品集打包 (Day 21 - Day 30)
Day 21：引入 React Router，打造多頁面架構（主頁、圖表頁、設定頁）。

Day 22：建立「歷史月報」專用頁面。

Day 23：學習與外部 API 串接（如抓取實時匯率 API）。

Day 24：優化使用者體驗，加入載入中（Loading）與提示通知（Toast）。

Day 25：重構程式碼，使用 useContext 或 Custom Hook 優化全域狀態。

Day 26：進行全站 Bug 排查與邊界條件測試（Edge Cases）。

Day 27：編寫完整的專案 README.md 說明文件（展示專案特色與截圖）。

Day 28：將專案部署發布至 Vercel 或 Netlify，讓所有人都能使用你的 App。

Day 29：進行 Lighthouse 效能與 SEO 優化。

Day 30：撰寫 30 天開發總結心得，正式完成作品集開源

Day 01，動機與目標確立。