EN中文
JH

John Hsieh

資深前端工程師

Singapore

7 年前端開發經驗,曾任職於 TikTok Singapore 與 LINE Taiwan 擔任資深軟體工程師。常用技術架構為 React (NextJS)、Vue (NuxtJS) 及 TypeScript。我的核心價值觀是「使用者體驗至上」,使命不是做出一個產品,而是做出一個「好用」、「美觀」的軟體產品。具備在資源有限環境下從零規劃到產品上線的能力,也能在大型企業嚴謹環境中開發高品質程式。流利使用英、日、中三種語言。熟悉敏捷開發與可持續的團隊迭代交付模式,擅長與他人合作及與非技術人員溝通。擅長將複雜問題用簡單的方式解釋。

TikTok Singapore / LINE Taiwan — 跨國產品開發經驗
0

年前端經驗

0

個完整產品

0

人團隊管理

0

種語言能力

工作經歷
  • TikTok Singapore

    Software Engineer

    TikTok Singapore

    • 隸屬 User Growth 團隊,負責投放公司產品廣告到各大 DSP 平台,以增加 TikTok 等 APP 的用戶數量。
    • 負責廣告投放的財務結算系統開發,技術棧為 React、monorepo 與公司自研框架架設的前端微服務系統。
    • 帶領開發團隊導入 Scrum,利用 retrospective 建立團隊自我糾錯機制,利用 refinement 解決成員各自為政的問題,並平衡工作量與提升 PM 對時程的掌握度。


  • LINE Taiwan

    Software Engineer

    LINE Taiwan

    • 日常開發 LINE 購物,技術棧 Vue SSR + GraphQL + TypeScript + ExpressJS。
    • 擔任 Team Leader 帶領 4 人團隊,主導 CMS 從 PHP 重構至 NextJS app router 架構。
    • 參與 JSTF 制定全公司前端開發準則,導入 Lighthouse CI 自動化效能評量。
    • 擔任 Mentor 指導 2 位新人,獲得正向回饋。主導內部 NextJS 教學論壇,引導新人上手。


  • AI.Book 愛相簿

    Frontend Engineer (契約合作)

    AI.Book 愛相簿

    • 獨自負責開發線上相片書編輯器,支援拖曳、尺寸調整、文字編輯等功能。
    • 從零規劃技術架構,使用 Vue + NuxtJS,6 個月內完成產品上線。
    • 支援 PWA 安裝,提供類原生 APP 的體驗。


  • FundFluent

    Frontend Engineer (契約合作)

    FundFluent

    • 公司初創期即加入,從零規劃前端架構與技術選型。
    • 使用 React / NextJS + TypeScript + TailwindCSS 開發面向香港市場的中小企貸款平台。
    • 規劃跨專案共用 UI 組件庫(Stencil.js Web Component),部署到 private NPM。


  • FoxitSoftware

    Full-Stack Engineer

    FoxitSoftware

    • 在 AI 新團隊中擔任全端工程師,管理前端團隊 2 人。
    • 開發整合內部 AI 微服務的 2B 管理平台。
    • 技術棧涵蓋 NuxtJS / NextJS + TypeScript + MongoDB + Redis。


  • 電獺 Aotter

    Frontend Engineer

    電獺 Aotter

    • 專案導向團隊,每項專案配置約 4 人,快速迭代產品。
    • 使用 Nuxt 生態系 + TypeScript + TailwindCSS,搭配 Docker + K8s CI/CD 流程。
    • 開發 SuprLink 縮網址服務、Aotter Trek DSP 廣告平台等自有及外部專案。
    • 注重 UI/UX 設計還原度,為每個專案量身訂做 TailwindCSS 小型 UI 框架。


  • 第三緯度科技

    Frontend Engineer

    第三緯度科技

    • 使用 Vue + PHP 前後端分離架構開發。
    • 串接微信支付金流系統。


  • 日商優橋

    數位廣告優化師 & Frontend Engineer

    日商優橋

    • 初期擔任數位廣告優化師,管理 Facebook / Google Ads,運用 A/B testing 與 Heatmap 優化 UX。
    • 後期轉任前端工程師兼 PM,為代理產品架設官方網站與活動頁面。
    • 管理前端團隊 2 人,使用日文作為主要工作語言。
    • 建立 UI/UX 素養,對前端開發生涯奠定基礎。


  • 亞洲遊

    日本市場業務及營運

    亞洲遊

    • 負責接洽日本旅宿房源並協助上架到公司平台。
    • 擔任對日翻譯窗口,協助消費者排除旅日中緊急狀況。
    • 2017 年度預約筆數達 8,846,與前年比成長 376%。
專案介紹
18 個代表性專案,展示產品影響力與技術棧。
Lazy CV - 1
Lazy CV - 2
Lazy CV - 3
Lazy CV - 4
Lazy CV - 5

Lazy CV

AI 驅動的客製化履歷生成系統。結合 AI Agent 與 Next.js 16,只需提供職缺連結即可自動抓取 JD 並生成量身定做的中英文雙語履歷網頁。整個專案從零到上線僅花費 2 天,全程透過 Vibe Coding 完成。本履歷就是用此專案自動生成的。

技術亮點

  • Next.js 16 App Router + Standalone Output,採用輕量 Docker Image 打包
  • AI Agent 自動化 SOP:透過 Chrome DevTools MCP 自動爬取 JD,實現端到端履歷生成流程
  • Serverless 部署架構:ECR → Lambda Web Adapter,S3 + CloudFront CDN,GitHub Actions CI/CD
  • Neon Serverless PostgreSQL + Drizzle ORM 實現 type-safe 資料存取
  • TailwindCSS 4 + Framer Motion 響應式設計搭配流暢動畫
Next.js 16TypeScriptTailwindCSS 4Drizzle ORMNeon PostgreSQLAWS LambdaFramer Motion
UG 海外增長業務平台 - 1
UG 海外增長業務平台 - 2
UG 海外增長業務平台 - 3

UG 海外增長業務平台

大型企業級 Monorepo 前端專案,服務 TikTok 線上廣告海外增長業務線,涵蓋媒體資產管理、財務結算、供應商採購、數據看板等多個業務領域,管理 50+ 子專案,百萬級程式碼規模。

技術亮點

  • 基於 JSON Schema 動態表單渲染的複雜表單互動元件開發,涵蓋級聯選擇、動態欄位、條件顯示等場景
  • 針對財務、報價等場景的 JavaScript 浮點數精度問題,實作高精度數值計算方案
  • 透過自研框架實現子應用動態載入的微前端整合,支援按需載入業務模組與獨立開發部署
  • 採用 Ferry + Thrift IDL 生成強型別 Service 程式碼,保障前後端協議一致性
  • 透過自研線上翻譯平台在 runtime 獲取最新翻譯檔,實現多語系支援與動態更新

重大貢獻

  • Web Worker 多線程 CSV 校驗:將校驗工作轉移到單獨執行緒,使用 Comlink 實現類 RPC 通訊,搭配 Yup + Regex Schema —— 在 10 筆資料中減少 90% UI 卡頓時間
  • 函數快取工具優化渲染效能:模仿 React useMemo 建立 cache/cacheMany 工具快取計算結果 —— 在一個沒有做分頁、一次渲染 500 個表單 UI 的介面中降低 98% Total Blocking Time (TBT)
React 17TypeScriptRush MonorepoArco DesignEChartsJest
LINE 購物 - 1
LINE 購物 - 2
LINE 購物 - 3
LINE 購物 - 4

LINE 購物

LINE 導購服務,經由 LINE 購物外連到合作夥伴商家消費可獲 LINE 點數回饋。

重大貢獻

  • 獨自開發「直播購物」功能:參考 YouTube 影片流自動預覽機制,設計了一套可覆用影片自動預覽模組,透過全局調度器解決高速捲動下影片預覽混亂單頁面過多直播源造成記憶體暴增的技術難點
Vue SSRGraphQLTypeScriptExpressJSSASS
CMS 重構 NextJS - 1
CMS 重構 NextJS - 2

CMS 重構 NextJS

主導將 PHP 架構的 LINE 購物 CMS 重構為 React & NextJS app router 架構,帶領 4 人團隊完成前後端分離。這也是少數幾個在 LINE Taiwan 中實際採用 NextJS app router 的早期專案之一。

技術亮點

  • 使用 iframe 實現微服務,新老專案可獨立佈署與上線,可透過 URL 漸進式將老專案切換至新專案
  • 公司早期採用 Next APP router 的專案之一

重大貢獻

  • 除了寫程式外,還擔任架構師規畫整個專案,同時兼任 PM 角色——分派工作、撰寫技術文件、與使用者溝通
ReactNextJSApp RouterTypeScript
AI.Book 相簿編輯器 - 1
AI.Book 相簿編輯器 - 2

AI.Book 相簿編輯器

線上相片書編輯器,支援照片拖曳/尺寸調整/文字編輯,跨平台支援含 PWA 安裝體驗。從零規劃到上線僅 6 個月。

技術亮點

  • 用純 Vue 搭建客製化編輯器,支援加入/移除照片、文字輸入及字型字體大小編輯
  • 編輯器支援網頁端與手機端編輯
  • 支援安裝 PWA 達到類原生 APP 的體驗

重大貢獻

  • 從零開始單獨開發
VueNuxtJSPWAIndexedDB
FundFluent UI Kit Library

FundFluent UI Kit Library

跨專案共用 UI 組件平台,使用 Web Component(Stencil.js)打造不受框架限制的組件庫,整合 TailwindCSS + Semantic UI 並以 Storybook 作文件。

技術亮點

  • UI 組件使用 Stencil 搭建 web components,不受前端框架限制
  • 透過 Tailwind + Semantic UI 構建 design system
  • 透過 StoryBook 展示組件,方便與設計師溝通確認
  • 使用 monorepo 區分組件庫與業務程式,組件庫可單獨發布測試

重大貢獻

  • 從零開始單獨開發
Stencil.jsWeb ComponentTailwindCSSStorybook
SuprLink 超級連結

SuprLink 超級連結

從 A/B 分流到數據分析,再到廣告投放一氣呵成的縮網址服務。

NuxtJSTypeScriptTailwindCSSDockerK8s
Aotter Trek DSP 平台

Aotter Trek DSP 平台

結合大數據分析的廣告投放 DSP 平台,使用大量圖表介面為使用者找出最適合的廣告 TA。

NuxtJSTypeScriptChart.jsSASS
JavaScript Task Force

JavaScript Task Force

LINE Taiwan 跨團隊專案小組,負責制定全公司前端開發準則。研究導入 SonarQube、Lighthouse CI、OpenTel 前端監控、React 專案 template 生成器等。

SonarQubeLighthouse CIOpenTelReact
FundFluent SME Portal

FundFluent SME Portal

面向香港中小企業的整合貸款平台,提供銀行與政府貸款資訊、一站式申請,並透過 OCR 技術整理文件以降低重複提交成本。

重大貢獻

  • 從零開始單獨開發
ReactNextJSTypeScriptTailwindCSS
FundFluent Partner Portal

FundFluent Partner Portal

面向銀行等放貸方的管理平台,可上架、整理各項貸款專案,以及審核來自中小企的申請案件。

重大貢獻

  • 從零開始單獨開發
ReactNextJSTypeScriptSemantic UI
Chrome Extension - SuprLink

Chrome Extension - SuprLink

快速在 SuprLink 超級連結產生縮網址的 Chrome 擴充工具。

Chrome ExtensionJavaScript
資策會 城市儀表板

資策會 城市儀表板

收集分散各地的政府數據於同一平台展示的政府資料數據庫,具備可高度客製化的圖表及資料篩選模組。

NuxtJSTypeScriptChart.jsTailwindCSS
beanfun! 數據管理中心

beanfun! 數據管理中心

擁有各種圖表的集中數據 Dashboard,用以顯示企業內部各項指標。

NuxtJSTypeScriptChart.jsSASS
咻咻漫畫

咻咻漫畫

使用 Vue + PHP 前後端分離架構開發的線上漫畫平台,串接微信支付金流系統。

VuePHPWeChat Pay
俏樂斯 官方網站

俏樂斯 官方網站

日本沖繩保養品俏樂斯的台灣官方網站,負責設計規劃與前端開發。

PHPjQueryCSS
髮樂活

髮樂活

美髮保養的內容型自媒體網站。

WordPressPHPCSS
日本嚴選

日本嚴選

專接業配的日系產品推薦部落格。

WordPressPHPCSS
技術棧可視化
核心技術與周邊能力的連結關係圖。
TypeScript
React
NextJS
Vue
NuxtJS
GraphQL
Socket.io
前端 JS 框架與工具
Jest
Cypress
Webpack
Storybook
Firebase
i18n
Lodash
Sass / Scss
TailwindCSS
Bootstrap
ElementUI
Buefy
前端 CSS 框架
Vuetify
BEM
CSS Variable
Media Query
Service Worker
Workbox
web-push
PWA
IndexedDB
Cache Storage
Navigator API
Shadow DOM
StencilJS
微服務 & Web Component
Web Socket
Quill
Express
Socket.io
MongoDB
Mongoose
後端框架 & 資料庫
EJS
Swagger
GraphQL
技能關鍵字
TypeScriptReactNext.jsVueNuxtJSGraphQLTailwindCSSSass / SCSSNode.jsExpress
TypeScriptReactNext.jsVueNuxtJSGraphQLTailwindCSSSass / SCSSNode.jsExpress
TypeScriptReactNext.jsVueNuxtJSGraphQLTailwindCSSSass / SCSSNode.jsExpress
TypeScriptReactNext.jsVueNuxtJSGraphQLTailwindCSSSass / SCSSNode.jsExpress
MongoDBPostgreSQLDockerKubernetesCI/CDJestCypressFirebaseStorybookWebpack
MongoDBPostgreSQLDockerKubernetesCI/CDJestCypressFirebaseStorybookWebpack
MongoDBPostgreSQLDockerKubernetesCI/CDJestCypressFirebaseStorybookWebpack
MongoDBPostgreSQLDockerKubernetesCI/CDJestCypressFirebaseStorybookWebpack
Web ComponentStencilJSPWASocket.ioi18nGitREST APISEOLighthouseRenovate
Web ComponentStencilJSPWASocket.ioi18nGitREST APISEOLighthouseRenovate
Web ComponentStencilJSPWASocket.ioi18nGitREST APISEOLighthouseRenovate
Web ComponentStencilJSPWASocket.ioi18nGitREST APISEOLighthouseRenovate
AxiosEChartsD3.jsFramer MotionDrizzle ORMRush MonorepoArco DesignWeb WorkerReact Hook FormYup
AxiosEChartsD3.jsFramer MotionDrizzle ORMRush MonorepoArco DesignWeb WorkerReact Hook FormYup
AxiosEChartsD3.jsFramer MotionDrizzle ORMRush MonorepoArco DesignWeb WorkerReact Hook FormYup
AxiosEChartsD3.jsFramer MotionDrizzle ORMRush MonorepoArco DesignWeb WorkerReact Hook FormYup
學歷與證書

學歷

學校學位 / 性質期間
東吳大學文學士 (BA) — 日本語文學系2013 - 2017
京都同志社大學交換留學 — 日本語及文化2016.03 - 2016.08

證書與認證

日文檢定 JLPT N1

日文檢定 JLPT N1

最高級認證 — 商業會談程度

台大資訊推廣部

網頁開發技術課程

語言能力

中文 — 母語日文 — 商業會談 (JLPT N1)英文 — 流暢職場溝通