今日目標說明

「就決定是你了！」這句話伴隨著無數人的童年，而這 30 天的鐵人賽，則是我們把童年回憶轉化為實際技術產出的珍貴旅程。今天不寫程式，我們來回顧這段從無到有，打造出專屬寶可夢持有追蹤系統的點點滴滴，並期許未來的架構擴充。

30 天的技術足跡

回顧這一個月，我們一起走過了 5 個充滿挑戰的階段：

1. 地基搭建：選用了輕量強大的 Vite (React) 與 Express，並採用 Serverless 友善的 Turso 資料庫。
2. 後端 API 實戰：學會了 JWT 登入防護，並用 Multer MemoryStorage 結合 Base64 巧妙解決了雲端圖片上傳的難題。
3. 前端工藝：套用 Material UI，打造出賞心悅目的圖鑑介面，並體驗了 React Query 高效能的狀態管理與資料快取。
4. 效能極限：面對千筆資料毫不畏懼，導入 react-window 虛擬滾動，讓畫面維持極致順暢。
5. 部署上線：克服了 Vercel 與 Render 的雙端部署，並打敗了網頁開發的終極大魔王：CORS 跨網域限制。

【架構演進的反思】如果系統流量暴增 100 倍？

雖然這是一個自用的 Side Project，但身為工程師，我們總要具備系統架構升級的思維。如果未來系統大受歡迎，我們可以怎麼強化它？

• Redis 快取層 (Caching)：目前圖鑑資料每次都要去 Turso 查。未來可以在後端加入 Redis，把那些百年不變的寶可夢基礎數值快取起來，API 回應速度會再提升一個檔次。
• WebSockets (即時通訊)：如果您正在跟朋友交換寶可夢，透過 WebSockets 就能實現「當對方按下確認，我的畫面會瞬間同步更新」的即時互動體驗，而不需手動重整頁面。
• PWA (漸進式網頁應用)：加入 Service Worker，讓系統能安裝在手機桌面上，甚至在網路訊號微弱時也能支援離線瀏覽圖鑑。

感謝這 30 天來不曾放棄的自己，也感謝在這個專案中不斷給我各種奇葩需求、促使我把系統越寫越好的朋友們！這套「寶可夢持有追蹤系統」只是一個開始，我們未來的開發之路，還會繼續走下去！

實際畫面截圖

做這系統最精華的地方是在跨帳號比對的部分，裡面針對使用者想蒐集的標籤，統計各個帳號的持有情形以及系統自動統計，是否可由交換來完成蒐集；也可以直接看出各帳號是否有多餘的寶可夢可以換給其他人，避免誤換的情形；也讓使用者更好掌握各帳號的互動情形。

跨帳號比對這部分含有大量依使用者需求而客製化的內容，讓這個系統真的成寶友們日常生活中的好幫手！

小結

2026 iT 鐵人賽，完賽成功！🎉