鐵人檔案
本系列文章記錄大一升大二暑假的 30 天開發挑戰，透過 Vibe Coding 與 AI 協作，從零開始設計並實作一款個人記帳系統。
開發內容包含記帳功能、分類管理、預算設定、動態預算警示，以及支出數據圖表等，也會逐步介紹 React 狀態管理、useMemo 效能優化與 localStorage 持久化儲存等技術。
除了功能與程式碼實作，也會分享開發過程中使用的 Prompt、與 AI 協作的方式，以及實際遇到的 Bug 和除錯過程。希望透過 30 天的開發紀錄，完整呈現一款記帳 App 從規劃、實作到完成的過程。
接下來的 30 天，我給自己設定一個目標：做出一個屬於自己的記帳 App。 這次參加鐵人賽，我選擇 Vibe Coding。大一時曾接觸 AI 輔助程式開發，但...
我今天開始實際動手做記帳 App 的介面，學習 了React 的 JSX，並把基本畫面架構做出來 透過與AI的對話,我對我正在做的東西更加熟悉。 我認識了...
今天主要學習 HTML 語意化標籤和表單的基本用法。 我今天開始接觸一些 React 中常用的資料處理方式。例如使用 filter 篩選出需要保留的資料，這樣就...
今天是第四天，主要是幫我的記帳 App 加入了表單輸入驗證與防呆機制，以及分類標籤選單。原本每筆資料只有 { id, name, amount }，這次新增了...
今天主要學習如何使用 CSS Style 優化 React App 的介面，讓原本簡單無趣的版面變得更加豐富。我主要調整了配色、間距、圓角、框線、按鈕以及 Ho...
這次我讓記帳 App 加入 localStorage，讓使用者重新整理或關閉網頁後，之前的記帳資料也能保留下來。整體的運作方式是：App 開啟時，先從 loca...
今天主要是重新整理記帳 App 的資料結構，讓每筆記帳資料不只是記錄「名稱、金額和分類」，還能知道這筆交易是收入還是支出，以及發生的日期，為之後做按月、按日分類...
今天開始把記帳 App 的 CRUD 功能補完整，前面已經完成新增、讀取、刪除，這次則是加入最後的 編輯/更新功能（Update） 功能。這次主要的流程是：點擊...
今天主要對記帳 App 的資料篩選方式和介面進行重構。原本所有紀錄都全部展示出來，這次我把它改成月份切換、收支頁籤，以及 Modal 彈出視窗，讓畫面更簡潔，也...
今天主要幫記帳 App 加入分類圓餅圖和多條件搜尋功能。前幾天主要是在處理資料和功能，這次則開始思考「要怎麼讓使用者更容易看懂這些資料」。用 Canvas 做出...
