どこかで、きっと、また。
- ROLE
- 全端開發工程師
- CLIENT
- Talent Match
- YEAR
- 2024
- ROUTES
- Lazy Domain
- AUTH
- JWT Refresh
- CHAT
- Socket.IO
Overview專案概述
才藝媒合平台聚焦於音樂、藝術、舞蹈等多元才藝領域，強調課程自由度與內容多樣性，讓老師可彈性設計課程、學生能依興趣媒合合適內容。本平台參考語言教學平台設計，並強化課程彈性與自由度，提升整體使用體驗。
前端採用 Angular standalone component 與 lazy-loaded routes，以學生、老師、課程搜尋、購物車等 domain 拆分功能邊界。後端以 Node.js + Express 搭配 MongoDB 實作，支援 Google OAuth、JWT / refresh token、ECPay 金流與 Socket.IO 即時聊天公告。
TECH STACK使用技術
FEATURES產品功能
多元課程查詢與預約
教師自由上架與管理課程
學生課程購買與預約時段管理
即時聊天與公告（Socket.IO）
Google 第三方登入
JWT / Refresh Token 續期
ECPay 金流付款流程
Email 預約通知
Screens產品畫面
01/ 03
首頁Home
My Contribution我負責的事
- 01以 domain-based lazy routes 拆分學生後台、教師後台、課程搜尋與購物車流程。
- 02整合 JWT access token、refresh token 與 Angular interceptor，集中處理登入續期流程。
- 03以 Socket.IO personal room / chat room 建構即時聊天與公告推播。
- 04串接 ECPay 金流完成付款流程。
- 05主導團隊技術整合與開發節奏協調。
Problems & Decisions問題與決策
系統涵蓋學生後台、教師後台、課程搜尋、購物車、預約、付款、即時聊天與公告，因此前端重點不只是頁面完成，而是要讓大型 Angular SPA 在功能邊界、登入續期與即時互動上能維持清楚結構。
CHALLENGES過程中處理的問題
- 01
大型 Angular SPA 需拆分學生、老師、課程、購物車等 domain，避免功能邊界混在同一套路由中。Case 01
- 02
JWT refresh flow 需在安全性、登入體驗與前端狀態複雜度之間取捨。Case 02
- 03
Socket.IO 即時訊息需處理連線生命週期、授權與 room 狀態。Case 03
- 04
規劃團隊功能分工與開發時程，協調進度與人力配置，並因應時程調整進行功能優先順序的取捨與調整。
CASE 01
Angular Lazy Loading + Domain-based Pages
- Finding
- 學生後台、教師後台、課程搜尋與購物車若集中在同一套路由與模組，功能責任不易區分，也難以分開載入。
- Decision
- 採用 Angular standalone component 與延遲載入路由，依學生、教師、課程及購物車拆分頁面，讓各功能能獨立載入與調整。
- Result
- 依學生、教師、課程及購物車拆分頁面，透過延遲載入路由按需載入各功能。
CASE 02
JWT + Refresh Token 登入體驗
- Finding
- 登入權杖到期時，不希望使用者被迫重新登入。但同一頁可能同時發出多個請求，每個請求各自更新權杖，又會造成重複處理。
- Decision
- 以 JWT 與更新權杖維持登入，在 Angular 的請求攔截器集中處理 401。第一個失敗的請求啟動更新，其餘請求等待同一次結果，再繼續原本的操作。
- Result
- 多個請求同時收到 401 時，共用一次權杖更新；更新完成後再恢復原本的 API 請求。
CASE 03
Socket.IO 即時訊息與公告
- Finding
- 聊天與公告需要處理連線授權，並依使用者與聊天房間決定訊息的接收範圍。
- Decision
- 以 Socket.IO 的 personal room 與 chat room 管理聊天與公告推播，並處理連線生命週期、授權與房間狀態。
- Result
- 完成聊天與公告推播，依 personal room 與 chat room 傳送訊息。
NEXT PROJECT下一個專案
客製化 GPT 對話平台
Custom GPT Platform
基於 Nuxt.js 開發的 GPT 對話平台，支援 SSE 串接、逐字輸出、歷史紀錄與對話分享。
