專案概覽
MEXAR 國際匯款系統的後台儀表板。以 Next.js、MUI 與 TailwindCSS 打造。透過 API 與核心後端及 KYC 服務整合，以進行資料視覺化呈現。
技術棧
- Frontend — Next.js、MUI、TailwindCSS
- Backend — PHP/Laravel（API）
- Database — PostgreSQL、Redis
存取控制
- 細粒度 ACL — 235 項權限搭配可自訂角色；所有路由預設拒絕（deny-by-default），UI 元件依使用者的權限集合條件式渲染
- 強制 MFA — 所有使用者皆須通過多因子驗證
- 短 Session — 積極的 session 有效期管理，並搭配 GEO 地理位置偵測進行異常監控
安全性
- Cookie 強化 — HttpOnly、Secure、SameSite cookie 屬性
- CSRF 防護 — 基於 token 的跨站請求偽造防護
- IDOR 防護 — 所有受保護資源均實施物件層級授權檢查
- Security Headers — CSP、HSTS、X-Content-Type-Options、Referrer-Policy
工程挑戰
- 規模 — 橫跨整個匯款營運工作流程，包含數以千計的元件與複雜的多步驟表單
- 跨元件狀態管理 — 在深度巢狀且相互依賴的元件間協調狀態，同時維持效能與一致性
設計原則
- Scalability — 為因應日益成長的交易量與營運複雜度而設計
- Extensibility — 模組化的 UI 元件，使得在法規要求演進時得以快速迭代
