今日目標說明

在開始動手寫程式之前，先讓我們來確立這個寶可夢追蹤系統的「建築藍圖」。一個穩定的全端系統需要前端、後端以及資料庫的緊密配合。今天我們會來介紹這個專案所選用的技術棧，以及為什麼我們要在眾多技術中做出這樣的搭配決策。

核心系統架構

我們的專案採用了經典的「前後端分離」架構，讓前後端可以各自獨立開發與部署：

• 前端 (Frontend)：負責畫面呈現與使用者互動。

  • React 18 (Vite)：作為畫面建構的核心。
  • Material UI (MUI)：強大且美觀的 UI 組件庫，能幫助我們快速刻出精緻的寶可夢卡片與表單。
  • React Query：處理 API 狀態管理的超級神器。

• 後端 (Backend)：負責業務邏輯與資料庫溝通。

  • Express.js (Node.js)：輕量、成熟的後端框架。
  • TypeScript：為前後端帶來強型別保護，減少執行期錯誤。
  • Multer：處理寶可夢圖片上傳的 Middleware。

• 資料庫 (Database)：

  • Turso：基於 libSQL 的邊緣運算資料庫，輕量且對 Side Project 極度友善。

• 雲端部署 (Deployment)：

  • Render：託管前端 React 靜態網頁。
  • Vercel：部署 Express 後端 API，完美發揮 Serverless 優勢。

【架構決策對比】現代 Web 堆疊 vs 傳統開發模式

為什麼我們不選用大家最熟悉的 CRA (Create React App) 或是傳統的 MySQL？以下是我們這次技術選型的核心思考：

透過上述的現代化技術棧，我們可以把精力 100% 集中在「寫程式」上，而不是「管機器」。

實際畫面截圖

流程概念為：使用者畫面 -> Render (前端) -> Vercel (後端 API) -> Turso (雲端資料庫)。

小結

了解了我們即將使用的武器與選型優勢後，明天我們就會立刻進入實戰，開始搭建前端的 Vite 開發環境！