專案介紹
與一位 UI 設計師合作的兩人 side project（2026 年 2 月起，目前已部署至 Stage 環境）。產品構想與介面設計由設計師負責，工程端由我獨立完成：資料庫建模、後端 API、前端與共用 UI 元件庫、圖片處理服務、AWS 基礎設施與 CI/CD。
平台以場館 SVG 座位圖為索引，讓看過演出的人針對自己坐過的座位投稿實拍視角照片與觀演體驗（滿意度、視線是否受阻、散場時間、冷氣強度等），後來的購票者點選座位圖即可查看該位置的真實視角。
重大成就
與設計師合作，獨立設計並開發整套系統，橫跨前後端、資料庫設計與基礎設施架構
技術亮點
- 01
AWS Serverless 架構
將 Next.js 打包成 Docker image，透過 Lambda Web Adapter 運行於 AWS Lambda，靜態資產走 S3 + CloudFront，達成無流量時幾乎零運算成本
- 02
後端分層與依賴注入
靈感源自 NestJS，各業務模組採 Route → Controller → Service 三層，並以建構子注入實現依賴注入，便於替換依賴做單元測試
- 03
Zod DTO 單一定義
以 Zod 從同一份 schema 衍生各種 DTO，實現一份定義、前後端與資料校驗共用的設計，同時用於請求驗證、回應欄位過濾與前後端型別共用
- 04
支援鏈式 middleware 的 Next.js Proxy
改造 Next.js proxy，以泛型
chain()將多個路由守衛組合成責任鏈，新增規則只需多加一個 factory - 05
獨立圖片處理服務
將浮水印與縮圖拆成獨立的 image-processor Lambda，由 S3 事件與 CDN 請求觸發，圖片上傳與處理完全不經過主應用，降低主應用負載
- 06
按需縮圖與防濫用
CloudFront 經 API Gateway 將
/resize/*交給 Lambda 即時縮圖，並以 200／400／800 寬度白名單防止製造 cache miss 的成本型攻擊 - 07
Monorepo 工程化
以 pnpm Workspaces + Turborepo 管理三個模組，共用 UI 元件庫以 tsup 打包並以 Storybook 獨立部署