鐵人檔案
本系列文章記錄大一升大二暑假的 30 天開發挑戰，透過 Vibe Coding 與 AI 協作，從零開始設計並實作一款個人記帳系統。
開發內容包含記帳功能、分類管理、預算設定、動態預算警示，以及支出數據圖表等，也會逐步介紹 React 狀態管理、useMemo 效能優化與 localStorage 持久化儲存等技術。
除了功能與程式碼實作，也會分享開發過程中使用的 Prompt、與 AI 協作的方式，以及實際遇到的 Bug 和除錯過程。希望透過 30 天的開發紀錄，完整呈現一款記帳 App 從規劃、實作到完成的過程。
今天主要開始整理記帳 App 的程式碼。原本所有程式都放在 App.jsx，太多行讓人在修改與尋找時，造成了許多不便，所以這次我進行 Refactoring（重...
今天主要學習 React 中的 Props、State，以及元件之間的資料傳遞。前幾天開始把 App 拆成不同元件後，我就在想一個問題：元件拆開之後，它們之間到...
因為之前有先把第十三天的目標順帶做完了，但我也不想先往後做影響我整個計劃，所以我今天不急著往後做，而是選擇優化原本的功能與補強觀念。先處理沒有資料時的畫面首先，...
今天想幫記帳 App 加上一個新的圖表功能，讓使用者可以一眼就能大概看出每天花了多少錢，所以我決定製作每日消費趨勢長條圖。用 Canvas 做每日消費趨勢圖這次...
今天幫記帳 App 加入每月預算設定與超支警示功能。這次加入預算上限，不但讓使用者知道自己目前的消費進度，也可以確認花費有沒有快要超支。 設定每月預算與超支警示...
今天主要替記帳 App 加入批次操作功能，讓使用者可以一次選取多筆資料，進行刪除或清空。 批次操作介面優化我先調整 ExpenseList 的操作列，將「全選」...
今天想幫記帳 App 加入一個功能，「把記帳資料匯出成檔案」。這樣使用者就可以把自己的記帳紀錄保存下來，也方便之後用 Excel 查看或整理。 讓記帳資料可以匯...
今天主要替記帳 App 加入 Dark Mode 暗黑模式，讓使用者可以選擇自己想要的主題。 加入全域暗黑模式我在 Header 加入暗黑模式切換按鈕，並用 i...
今天主要是讓使用者在新增他國的幣別時，可以自動轉換讓使用者可以更方便了解自己的支出與收入。 讓記帳 App 支援多種幣別我希望使用者不只能記錄台幣，也可以輸入美...
今天我要幫記帳 App 加入 RWD（響應式網頁設計）。我發現我的app到了手機上會出現左右欄位擠在一起、Header 按鈕爆框等問題，因此今天主要讓 App...
