簡爾廷 David Jian

Appearance

RE 紅包 / RE·X 點數魔術師 ​

RE·X 是一個點數回饋平台，我參與產品構思與規劃，負責多個專案的前端與全端開發。

RE·X 官方網站 ​

RE·X 官方形象網站，提供平台介紹、合作店家資訊、聯絡客服等功能

專案時間: 2017 ~ 2026 (已下架) 專案連結: https://myre.life/

技術棧 ​

Nuxt.js@2 (SSR) Vuex Vue-i18n Express.js SCSS TailwindCSS TypeScript VueUse Axios Pino Leaflet

開發內容 ​

擔任主要開發者，負責整體全端（Nuxt2 SSR + Express.js）架構設計與開發

  • 按照設計稿實作 RWD，確保在各種裝置上都有良好體驗
  • 串接後端 API，處理錯誤與 loading 狀態
  • 實作 LRU Cache 快取策略
  • 建立裝置指紋（Fingerprint）識別機制
  • 優化 SSR 效能
    • Bot 偵測與差異化處理
    • Lazy Hydration（延遲水合）優化，提升首屏載入速度
  • 重構日誌系統 Winston → Pino
  • 國際化與 SEO 優化
    • 建立多語系架構
    • 動態 Sitemap 生成與快取機制
    • 社群媒體（Facebook、Instagram、LINE）Deep Link 處理
    • 動態 Meta Tags，用於 SEO 與社群分享

專案截圖 ​

RE·X 官方網站
首頁
首頁 🔍 點擊圖片放大
1 / 3

RE·X BOSS 店家管理系統 ​

合作店家使用的平台，提供店老闆與店員操作； 功能涵蓋交易處理、行銷工具、數據分析等。 專案為 Hybrid App，需處理與 Native App 的互動與溝通。

專案時間: 2017 ~ 2026 (已下架) 專案連結: https://boss.myre.life/

技術棧 ​

Vue.js@2.7 Vue/cli -> Vite Vue-Router Vuex Vue-i18n Express.js SCSS TailwindCSS VueUse Axios D3 PDFmake Sharp Yup

開發內容 ​

次要開發者 -> 主要開發者，接手後負責整體全端（Vue2 + Express.js）架構設計與開發

全端開發（Vue2 + Express.js）

  • 串接後端 API，處理錯誤與 loading 狀態
  • Hybrid App 處理 Web 與 Native App 溝通
  • 建立多語系架構
  • 串接 TapPay、Stripe，支援台灣/新加坡地區付款
  • 用 Sharp、pdfmake 實作圖片生成，提供店家結帳立牌與廣宣品下載
  • 用 D3.js 實作資料視覺化，提供店家交易分析與會員分析等功能
  • 將專案從 Vue/cli 遷移至 Vite，大幅提升專案啟動與熱重載速度

專案截圖 - 核心功能 ​

核心功能
登入
登入 🔍 點擊圖片放大
1 / 5

專案截圖 - 交易與日期選擇 ​

交易與日期選擇
結帳紀錄
結帳紀錄 🔍 點擊圖片放大
1 / 5

專案截圖 - 資料視覺化 ​

D3.js 資料視覺化
會員分析
會員分析 🔍 點擊圖片放大
1 / 5

RE·X 市場開發系統 ​

提供市場開發業務與合作夥伴進行店家開發
支援線上申請店家加入與申請開通藍新金流

專案時間: 2017 ~ 2026 (已下架) 專案連結: https://affiliate.myre.life/

技術棧 ​

Nuxt.js@2 Koa.js Vuex Vue-i18n ElementUI SCSS TailwindCSS Yup Axios Stripe GoogleMapAPI google-cloud/storage

開發內容 ​

擔任主要開發者，負責整體全端（Nuxt2 + Koa.js）架構設計與開發

  • 串接後端 API，處理錯誤與 loading 狀態
  • 建立多語系架構
  • 將專案從 Nuxt1 遷移至 Nuxt2
  • 串接 TapPay、Stripe，支援台灣/新加坡地區付款
  • 設計與實作表單流程引導資料填寫，加速店家導入流程，提升擴展店家數量的效率
    • 多步驟表單
    • 動態欄位顯示與驗證
    • 證件、文件檔案上傳 Google Cloud Storage 與預覽
    • 利用 Google Maps API 抓取店家座標與英文地址自動補全

專案截圖 ​

RE·X 市場開發系統
登入
登入 🔍 點擊圖片放大
1 / 2

RE·X Admin ​

公司內部管理後台，依權限控管提供多部門使用
店家管理、會員管理、開發商管理、客服系統、工作單、會計撥款、發票、官方商城商品管理、交易查詢等

專案時間: 2017 ~ 2026 (已下架)

技術棧 ​

Vue.js@2.7 Nuxt.js@1 -> Vue/cli -> Vite Vue-Router Vuex ElementUI GraphQL / Apollo-Client Express SCSS TailwindCSS CKEditor@4 Axios GoogleMapAPI ESLint Zod

開發內容 ​

擔任主要開發者，負責整體全端（Vue2 + Express.js）架構設計與開發

  • 串接後端 Restful / GraphQL API，處理錯誤與 loading 狀態
  • 將專案從 Nuxt1 遷移至 Vue/cli，再遷移至 Vite，大幅提升專案啟動與熱重載速度
  • 依照各部門需求設計實作表單功能
  • 建立共用組建庫（表單、表格、Modal等），減少重複開發，快速應對各種不同需求的操作

RE·X RD CMS ​

僅供研發部內部使用的內容管理系統
用於維護多種內容/版位模組（如 Banner、首頁版位/版型、活動參數、合作店家、店家列表與店家快取設定等）

專案時間: 2018 ~ 2026 (已下架)

技術棧 ​

Vue.js@2.7 Vue/cli Vue-Router Vuex ElementUI Pug Express SCSS CKEditor@4 Axios GoogleMapAPI

開發內容 ​

擔任次要開發者，負責解決問題與新功能開發

  • 串接後端 API，處理錯誤與 loading 狀態

RE‧X LIFF (LINE Front-end Framework) ​

LINE Front-end Framework（LIFF）可在 LINE App 內直接建立並執行網頁應用程式
實作 RE‧X 官方 LINE@ 入口：查看購物金、掃碼/結帳碼交易等功能
掃碼成功後轉導至 Web SDK，進行後續交易流程

專案時間: 2023 ~ 2026 (已下架) 專案連結: https://liff.line.me/1661236749-klWGZVgB

技術棧 ​

Vue.js@3 VuetifyUI Vite TypeScript Express.js html5-qrcode VueUse Axios Vue-i18n Pinia Vue-Router WindiCSS ESLint

開發內容 ​

擔任主要開發者，負責整體全端（Vue3 + Express.js）架構設計與開發

  • 串接 OPEN API，處理錯誤與 loading 狀態
  • 使用 LINE LIFF SDK 實作會員登入綁定
  • 建立多語系架構
  • 使用 html5-qrcode 實作掃碼功能，提供掃碼交易體驗

專案截圖 ​

RE‧X LIFF
LINE@圖片選單
LINE@圖片選單 🔍 點擊圖片放大
1 / 3

RE‧X Web SDK ​

前端 JavaScript SDK，提供合作廠商在自己的網站或應用程式中整合 RE‧X 的功能。 提供合作廠商（ex: HAPPYGO）與 LINE@ LIFF 掃碼後進行交易

專案時間: 2021 ~ 2026 (已下架)

技術棧 ​

Vue.js@3 VantUI Vite TypeScript Express.js VueUse Axios Vue-i18n Pinia Vue-Router WindiCSS ApplePayJS GooglePayJS ESLint

開發內容 ​

擔任主要開發者，負責整體全端（Vue3 + Express.js）架構設計與開發

  • 串接 OPEN API，處理錯誤與 loading 狀態
  • 建立多語系架構
  • 實作交易流程，提供領紅包、折抵、付款等功能
  • 實作綁定流程，簡訊 OTP 驗證與會員綁定
  • 串接 Apple Pay on Web 與 Google Pay on Web，提供無縫付款體驗

專案截圖 ​

Web SDK 付款流程
交易金額
交易金額 🔍 點擊圖片放大
1 / 9

LINE@ 領紅包流程影片 ​

發起交易流程 ​

HappyGO Portal Web ​

提供 HappyGO App 內「綁卡」與「領紅包」的入口 WebView

專案時間: 2023 ~ 2026 (已下架)

技術棧 ​

Vue.js@3 Vite TypeScript Express.js VueUse Axios Vue-Router TailwindCSS ESLint

開發內容 ​

因舊版本的 Flutter Web (2020~2023) 無法維護

擔任主要開發者，負責以Vue3 + Express.js重構

  • 串接 OPEN API，處理錯誤與 loading 狀態
  • 處理 Hybrid App 與 WebView 的溝通，取得會員 Token 與同步綁定狀態
  • 實作綁卡流程，提供簡訊 OTP 驗證與會員綁定

綁卡 (綁定會員關係) ​

領紅包 ​

後端服務 ​

Check-In Service ​

簽到活動服務
以 RESTful API 風格提供內部其他專案串接使用
排程檢查連續簽到紀錄
排程發出簽到提醒推播

專案時間: 2025 ~ 2026 (已下架)

技術棧 ​

Bun TypeScript Express.js Redis MySQL Pino Axios CronJob ESLint

開發內容 ​

擔任主要開發者，負責整體架構設計與開發

  • 規劃 API 路由與資料庫結構
  • 實作簽到紀錄、連續簽到檢查、簽到提醒等功能
  • 實作排程任務，定期檢查連續簽到紀錄與發出簽到提醒推播

Fami Service ​

全家點數、會員服務
串接全家會員與全家點數平台 API，並記錄請求/回應電文
以 RESTful API 風格提供內部其他專案串接使用

專案時間: 2024 ~ 2026 (已下架)

技術棧 ​

TypeScript Express.js Redis MySQL Pino Axios ESLint

開發內容 ​

擔任主要開發者，負責整體架構設計與開發

  • 規劃 API 路由與資料庫結構
  • 實作串接全家會員與全家點數平台 API 的核心 Service
  • 實作 API 請求/回應電文的記錄

Neweb Merchant Service ​

藍新金流商家服務
串接藍新金流（Neweb）平台商合作商家 API，並接收相關 Webhook
以 RESTful API 風格提供內部其他專案串接使用
串接藍新平台商商店補件：SFTP 上傳與排程拉取回覆檔

專案時間: 2024 ~ 2026 (已下架)

技術棧 ​

TypeScript Express.js Redis MySQL Zod Pino Axios ESLint

開發內容 ​

擔任協作開發者，負責維護與新功能開發

  • 規劃與實作 SFTP 補件與排程拉取回覆檔

POS Service ​

POS（Point of Sale）交易、取消、退款、查詢、帳務等核心服務
以 RESTful API 風格提供對外部的 OPEN API 串接

專案時間: 2025 ~ 2026 (已下架)

技術棧 ​

TypeScript Express.js Redis MySQL DrizzleORM Zod Pino Got ESLint

開發內容 ​

擔任協作開發者，負責取消交易與帳務相關功能的開發

  • 實作取消交易功能
  • 實作帳務相關功能
    • 排程日帳務紀錄生成
    • 排程檢查帳務異常

Vue 組件 ​

TapPay Direct Pay - iFrame ​

串接 TapPay 無跳轉嵌入式信用卡付款
除了自訂樣式外，亦實作 Cardholder 表單
為了支援多個串接 TapPay 的專案，封裝為共用組件並發佈至內部私有 npm

專案時間: 2019 ~ 2026 (已下架)

技術棧 ​

Vue.js@2 TapPay SDK Vue-Class-Component SCSS

專案截圖 ​

TapPay 信用卡組件
信用卡輸入
信用卡輸入 🔍 點擊圖片放大
1 / 2

藍新金流嵌入式信用卡支付 ​

因應支付卡產業資料安全標準協會（PCI Council）規範，藍新要求原本使用「幕後授權」的平台商調整信用卡收款串接方式，改採藍新金流提供的嵌入式信用卡支付
封裝為共用組件，供 RE·X App WebView 與 Web SDK 支付頁面使用

專案時間: 2025 ~ 2026 (已下架)

技術棧 ​

Vue.js@3 TypeScript NewebPay SDK VueUse

專案截圖 ​

藍新金流嵌入式信用卡
信用卡支付
信用卡支付 🔍 點擊圖片放大
1 / 2

抵用券列表、詳情頁面 ​

同時使用於 App WebView 與 LINE@ LIFF 專案
為降低開發與後續維護成本，封裝為共用組件並發佈至內部私有 npm
由於兩個專案分別使用 Vue 2 與 Vue 3，透過 Vue-demi 針對不同版本打包對應產物
因此僅能使用 Vue 2 / Vue 3 皆支援的語法實作

專案時間: 2025 ~

Vue.js@2.7 Vue.js@3 Vue-demi Vite TypeScript TailwindCSS ESLint

抵用券組件
抵用券列表
抵用券列表 🔍 點擊圖片放大
1 / 3

店家資訊 ​

店家資訊內容會在多個專案中重複使用
為避免重複複製貼上並降低後續更新成本
封裝為共用組件並發佈至內部私有 npm

專案時間: 2019 ~ 2026 (已下架)

技術棧 ​

Vue.js@2 Vue/Cli -> Vite Sass -> TailwindCSS TypeScript ESLint

專案截圖 ​

店家資訊組件
資訊頁
資訊頁 🔍 點擊圖片放大
1 / 2

內部工具 ​

藍新金流工具 ​

僅供內部使用，用於快速查詢藍新金流交易
支援針對異常或爭議交易執行取消授權/退款
串接藍新金流 API 的核心 Service 為手寫
UI、API 與整體操作流程由 AI Agent 生成

專案時間: 2025 ~ 2026 (已下架)

技術棧 ​

Bun Nuxt.js@4 NuxtUI TypeScript MySQL DrizzleORM Zod VueUse

專案截圖 ​

藍新金流工具
首頁
首頁 🔍 點擊圖片放大
1 / 4

行銷活動 ​

每日簽到送購物金 ​

提供每日簽到與連續簽到贈送購物金
配合推播引導使用者每日開啟 App

專案時間: 2025 ~ 2026 (已下架)

技術棧 ​

Vue.js@2.7 VueUse Axios TailwindCSS dayjs Vue-i18n

開發內容 ​

擔任主要開發者，負責整體架構設計與開發

  • 串接後端 API，處理錯誤與 loading 狀態
  • 照設計稿切版

專案截圖 ​

每日簽到活動
首頁
首頁 🔍 點擊圖片放大
1 / 4

翻牌送購物金小遊戲 ​

與設計師合作開發 活動已結束，保留核心邏輯供下一檔活動替換素材即可使用

專案時間: 2017~2018
DEMO: https://clipwww.github.io/memory-card-game/

技術棧 ​

TypeScript jQuery SCSS

刮刮樂送購物金小遊戲 ​

與設計師合作開發
活動已結束，保留核心邏輯供下一檔活動替換素材即可使用

專案時間: 2018
DEMO: https://clipwww.github.io/scratchcard-game/

技術棧 ​

TypeScript jQuery SCSS

接粽子送購物金小遊戲 ​

與設計師、前端同事合作開發
活動已結束，保留核心邏輯供下一檔活動替換素材即可使用
第一次使用 PixiJS 製作遊戲，投入時間研究與落地

專案時間: 2019
DEMO: https://clipwww.github.io/catch-game/

技術棧 ​

PixiJS Pixi-Sound TypeScript SCSS

開發內容 ​

負責研究 PixiJS，實作遊戲核心邏輯與動畫

轉盤送購物金小遊戲 ​

與設計師合作開發
活動已結束，僅保留核心邏輯
為了用 CSS Border 做三角形並支援動態改變輪盤數量，重新複習三角函數應用

專案時間: 2019
DEMO: https://clipwww.github.io/lucky-wheel-game/

技術棧 ​

TypeScript SCSS

樂彩券抽購物金小遊戲 ​

與設計師、後端同事合作開發
過年期間提供每天開獎送購物金的活動，消費即可獲得抽獎次數

專案時間: 2020、2023、2024

技術棧 ​

Vue.js@2 TypeScript dayjs VueUse

開發內容 ​

  • 串接後端 API，處理錯誤與 loading 狀態
  • 照設計稿切版

專案截圖 ​

樂彩券活動
活動首頁1
活動首頁1 🔍 點擊圖片放大
1 / 4