鐵人檔案
身邊熱愛 Pokémon GO 的朋友們為了蒐集特殊寶可夢開了多個帳號，原先用 Excel 記錄，卻因變動太快而難以維護。為了解決這項痛點，我開發了這套「寶可夢持有追蹤系統」！
本系列將分享以 React + Express 全端技術搭配 Turso 雲端資料庫，從零開發並將系統雙端部署至 Render 與 Vercel，打造出能輕鬆登錄並追蹤蒐集進度的實用專案。
今日目標說明 今天我們來開發這套系統最常被呼叫的 API：取得持有紀錄列表。還記得 DAY 7 我們把資料正規化成 pokemon_base (基礎圖鑑) 與...
今日目標說明 今天我們要在 src/routes/holdings.ts 加上一組 POST API，讓朋友可以把自己新抓到的寶可夢存進資料庫裡。在這篇實作中，...
今日目標說明 我們的系統有一個進階功能：使用者可以自訂「標籤 (Tags)」，並且為每個標籤上傳一張可愛的小圖示 (Icon)。處理上傳檔案跟處理 JSON 完...
今日目標說明 昨天我們把上傳的圖片暫存在伺服器的記憶體中了。一般來說，我們會把圖片上傳到 AWS S3 或是 Imgur 這類圖床。但在我們這個小巧的 Side...
今日目標說明 俗話說「人靠衣裝，佛靠金裝」，一個系統就算後端再穩，如果介面醜醜的，朋友肯定是不想用的！為了快速打造美觀且具備 RWD (響應式) 的介面，我們選...
今日目標說明 因為 React 是一個單頁應用程式 (SPA)，我們需要透過「路由 (Router)」來讓網址列產生變化，並切換顯示不同的組件。今天我們將使用最...
今日目標說明 回想 DAY 8，我們將系統設計為「封閉式邀請制」，所以登入頁面不需要放什麼「忘記密碼」或「註冊帳號」的按鈕，只要給朋友兩個乾淨的輸入框：帳號與密...
今日目標說明 今天我們要在前端用 axios 發送帳號密碼到後端，取得 JWT Token 後，將其存在瀏覽器的 localStorage 中。更重要的是，我們...
今日目標說明 以前在寫 React 串接 API 時，我們總是要寫一堆 useState (裝資料)、useEffect (打 API)、isLoading (...
今日目標說明 今天我們要把 DAY 11 寫好的後端 GET API (/api/holdings) 透過 React Query 串接到前端，把朋友存在資料庫...
