Next.js 台灣前端工程師 | Jacky Yang

Jacky Dev © 2026
Built with Next.js, TypeScript, and an unreasonable amount of debugging.
logo

作品

工作之外動手做的 side project:從串接 TapPay 金流的訂閱結帳,到自己每天在用的求職追蹤工具。

BillingVault 畫面截圖

BillingVault

模擬 SaaS 訂閱結帳,完整串接 TapPay 金流 API(Sandbox 環境)。

Sandbox 測試環境,不會真的扣款。

  • 以 TapPay Fields 取得 Prime 完成卡號 Tokenization,原始卡號不經過自己的伺服器;綁定的卡片再以 Pay by Token 扣款。
  • 訂閱請求附帶冪等鍵,搭配送出鎖定,避免重試或連點造成重複扣款。
  • 以 Supabase SSR 驗證登入狀態,並用 CSP Nonce 與重導向白名單防範注入和 Open Redirect。
  • Next.js
  • TypeScript
  • Supabase
  • Prisma
  • TapPay
Live Demo ↗(另開新分頁)GitHub ↗(另開新分頁)
投遞追蹤 畫面截圖

投遞追蹤

我自己求職時每天在用的投遞紀錄工具,可安裝到手機桌面。

個人使用中的工具,未開放登入,可在 GitHub 查看原始碼。

  • PWA 架構,可安裝到桌面並透過 Service Worker 快取資源。
  • 以看板方式追蹤每筆投遞的進度,一眼看出卡在哪個階段。
  • 從自己的求職痛點出發,邊用邊迭代功能。
  • Next.js
  • TypeScript
  • PWA
  • Google OAuth
GitHub ↗(另開新分頁)