Taiwan HSR Booking System — Full-stack Case Study

模擬台灣高鐵服務流程的全端訂票平台。專案不只實作畫面，也處理會員驗證、跨站區間座位分配、付款、退票與候補等互相影響的營運規則。

本 repo 是前端；後端與資料模型請見 final-project-backend。兩個 repo 共同構成同一個完整案例。

專案背景

訂票系統的難點不是單一表單，而是讓「班次、停靠站、座位、票價、訂單與候補」在完整流程中保持一致。本專案以真實使用旅程為主軸，從查詢班次一路完成選位、確認、付款與後續訂單管理。

核心功能

• Email／密碼註冊登入與 Google OAuth
• 班次、票價與可用座位查詢
• 指定座位、票種與早鳥優惠
• 訂單確認、模擬付款、取消、單張退票與 CSV 匯出
• 無需登入的 8 碼訂位代號查詢
• 候補登記、狀態追蹤與取消
• 自由座壅擠程度與疏運期銷售資訊
• 繁體中文、英文、日文三語介面
• 手機、平板與桌面版響應式設計

技術棧

Layer	Technology
Frontend	React 19, TypeScript, Vite, hand-written CSS
Backend	FastAPI, SQLAlchemy, Pydantic
Database	PostgreSQL
Authentication	JWT, Google Identity Services
Deployment	Vercel (frontend)

系統架構

flowchart LR
  U[Browser] --> F[React + TypeScript SPA]
  F -->|REST / JSON| A[FastAPI]
  F -->|Google credential| O[Google OAuth]
  A -->|verify credential| O
  A --> S[Business rules and services]
  S --> D[(PostgreSQL)]

Loading

關鍵工程成果

• 以站點 sequence_no 判斷乘車區間是否重疊，使同一座位可安全服務不同、不重疊的旅程。
• 將會員、訂票、付款、取消、退票與候補串成完整狀態流程，而非彼此獨立的頁面展示。
• 使用共用 API service 與 TypeScript 型別集中管理前後端資料契約。
• 將語系偏好保存於瀏覽器，並維持三語核心流程的一致性。

Demo 與畫面

• 開啟線上 Demo
• 建議體驗順序：註冊／登入 → 查詢班次 → 選位 → 確認訂單 → 付款 → 我的訂單
• 主要畫面：訂票查詢、選位、訂單確認、付款、我的訂單、候補、訂位代號查詢

線上 Demo 需後端服務可連線；此作品為教學與作品集用途，付款流程不會產生真實交易。

本地開發

npm install
cp .env.example .env
npm run dev

Environment variable	Purpose
VITE_API_BASE_URL	Backend API base URL
BACKEND_TARGET	Vite development proxy target
VITE_GOOGLE_CLIENT_ID	Google OAuth client ID

建置與檢查：npm run build、npm run lint。

相關 repo

• Frontend
• Backend
• Data crawler