iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
佛心分享-SideProject30

就決定是你了!打造寶可夢持有追蹤系統 (React x Express) 系列

身邊熱愛 Pokémon GO 的朋友們為了蒐集特殊寶可夢開了多個帳號,原先用 Excel 記錄,卻因變動太快而難以維護。為了解決這項痛點,我開發了這套「寶可夢持有追蹤系統」!

本系列將分享以 React + Express 全端技術搭配 Turso 雲端資料庫,從零開發並將系統雙端部署至 Render 與 Vercel,打造出能輕鬆登錄並追蹤蒐集進度的實用專案。

參賽天數 7 天 | 共 7 篇文章 | 2 人訂閱 訂閱系列文 RSS系列文
DAY 1

DAY 1:【開賽】參賽動機與專案展示

今日目標說明 這是我第四年參加鐵人賽,過去幾年我分別挑戰了 VsVim、Pandas 以及 OpenCV 等主題。而今年,我決定來點不一樣的,挑戰完整的全端專案...

DAY 2

DAY 2:系統架構與技術選型

今日目標說明 在開始動手寫程式之前,先讓我們來確立這個寶可夢追蹤系統的「建築藍圖」。一個穩定的全端系統需要前端、後端以及資料庫的緊密配合。今天我們會來介紹這個專...

DAY 3

DAY 3:前端專案建立 (Vite + React 初始化)

今日目標說明 今天我們將正式啟動專案!第一步,讓我們先把前端的地基打好。我們將使用 Vite 來建立一個 React + TypeScript 的專案,並整理一...

DAY 4

DAY 4:後端專案建立 (Express + TypeScript)

今日目標說明 前端地基打好了,今天輪到後端登場!我們將建立一個 Node.js 專案,並引入 Express 框架。這是一套極度輕量且靈活的後端框架。更重要的是...

DAY 5

DAY 5:雲端資料庫 Turso 申請與連線設定

今日目標說明 這幾年 Serverless (無伺服器) 與邊緣運算非常熱門,我們的專案不自己架設龐大的 MySQL 或 PostgreSQL,而是選用極度輕量...

DAY 6

DAY 6:後端第一支 API 實作 (RESTful 路由設計)

今日目標說明 資料庫準備就緒後,我們開始來蓋後端的地基。今天我們要在 Express 專案中,建立第一支用來抓取「寶可夢基礎圖鑑資料」的 API (/api/p...

DAY 7

DAY 7:規劃關聯式資料表 (寶可夢基礎資料與持有紀錄)

今日目標說明 今天我們要進入資料庫設計的核心環節。我們的系統分為兩種資料:「全世界共用的寶可夢基礎資料 (圖鑑)」以及「每個玩家自己擁有的捕獲紀錄」。要怎麼在資...

٩۹(๑•̀ω•́ ๑)۶的收藏
٩۹(๑•̀ω•́ ๑)۶的追蹤
٩۹(๑•̀ω•́ ๑)۶的Like
٩۹(๑•̀ω•́ ๑)۶的紀錄