3. 前端製作

前端工程主要負責將 UI 設計視覺化為可操作的網頁介面，實作整體使用流程與動態互動體驗。本專案採用 React + TypeScript 技術棧，並整合 QR 掃碼模組、LINE Bot 導流與金流畫面，串接後端 API 完成三端角色的任務管理與即時狀態回饋，確保用戶操作流暢、資料即時、流程清晰。

🔗 Link To ▶︎ 前端Github Repo

分類	說明
使用技術	React、TypeScript、Vite、Styled-Components
使用工具	Cursor、GitHub、Postman、Vercel
實作內容	負責整體畫面切版與 UI 邏輯串接，包含訂閱流程、任務追蹤、掃碼驗證、付款介面與後台派單等模組
串接項目	QR Code 掃碼模組、LINE Bot 導入導流、金流付款畫面與 API 串接
技術亮點	採用響應式設計、動靜態進度條切換、整合 QR 掃碼與 LINE 使用體驗
協作挑戰	初期 API 欄位不一致、資料格式不統一，需主動測試與溝通確認
解決方案	利用 Postman 建立測試流程、UI 端補齊樣式規範，建立 Style Guide 提升效率