John Hsieh

Senior Frontend Engineer

Singapore

7 years of frontend development experience, most recently as a senior software engineer at TikTok Singapore and LINE Taiwan. Core stack: React (Next.js), Vue (Nuxt.js), and TypeScript, with production experience spanning resource-limited early-stage startups and large enterprise environments — building products from scratch and delivering high-quality code at scale, with a consistent focus on shipping software that is both functionally robust and easy to use. Deeply integrated AI tools into daily workflows, using GitHub Copilot Agent Mode, MCP, and n8n to build end-to-end automation SOPs, with hands-on LLM API integration and vector database (RAG) experience. Fluent in English, Japanese, and Mandarin Chinese. Experienced in Agile development and cross-functional collaboration, translating technical work for non-technical stakeholders.

TikTok Singapore / LINE Taiwan — Cross-border Product Development

Years Frontend Exp.

Products Shipped

Team Members Led

Languages Spoken

Work Experience

Nov 2024 – Present(1 yr 10 mos)
Software Engineer
TikTok Singapore
- Built frontend advertising-delivery systems for the User Growth team, running campaigns for TikTok and sibling products across major DSP platforms to drive overseas user acquisition
- Architected the financial settlement platform for ad delivery within a 50+ sub-project, million-line-codebase monorepo, using React 17, TypeScript, Rush Monorepo, and the company's proprietary micro-frontend framework
- Reduced UI blocking time by 90% across 10 data-entry workflows by offloading CSV validation to a Web Worker via Comlink RPC, using Yup and Regex validation schemas
- Reduced Total Blocking Time (TBT) by 98% on a 500-form interface by building cache/cacheMany utilities that mimic React's useMemo to cache expensive computation results
- Led the team's adoption of Scrum, using retrospectives to build self-correcting feedback loops, refinement sessions to break down siloed work, and balanced sprint planning to give PM clear visibility into delivery timelines
Aug 2021 – Oct 2024(3 yrs 2 mos)
Software Engineer
LINE Taiwan
- Developed and maintained LINE Shopping, LINE's e-commerce affiliate platform, using Vue SSR, GraphQL, TypeScript, and ExpressJS — independently built a reusable video auto-preview module with a global scheduler that eliminated chaotic previews during high-speed scrolling and memory spikes from concurrent live streams
- Led a 4-person team through the CMS migration from PHP to a NextJS App Router architecture, achieving full frontend-backend separation
- Contributed to JSTF, a cross-team initiative establishing company-wide frontend development standards, and introduced Lighthouse CI for automated performance evaluation
- Mentored 2 new engineers to positive feedback and led an internal NextJS teaching forum to accelerate onboarding for new team members
Sep 2021 – Oct 2024(3 yrs 1 mo)
Frontend Engineer (Contract)
AI.Book
- Built an online photo book editor from scratch as sole developer, implementing drag-and-drop layout, resizing, and text editing features
- Planned the entire technical architecture using Vue + NuxtJS and launched the product within 6 months
- Led backend API design covering AWS Cognito OAuth2 sign-in, the cart and order flow, and payment result integration
Jan 2021 – Sep 2021(8 mos)
Frontend Engineer (Contract)
FundFluent
- Planned frontend architecture and technology stack from scratch, joining at the company's startup stage
- Built an SME loan platform targeting the Hong Kong market using React / NextJS, TypeScript, and TailwindCSS
- Designed a cross-project shared UI component library (Stencil.js Web Component), deployed to private NPM
Dec 2020 – Aug 2021(8 mos)
Full-Stack Engineer
FoxitSoftware
- Managed a 2-person frontend team as full-stack engineer within a newly formed AI team
- Developed a B2B management platform integrating internal AI microservices, built with NuxtJS/NextJS, TypeScript, MongoDB, and Redis
Aug 2019 – Nov 2020(1 yr 3 mos)
Frontend Engineer
Aotter
- Delivered rapidly-iterated products within project-based teams of ~4 engineers
- Developed SuprLink URL shortener, the Aotter Trek DSP ad platform, and other internal/external projects using the Nuxt ecosystem, TypeScript, TailwindCSS, Docker, and a K8s CI/CD pipeline
- Built custom TailwindCSS micro UI frameworks per project to maintain high UI/UX design fidelity
Apr 2019 – Jun 2019(2 mos)
Frontend Engineer
Third Dimension Technology
- Built a decoupled Vue + PHP frontend-backend architecture for Shushu Comics, an online comics platform
- Integrated the WeChat Pay payment system for online transactions
Dec 2017 – Mar 2019(1 yr 3 mos)
Digital Ad Optimizer & Frontend Engineer
Asian Bridge (Japanese Company)
- Managed Facebook and Google Ads campaigns as a digital ad optimizer, applying A/B testing and heatmap analysis to optimize UX
- Transitioned to frontend engineer and PM, building official websites and campaign pages for agency clients including Chorasu (skincare), Hair Life, and Japan Select
- Managed a 2-person frontend team with Japanese as the primary working language
Sep 2016 – Sep 2017(1 yr)
Japan Market Operations & Business Development
AsiaYo
- Sourced Japanese accommodation properties and listed them on the company platform
- Supported customers through Japan-based travel emergencies as the team's Japanese translation liaison
- Achieved 8,846 bookings in 2017, a 376% year-over-year increase

Projects

20 representative projects showcasing product impact and tech stack.

Personal Projects

(3)

TWSG Bilibili CDN Accelerator ↗

An unofficial Chrome / Edge / Firefox browser extension that makes the web version of Bilibili load smoother for users in Taiwan and Singapore, dynamically rewriting the video CDN host to the fastest regional node with automatic fallback. Solely designed, built, published, and maintained end-to-end.

Chrome Extension Manifest V3Vanilla JavaScript (ES6+)chrome.storagechrome.i18nContent Scripts (MAIN world / ISOLATED world)fetch / XMLHttpRequest hookNode.jsJSZipPuppeteerSharp

AI Persona Chatbot

A LINE chatbot built on top of a large language model and the n8n workflow automation tool, bringing a pet to life as a personalized AI companion. Features multi-turn context memory, image/voice understanding (multimodal), long-term memory via vector database (RAG), and quick persona switching.

n8nGemini APILINE Messaging APIDockerVPSEmbedding

Lazy CV ↗

AI-powered customized resume generator. Combines AI Agent automation with Next.js 16 — just provide a job posting URL to automatically scrape JD and generate tailored bilingual resume web pages. Built from scratch to production in just 2 days via Vibe Coding. This resume was automatically generated using this project.

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

Company Projects

(17)

TikTok Singapore

UG Overseas Platform

A large-scale enterprise Monorepo frontend project serving TikTok's overseas user growth business, covering media asset management, financial settlement, supplier procurement, and data dashboards across 50+ sub-projects with million-line codebase.

React 17TypeScriptRush MonorepoArco DesignEChartsJest

LINE Taiwan

LINE Shopping ↗

A LINE affiliate shopping service where users earn LINE Points through partner merchants.

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

LINE Taiwan

CMS Migration to NextJS

Led the migration of LINE Shopping CMS from PHP architecture to React & NextJS App Router, managing a 4-person team to achieve full frontend-backend separation. One of the early projects within LINE Taiwan to adopt the NextJS App Router.

ReactNextJSApp RouterTypeScript

AI.Book

AI.Book Photo Editor

An online photo book editor supporting drag-and-drop layout for adding/removing photos and text editing, with photo import from Google Photos / Instagram. Built from scratch to launch in just 6 months.

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

FundFluent UI Kit Library

A cross-project shared UI component platform built with Web Components (Stencil.js) for framework-agnostic usage, integrating TailwindCSS + Semantic UI with Storybook documentation.

TypeScriptStencil.js (Web Components)Lit-htmlTailwindCSSFomantic UISass/LessPostCSSGulpStorybook

Aotter

SuprLink ↗

A URL shortener service with A/B split testing, data analytics, and ad delivery in a single platform.

TypeScriptNuxt.js 2 (SSR)Vue 2nuxt-property-decoratorNuxt PWAVuexvuex-map-fieldsChart.jsvue-chartjsGoogle ChartsTailwindCSSBuefySassAxiosExpressMongoDBGoogle APIsJestTestCafeAzure PipelinesDockerPM2Kubernetes

Aotter

Aotter Trek DSP Platform ↗

A big-data-driven DSP (Demand-Side Platform) for ad placement, featuring rich chart interfaces to help users identify optimal advertising audiences.

Vue 2VuexjQueryNuxt.js 2TypeScriptExpressMongoDBpost-robotEventEmitter3Chart.jsvue-chartjsGoogle ChartsBootstrap 4SCSS/LESSElement UIAxiosJestKarmaJasmineDockerDocker Compose

LINE Taiwan

JavaScript Task Force

A cross-team initiative at LINE Taiwan responsible for establishing company-wide frontend development standards. Research and adoption of SonarQube, Lighthouse CI, OpenTel frontend monitoring, and React project template generators.

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

FundFluent

FundFluent SME Portal ↗

An integrated loan platform for Hong Kong SMEs, providing bank and government loan information with one-stop applications, using OCR to streamline document management and reduce redundant submissions.

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

FundFluent

FundFluent Partner Portal ↗

A management platform for lenders such as banks, enabling them to list and manage loan products and review SME applications.

TypeScriptReact 17Next.js 12MobXmobx-reactTailwindCSSFomantic UISassReact Hook FormYupnext-translateBitbucket PipelinesDockerGCP Artifact RegistryGKE

Aotter

Chrome Extension - SuprLink

A Chrome extension for quickly generating short URLs via the SuprLink service.

Vue 2 (Options API)Vue RouterWebExtension APIVuexTailwindCSSPostCSSAxiosWebpack 4Babel

Aotter

III City Dashboard

A government data dashboard aggregating scattered public data into a single platform, featuring highly customizable charts and data filtering modules.

Vue 2Chart.jsvue-chartjsD3.jsTopojsonGoogle MapsmarkerclustererHandsontableBootstrap-VueElement UImdbvueAxiosjQuery

Aotter

beanfun! Data Management Center

A centralized data dashboard with various charts displaying company-wide KPIs and internal metrics.

Nuxt.js 2 (SPA)Vue 2VuetifyVuexChart.jsvue-chartjsCountUp.jsVueWordCloudStylusSassAxiosExpressgRPCMongoDB (Mongoose)JWT/JWKSGoogle Maps APIDockerAzure Kubernetes Service (AKS)

Third Dimension Technology

Shushu Comics

An online comics platform built with Vue + PHP in a decoupled architecture, integrated with WeChat Pay for payments.

VuePHPWeChat Pay

Asian Bridge (Japanese Company)

Chorasu Official Website

The Taiwan official website for Chorasu, an Okinawa-based skincare brand. Led design planning and frontend development.

PHPjQueryCSS

Asian Bridge (Japanese Company)

Hair Life

A content-driven media website focused on hair care and beauty products.

WordPressPHPCSS

Asian Bridge (Japanese Company)

Japan Select

A Japanese product review blog specializing in sponsored content.

WordPressPHPCSS