鐵人檔案
身邊熱愛 Pokémon GO 的朋友們為了蒐集特殊寶可夢開了多個帳號，原先用 Excel 記錄，卻因變動太快而難以維護。為了解決這項痛點，我開發了這套「寶可夢持有追蹤系統」！
本系列將分享以 React + Express 全端技術搭配 Turso 雲端資料庫，從零開發並將系統雙端部署至 Render 與 Vercel，打造出能輕鬆登錄並追蹤蒐集進度的實用專案。
今日目標說明 有資料之後，我們需要把這些寶可夢紀錄漂漂亮亮地展示出來。我們的系統會用手機查，也會用電腦查，因此我們將使用 MUI 的 Grid 響應式排版系統，...
今日目標說明 要讓系統活起來，當然要能寫入資料！今天我們要實作一個不會跳轉頁面的彈出對話框 (MUI Dialog)，裡面包含一個表單，讓使用者輸入捕獲的寶可夢...
今日目標說明 系統中可以自訂標籤 (Tags)，而且每個標籤還可以上傳專屬的 Icon。在 React 中上傳檔案給後端，我們不能像前面幾天一樣直接把檔案塞進...
今日目標說明 隨著大家抓的寶可夢越來越多，我們的圖鑑列表或交換介面可能會一口氣塞入數百甚至上千筆資料。如果在 React 中一次把一千張卡片 (DOM 節點)...
今日目標說明 今天我們要把昨天的 react-window 觀念，實際應用到系統的「寶可夢交換列表」中。在這個對話框裡，我們需要一口氣列出玩家擁有的所有寶可夢，...
今日目標說明 當圖鑑或交換列表的資料變多時，除了滑動順暢，更重要的是「找得快」。今天我們要在畫面上加上搜尋框與過濾條件 (例如：過濾性別、地區、特定標籤)，讓使...
今日目標說明 開發完成後，最開心的莫過於把作品放到雲端上讓朋友使用了！今天我們要把 Node.js + Express 寫的後端 API 部署到 Vercel。...
今日目標說明 後端順利上線了，接著換前端！我們的 React 前端是透過 Vite 建立的，編譯後會產生純靜態的 HTML、CSS 和 JavaScript 檔...
今日目標說明 當我們把前端 (Render) 跟後端 (Vercel) 分開部署到不同的網域時，瀏覽器基於安全性考量，預設會擋下跨網域的 API 請求，也就是大...
今日目標說明 「就決定是你了！」這句話伴隨著無數人的童年，而這 30 天的鐵人賽，則是我們把童年回憶轉化為實際技術產出的珍貴旅程。今天不寫程式，我們來回顧這段從...
