EN中文
JH

John Hsieh

資深前端工程師

Singapore

7 年前端開發經驗，曾任職於 TikTok Singapore 與 LINE Taiwan，擔任資深軟體工程師。核心技術棧為 React (Next.js)、Vue (Nuxt.js) 與 TypeScript，橫跨資源有限的早期新創與嚴謹的大型企業環境：能從零規劃產品架構，也能在大型團隊中交付高品質程式碼，並始終在意軟體是否好用、體驗是否流暢。已將 AI 工具深度整合進日常開發流程，運用 GitHub Copilot Agent Mode、MCP 與 n8n 建立端到端的自動化 SOP，並具備 LLM API 串接與向量資料庫（RAG）開發經驗。流利使用英、日、中三種語言，熟悉敏捷開發與跨職能協作，能有效與非技術利害關係人溝通。

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

年前端經驗

0

個完整產品

0

人團隊管理

0

種語言能力

工作經歷
  • TikTok Singapore

    Software Engineer

    TikTok Singapore

    • 為 User Growth 團隊打造廣告投放前端系統，透過各大 DSP 平台為 TikTok 及旗下產品推動海外用戶增長
    • 在 50+ 子專案、百萬級程式碼規模的 monorepo 中主導廣告投放財務結算系統開發，技術棧為 React 17、TypeScript、Rush Monorepo 與公司自研微前端框架
    • 將 CSV 校驗邏輯透過 Comlink RPC 轉移至 Web Worker 執行，搭配 Yup 與 Regex 驗證規則，在 10 筆資料的填寫流程中減少 90% UI 卡頓時間
    • 打造模仿 React useMemo 的 cache/cacheMany 快取工具，在一次渲染 500 個表單的介面上降低 98% Total Blocking Time (TBT)
    • 帶領開發團隊導入 Scrum，透過 retrospective 建立團隊自我糾錯機制、以 refinement 解決成員各自為政問題，並平衡工作量、提升 PM 對時程的掌握度
  • LINE Taiwan

    Software Engineer

    LINE Taiwan

    • 開發並維護 LINE 購物（LINE 電商導購平台），技術棧為 Vue SSR、GraphQL、TypeScript 與 ExpressJS——獨立開發「直播購物」影片自動預覽模組，透過全局調度器解決高速捲動時的預覽混亂與多直播源並發造成的記憶體暴增問題
    • 帶領 4 人團隊主導 CMS 從 PHP 重構至 NextJS App Router 架構，達成前後端完全分離
    • 投入 JSTF 跨團隊小組，制定全公司前端開發準則，並導入 Lighthouse CI 自動化效能評量
    • 指導 2 位新進工程師並獲得正向回饋，同時主導內部 NextJS 教學論壇，加速新人上手
  • AI.Book 愛相簿

    Frontend Engineer (契約合作)

    AI.Book 愛相簿

    • 獨自開發線上相片書編輯器，支援拖拉排版、尺寸調整、文字編輯等功能
    • 從零規劃技術架構，使用 Vue + NuxtJS，6 個月內完成產品上線
    • 主導後端 API 設計，涵蓋 AWS Cognito OAuth2 登入、購物車與訂單流程、金流結果串接
  • FundFluent

    Frontend Engineer (契約合作)

    FundFluent

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

    Full-Stack Engineer

    FoxitSoftware

    • 管理 2 人前端團隊，於新成立的 AI 團隊中擔任全端工程師
    • 開發整合內部 AI 微服務的 2B 管理平台，技術棧涵蓋 NuxtJS/NextJS、TypeScript、MongoDB 與 Redis
  • 電獺 Aotter

    Frontend Engineer

    電獺 Aotter

    • 於約 4 人的專案導向團隊中快速迭代產品交付
    • 開發 SuprLink 縮網址服務、Aotter Trek DSP 廣告平台等自有及外部專案，技術棧為 Nuxt 生態系、TypeScript、TailwindCSS，搭配 Docker 與 K8s CI/CD 流程
    • 為每個專案量身訂做 TailwindCSS 小型 UI 框架，維持高度 UI/UX 設計還原度
  • 第三緯度科技

    Frontend Engineer

    第三緯度科技

    • 為咻咻漫畫（線上漫畫平台）建構 Vue + PHP 前後端分離架構
    • 串接微信支付金流系統，支援線上交易
  • 日商優橋

    數位廣告優化師 & Frontend Engineer

    日商優橋

    • 管理 Facebook / Google Ads 廣告投放，運用 A/B Testing 與 Heatmap 分析優化 UX，擔任數位廣告優化師
    • 轉任前端工程師兼 PM，為代理品牌架設官方網站與活動頁面，包含俏樂斯（保養品牌）、髮樂活與日本嚴選
    • 管理前端團隊 2 人，使用日文作為主要工作語言
  • 亞洲遊

    日本市場業務及營運

    亞洲遊

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

個人專案

(3)
TWSG 視頻加速 for Bilibili（非官方） - 1
TWSG 視頻加速 for Bilibili（非官方） - 2
TWSG 視頻加速 for Bilibili（非官方） - 3
TWSG 視頻加速 for Bilibili（非官方） - 4
TWSG 視頻加速 for Bilibili（非官方） - 5
TWSG 視頻加速 for Bilibili（非官方） - 6

TWSG 視頻加速 for Bilibili（非官方） ↗

一款讓台灣／新加坡使用者觀看網頁版 Bilibili 更順暢的 Chrome / Edge / Firefox 瀏覽器擴充套件，動態將影片 CDN host 重排為當地最快節點，並具備自動 fallback 機制。從技術架構、開發到上架與維護皆為個人獨立完成。

Chrome Extension Manifest V3Vanilla JavaScript (ES6+)chrome.storagechrome.i18nContent Scripts (MAIN world / ISOLATED world)fetch / XMLHttpRequest hookNode.jsJSZipPuppeteerSharp
AI 擬人對話機器人 - 1
AI 擬人對話機器人 - 2

AI 擬人對話機器人

以大語言模型與 n8n 工作流自動化為基底，透過 LINE Messaging API 打造寵物擬人化 AI 聊天機器人。具備多輪對話記憶、圖片/語音理解（多模態）、長期記憶（向量資料庫 RAG）等功能，並可根據不同場景快速切換人格設定。

n8nGemini APILINE Messaging APIDockerVPSEmbedding
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 完成。本履歷就是用此專案自動生成的。

TypeScriptNext.js 16 (App Router)React 19TailwindCSS 4daisyUIFramer Motion (motion)tw-animate-cssRadix UI@base-ui/reactshadcncmdklucide-reactreact-iconsembla-carousel-reactreact-day-pickervaulsonnercobeNeon Serverless PostgreSQLDrizzle ORMdrizzle-zodZodjose (JWT)bcryptjspdf-libjsPDFhtml-to-imageAWS SDK (S3, Lambda)AWS Lambda Web AdapterDockerPlaywrightESLintPrettiertsxDrizzle Kit

公司專案

(17)
UG 海外增長業務平台 - 1
UG 海外增長業務平台 - 2
UG 海外增長業務平台 - 3
TikTok SingaporeTikTok Singapore

UG 海外增長業務平台

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

React 17TypeScriptRush MonorepoArco DesignEChartsJest
LINE 購物 - 1
LINE 購物 - 2
LINE 購物 - 3
LINE 購物 - 4
LINE TaiwanLINE Taiwan

LINE 購物 ↗

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

JavaScript (ES6+)Vue 2Vue Router 3Vue SSR (vue-server-renderer)Vuex 3vuex-router-syncTypeScriptNode.jsExpressGraphQL (Apollo Server Express)DataLoaderRedis (ioredis)OAuth2SASSPostCSSWorkboxSentryFirebase (FCM)Jest@vue/test-utilsStorybookWebpack 4BabelDockerDrone CISonarQubeLighthouse CI
CMS 重構 NextJS - 1
CMS 重構 NextJS - 2
LINE TaiwanLINE Taiwan

CMS 重構 NextJS

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

ReactNextJSApp RouterTypeScript
AI.Book 相簿編輯器 - 1
AI.Book 相簿編輯器 - 2
AI.Book 愛相簿AI.Book 愛相簿

AI.Book 相簿編輯器

線上相片書編輯器，支援拖拉排版加入/移除照片、文字編輯，並可從 Google 相簿／Instagram 匯入相片。從零規劃到上線僅 6 個月。

TypeScriptVue 2Nuxt 2 (SPA)nuxt-property-decoratorVuexSCSS/SassTailwindCSSElement UIvuedraggablevue-drag-dropcropperjsflipbook-vuevee-validatelottie-webAxios@nuxtjs/auth-nextAWS Cognito OAuth2Google OAuthInstagram Graph API OAuthNuxt build (Webpack)GitHub ActionsAWS S3CloudFrontSwagger/OpenAPI
FundFluent UI Kit Library
FundFluentFundFluent

FundFluent UI Kit Library

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

TypeScriptStencil.js (Web Components)Lit-htmlTailwindCSSFomantic UISass/LessPostCSSGulpStorybook
SuprLink 超級連結
電獺 Aotter電獺 Aotter

SuprLink 超級連結 ↗

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

TypeScriptNuxt.js 2 (SSR)Vue 2nuxt-property-decoratorNuxt PWAVuexvuex-map-fieldsChart.jsvue-chartjsGoogle ChartsTailwindCSSBuefySassAxiosExpressMongoDBGoogle APIsJestTestCafeAzure PipelinesDockerPM2Kubernetes
Aotter Trek DSP 平台
電獺 Aotter電獺 Aotter

Aotter Trek DSP 平台 ↗

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

Vue 2VuexjQueryNuxt.js 2TypeScriptExpressMongoDBpost-robotEventEmitter3Chart.jsvue-chartjsGoogle ChartsBootstrap 4SCSS/LESSElement UIAxiosJestKarmaJasmineDockerDocker Compose
JavaScript Task Force
LINE TaiwanLINE Taiwan

JavaScript Task Force

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

TypeScriptNode.js CLI (yargs, prompts)@vercel/nccNext.jsSentryLighthouse CISCSSJestTesting LibraryESLintStylelintPrettierHuskylint-stagedDrone CISonarQube
FundFluent SME Portal
FundFluentFundFluent

FundFluent SME Portal ↗

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

TypeScriptReact 17Next.js 12React ContextuseReducerTailwindCSSSemantic UI ReactSassReact Hook FormYupnext-i18nextBitbucket PipelinesDockerGCP Artifact RegistryGKE
FundFluent Partner Portal
FundFluentFundFluent

FundFluent Partner Portal ↗

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

TypeScriptReact 17Next.js 12MobXmobx-reactTailwindCSSFomantic UISassReact Hook FormYupnext-translateBitbucket PipelinesDockerGCP Artifact RegistryGKE
Chrome Extension - SuprLink
電獺 Aotter電獺 Aotter

Chrome Extension - SuprLink

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

Vue 2 (Options API)Vue RouterWebExtension APIVuexTailwindCSSPostCSSAxiosWebpack 4Babel
資策會 城市儀表板
電獺 Aotter電獺 Aotter

資策會 城市儀表板

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

Vue 2Chart.jsvue-chartjsD3.jsTopojsonGoogle MapsmarkerclustererHandsontableBootstrap-VueElement UImdbvueAxiosjQuery
beanfun! 數據管理中心
電獺 Aotter電獺 Aotter

beanfun! 數據管理中心

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

Nuxt.js 2 (SPA)Vue 2VuetifyVuexChart.jsvue-chartjsCountUp.jsVueWordCloudStylusSassAxiosExpressgRPCMongoDB (Mongoose)JWT/JWKSGoogle Maps APIDockerAzure Kubernetes Service (AKS)
咻咻漫畫
第三緯度科技第三緯度科技

咻咻漫畫

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

VuePHPWeChat Pay
俏樂斯 官方網站
日商優橋日商優橋

俏樂斯 官方網站

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

PHPjQueryCSS
髮樂活
日商優橋日商優橋

髮樂活

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

WordPressPHPCSS
日本嚴選
日商優橋日商優橋

日本嚴選

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

WordPressPHPCSS
技術棧可視化
核心技術與周邊能力的連結關係圖。
GitHub Copilot
n8n
Prompt Engineering
MCP
AI Agent
AI 開發 & 工具
Vibe Coding
Gemini API
Claude API
RAG
Tool Call
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
MongoDBPostgreSQLRedisDockerKubernetesGitHub ActionsFirebaseAWSDrizzle ORMMongoose
MongoDBPostgreSQLRedisDockerKubernetesGitHub ActionsFirebaseAWSDrizzle ORMMongoose
MongoDBPostgreSQLRedisDockerKubernetesGitHub ActionsFirebaseAWSDrizzle ORMMongoose
MongoDBPostgreSQLRedisDockerKubernetesGitHub ActionsFirebaseAWSDrizzle ORMMongoose
JestCypressStorybookWebpackViteGitLighthouseRenovatepnpmESLint
JestCypressStorybookWebpackViteGitLighthouseRenovatepnpmESLint
JestCypressStorybookWebpackViteGitLighthouseRenovatepnpmESLint
JestCypressStorybookWebpackViteGitLighthouseRenovatepnpmESLint
AxiosEChartsChart.jsFramer MotionReact Hook FormYupLodashi18nArco DesignRush Monorepo
AxiosEChartsChart.jsFramer MotionReact Hook FormYupLodashi18nArco DesignRush Monorepo
AxiosEChartsChart.jsFramer MotionReact Hook FormYupLodashi18nArco DesignRush Monorepo
AxiosEChartsChart.jsFramer MotionReact Hook FormYupLodashi18nArco DesignRush Monorepo
Claude CodeGitHub CopilotCursorn8nPrompt EngineeringMCPAI AgentVibe CodingClaude APIGemini APIRAG
Claude CodeGitHub CopilotCursorn8nPrompt EngineeringMCPAI AgentVibe CodingClaude APIGemini APIRAG
Claude CodeGitHub CopilotCursorn8nPrompt EngineeringMCPAI AgentVibe CodingClaude APIGemini APIRAG
Claude CodeGitHub CopilotCursorn8nPrompt EngineeringMCPAI AgentVibe CodingClaude APIGemini APIRAG
Web WorkerComlinkService WorkerIndexedDBStencilJSShadow DOMSocket.ioPWAWeb SocketREST API
Web WorkerComlinkService WorkerIndexedDBStencilJSShadow DOMSocket.ioPWAWeb SocketREST API
Web WorkerComlinkService WorkerIndexedDBStencilJSShadow DOMSocket.ioPWAWeb SocketREST API
Web WorkerComlinkService WorkerIndexedDBStencilJSShadow DOMSocket.ioPWAWeb SocketREST API
BootstrapElementUIBuefyVuetifyCSS ModulesLessBEMVuexVue RouterMobX
BootstrapElementUIBuefyVuetifyCSS ModulesLessBEMVuexVue RouterMobX
BootstrapElementUIBuefyVuetifyCSS ModulesLessBEMVuexVue RouterMobX
BootstrapElementUIBuefyVuetifyCSS ModulesLessBEMVuexVue RouterMobX
HTMLJavaScriptjQuerynpmSDDOpenAI APIVuelidateVeeValidateQuillD3.js
HTMLJavaScriptjQuerynpmSDDOpenAI APIVuelidateVeeValidateQuillD3.js
HTMLJavaScriptjQuerynpmSDDOpenAI APIVuelidateVeeValidateQuillD3.js
HTMLJavaScriptjQuerynpmSDDOpenAI APIVuelidateVeeValidateQuillD3.js
CSSCSS variableMedia queryCache StorageWorkboxweb-pushNavigator APIEJSSwaggermustache
CSSCSS variableMedia queryCache StorageWorkboxweb-pushNavigator APIEJSSwaggermustache
CSSCSS variableMedia queryCache StorageWorkboxweb-pushNavigator APIEJSSwaggermustache
CSSCSS variableMedia queryCache StorageWorkboxweb-pushNavigator APIEJSSwaggermustache
Chrome ExtensionManifest V3PuppeteerVert.xWeb Extension API
Chrome ExtensionManifest V3PuppeteerVert.xWeb Extension API
Chrome ExtensionManifest V3PuppeteerVert.xWeb Extension API
Chrome ExtensionManifest V3PuppeteerVert.xWeb Extension API
ReduxReact Query
ReduxReact Query
ReduxReact Query
ReduxReact Query
Apollo ClientApollo ServerDataLoaderZodNeon PostgreSQLGCPAzuregRPC
Apollo ClientApollo ServerDataLoaderZodNeon PostgreSQLGCPAzuregRPC
Apollo ClientApollo ServerDataLoaderZodNeon PostgreSQLGCPAzuregRPC
Apollo ClientApollo ServerDataLoaderZodNeon PostgreSQLGCPAzuregRPC
PlaywrightTestCafeKarmaJasmineTesting LibraryDrone CISonarQubeBitbucket PipelinesAzure PipelinesPM2
PlaywrightTestCafeKarmaJasmineTesting LibraryDrone CISonarQubeBitbucket PipelinesAzure PipelinesPM2
PlaywrightTestCafeKarmaJasmineTesting LibraryDrone CISonarQubeBitbucket PipelinesAzure PipelinesPM2
PlaywrightTestCafeKarmaJasmineTesting LibraryDrone CISonarQubeBitbucket PipelinesAzure PipelinesPM2
Huskylint-stagedStylelintSentryRadix UIshadcndaisyUIFomantic UIPostCSSStylus
Huskylint-stagedStylelintSentryRadix UIshadcndaisyUIFomantic UIPostCSSStylus
Huskylint-stagedStylelintSentryRadix UIshadcndaisyUIFomantic UIPostCSSStylus
Huskylint-stagedStylelintSentryRadix UIshadcndaisyUIFomantic UIPostCSSStylus
GulpLit-htmlOAuth2JWTAWS CognitobcryptjsGoogle ChartsHandsontableGitHub
GulpLit-htmlOAuth2JWTAWS CognitobcryptjsGoogle ChartsHandsontableGitHub
GulpLit-htmlOAuth2JWTAWS CognitobcryptjsGoogle ChartsHandsontableGitHub
GulpLit-htmlOAuth2JWTAWS CognitobcryptjsGoogle ChartsHandsontableGitHub
學歷與證書

學歷

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

證書與認證

日文檢定 JLPT N1

日文檢定 JLPT N1

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

台大資訊推廣部

網頁開發技術課程

語言能力

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