app link : https://college-expense-tracker-sandy.vercel.app/

歷經了 29 天的程式碼重構、UI/UX 優化、密碼鎖、PWA 行動化改造到最後的 CI/CD 自動化部署，我們的「大學生的小金庫」專案終於迎來了 30 天鐵人賽的完美終點站！回顧這一個月的開發旅程，我們不僅產出了一款兼具實用性與資安防護的日常記帳 PWA 應用，更在無數次的「需求衝撞、動手重構、踩坑除錯」中，淬煉出更成熟的前端工程思維。今天就讓我們從架構迭代與工程實踐的角度，為這 30 天做一個深度的完賽總結。

一、 思維進化

• 狀態持久化與資安防線的權衡（密碼與名字彈窗聯動）：
  挑戰： 在導入類似保險箱的概念時，初期的驗證邏輯曾因 localStorage 狀態未精準對位，導致已註冊的使用者重新整理時被誤判為新用戶。同時，DOM 元素的非同步載入也引發了按鍵事件監聽的衝突。
  解方： 透過嚴謹的條件分流（Condition Branching），將「首次註冊設定（密碼與個性化小金庫命名 Modal 串接）」與「日常解鎖驗證」完全獨立。這不僅確保了資料的穩定持久化，也兼顧了流暢的使用者體驗（UX）。

• 介面動線重構：從桌面思維轉向行動優先（Mobile-First）：
  挑戰： 初期直覺地採用了左右雙欄佈局，但在手機狹窄的螢幕上，這種設計會造成嚴重的空間擠壓與視覺疲勞。
  解方： 果斷推翻原有的 CSS Grid，改採「上方橫向寬版快速記帳、下方歷史清單滾動」的上下流動佈局。透過 CSS Grid 的 auto-fit 與 minmax 特性，讓介面在任何尺寸的螢幕下都能自適應流暢運作。

• 資訊架構（IA）的減法藝術：精簡 Chart.js 互動視覺化：
  挑戰： 統計頁面原本並列了圓餅圖與冗長的文字明細清單，造成資訊過載。
  解方： 秉持著「介面越簡單越好」的原則，我們大膽移除文字清單，並透過 Chart.js 的 tooltip.callbacks.label 進行底層邏輯客製化，讓使用者點擊圖表切片時，能即時浮現精確的百分比與金額（例如：吃的喝的: 50.0% ($60)）。用互動取代冗員，大幅提升了資料視覺化的直覺性。

二、 版本控制與現代化 CI/CD 工作流

當專案功能臻至完善後，標準的軟體工程流程絕對少不了版控與自動化部署：

1.Git / GitHub 版本控制：

#初始化 Git 倉庫
git init
#將所有變更加入暫存區並提交
git add .
git commit -m "feat: 完成大學生記帳 App 核心功能、RWD 佈局與密碼鎖防護"
#連線至 GitHub 遠端儲存庫並推送
git remote add origin https://github.com/你的帳號/college-expense-tracker.git
git branch -M main
git push -u origin main

2.Vercel 持續整合與部署（CI/CD）：
藉由 Vercel 與 GitHub 的無縫串接，我們實現了現代前端開發最迷人的「自動化上線」流程：

• 專案採零配置部署，推送到主分支後自動建置靜態資源。
• 往後只要在本地端修復 Bug：

git add .
git commit -m "fix: 優化密碼解鎖與介面排版"
git push

三、 總結

回顧這 30 天的旅程，從 Day 1 的零散構想、敲下第一行 HTML 語法，到後來的 JavaScript 資料處理與 LocalStorage 狀態管理，再到後期的 RWD 響應式優化、PWA 桌面捷徑安裝、資安防護及雲端部署，這不僅僅是做出了一個天天都在用、充滿溫度的「大學生的小金庫」Web App，更帶來了許多的成長：

• 工程思維的建立：學會了在沒有框架（Vanilla JS）的限制下，如何靠著原生 DOM 操作、事件監聽與 CSS Flex/Grid 刻出具有高品質的互動介面。面對 Bug 時不再慌亂，而是透過控制台、條件檢查與邏輯拆解來「對症下藥」。
• 未來擴充性：這個專案雖然目前以前端與 LocalStorage 為主，但架構上隨時具備良好的擴充彈性，未來可進一步導入 Node.js / Spring Boot 後端、串接遠端資料庫（如 MySQL / MongoDB）或實現多裝置雲端同步。