React.js、Next.js、TypeScript、Mantine UI、TanStack Query、Zustand 獨立負責 Gate.io 7個返佣業務，包含三個返佣管理後台、兩個返佣 WebView H5、一個 web3 推廣、一個 Referral 推廣。 基於 Mantine UI 封裝公司內部組件庫 Gate UI 基於 Sentry 監控網頁的性能及錯誤 基於 Jenkins 部署 Next.js 項目 將 jquery、qiankun 微前端項目遷移至 Next.js 使用 TanStack Query 緩存請求過的 API 數據，避免發出重複的網路請求，同時也加速數據可視化的載入速度 使用 Zustand 管理客戶端的狀態 整合 MetaMask 錢包登入

二次封裝 Highcharts 組件，傳入對應的配置項就能快速的產出符合 UI 畫面的圖表。 後端傳回來的數據格式不會符合 Highcharts 的規範，客製化一個 hook ，快速產生出符合要求的數據格式。 參考 React Material UI 組件庫，封裝數十個通用組件，並用 Storybook 管理組件。 將客製化的 Table 組件，結合虛擬列表功能，對後端返回的大量數據進行渲染優化。 使用 RTK query 緩存請求過的 API 數據，避免發出重複的網路請求，同時也加速數據可視化的載入速度。 整合 Lighthouse-CI 與 GitHub Action 進行性能監控，每一次 commit 時，都能檢測出性能指標分數的變化。 整合 MSW(Mock Service Worker)，當性能指標分數下降時，透過 MSW 檢測下降的原因是不是 API 回應速度變慢所造成。 通過 Webpack Bundle Analyzer，對體積過大的模塊進行優化，拆出第三方模塊進行構建緩存。 結合 Google Analytics 追蹤流量監控，訪問率不高的頁面採用異步加載，減少 bundle 的大小。 整合 Firebase Auth SDK。

1). 負責會員模組，例如註冊、登入(帳戶、email、手機)、忘記密碼、SMS 驗證、會員資訊等功能。 使用 React Hook Form 將功能封裝成業務組件，同仁可在負責的頁面上直接呈現會員模組畫面，不需要額外調整。 2). 封裝 Auth sdk，對外暴露登入、登出、註冊等功能，結合 React.Context 儲存全局用戶資訊，方便同仁使用。 3). 搭建 webp 轉換的自動化工具，將 UI 產生的圖轉換成 webp 格式，減少圖片大小。 4). 封裝 WebSocket Context 在需要建立 WS 的頁面使用 useEffect，首次渲染之後建立連線，組件銷毀時關閉連線。Conext Provider 會提供一個 connect 函數和 close 函數。 5). 通過 webpack 打包分析工具發現紅包雨動畫的模塊相當肥大，對其進行優化。將圖片進行壓縮並轉成 webp 格式，動畫改以 transform 進行，避免瀏覽器回流 6). 使用 Canvas 封裝滑動拼圖驗證碼。

對常用的 Ant Design 組件進行二次封裝，將封裝過後的組件庫上傳到 gitlab 進行託管。每一個項目直接在 npm 指令上拉取這個組件庫進行開發。 對 axios 進行二次封裝，在攔截器內捕獲 api 錯誤後，全局彈出錯誤訊息。

1). Node.js 串接藍新金流，提供 ATM、轉帳、超商等第三方支付方式。 2). 開發帶有 debounce 功能的股票搜尋組件，減少 API 請求頻率。 3). Node.js 串接 firebase-admin SDK，完成會員系統和 Google 登入功能。 4). 亂數產生序號，每一筆序號會用 Date.now() 得出當下的產生時間，以及序號的過期時間。使用者只能在有效期間內使用股票搜尋功能。