John Hsieh

Senior Software Engineer

Singapore

7 years of software engineering experience specializing in web architecture design and development, most recently as a senior software engineer at TikTok Singapore and LINE Taiwan. Strongest in large-scale product engineering, web architecture, and performance optimization, with hands-on cross-stack delivery (Node.js BFF/GraphQL, Go, LLM integration). Primary 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 SWE Experience

Products Shipped

Team Members Led

Languages Spoken

Work Experience

Nov 2024 – Present(1 yr 11 mos)
Software Engineer
TikTok Singapore
- Software Engineer on TikTok's User Growth team, building the financial settlement (contracts, pricing, settlement statements) and ad procurement (demand submission, approval workflows, scoring tasks) subsystems within a 50+ sub-project, million-line-codebase overseas growth monorepo — leveraging AI-assisted development to independently ship full-stack features across TypeScript (frontend) and Go (backend)
- Caught and averted two production incidents before they happened (an external platform retiring an old API version, and another team's service blocking direct cross-data-center traffic for compliance), proactively escalating and mobilizing teammates to ship fixes in under 3 days with zero related on-call tickets, then folding post-mortem preventive practices into the team SOP
- Led the team's adoption of Scrum, using retrospectives to build a self-correcting mechanism, refinement sessions to break down siloed work so members could back each other up, and aligned timelines and balanced workloads to give PMs clear schedule visibility
- Built a full-stack LLM contract validation system that parses contracts with a multimodal LLM and verifies each dynamic rule before allowing submission, validating 6–7 contracts per week and saving ~5 person-days per month
- Introduced a Web Worker multi-threaded validation system, solving compatibility constraints in the internal Armor build framework (Blob URL, Comlink, Module Worker), reducing UI blocking time by 90% across 100,000 CSV entries
- Built cache/cacheMany utilities mimicking React's useMemo to cache expensive computation results, cutting Total Blocking Time (TBT) by 98% on a 500-form interface
- Optimized a production monitor script that de-duplicates a massive dataset (written in Python, outside the usual stack) using partitioning, heaps, and streaming files, cutting execution time by dozens of times and improving space complexity from O(n²) to O(n)
- Designed the LLM validation rule engine: rules managed on a remote config platform as hard-block or warning-only, blocking only on high-confidence failures, user overrides with written clarification logged for audit, a DB query tool call behind a read-only SQL filter layer, and a file-to-Markdown MCP to process PDF, Word, and Excel contracts uniformly
- Built a corpus of correct and incorrect contract examples as the eval gate for every prompt change, traced every model conversation into the production log system via Go, and moved contract submission to asynchronous processing to absorb model latency (results notified in ~5 minutes on average)
- Built extensive JSON-Schema-driven dynamic form components handling cascading selects, dynamic fields, and conditional rendering, plus a custom floating-point precision solution for financial and pricing calculations
- Implemented micro-frontend module loading via the company's proprietary framework and runtime-updated multi-language support through an internal translation platform
- Spent about 30% of working time on production on-call, synthesizing recurring patterns from daily advertiser and internal stakeholder feedback to scope and drive new technical development tasks rather than only waiting for requirements
Aug 2021 – Oct 2024(3 yrs 2 mos)
Software Engineer
LINE Taiwan
- Software Engineer on LINE Taiwan's ~60-person EC team building LINE Shopping (a Vue SSR frontend plus a Node.js + GraphQL BFF integrating dozens of backend microservices) across three tracks — EC development (50%), team leadership (40%), and company-wide frontend standards (10%) — while leading a 4-person team and mentoring new engineers
- Led a 4-person team through the CMS migration from PHP to a Next.js App Router architecture — one of the early App Router adoptions at LINE Taiwan — using iframe-based micro-frontends for independent deployment and progressive URL-based migration, achieving full frontend-backend separation in about a year
- After the CMS migration retired the PHP frontend code and restored the usual frontend/backend split, cut average development time by 30% and moved PHP maintenance from understaffed to adequately staffed
- Independently researched, designed, developed, and validated the 'Live Shopping' feature end-to-end (studying auto-preview mechanisms in YouTube Shorts and Shopee Live Shopping) — building a reusable video auto-play module with dual IntersectionObservers, a Vuex global scheduler, and HLS.js that eliminated chaotic previews and memory spikes from concurrent live streams
- Designed the iframe micro-frontend with an online feature toggle so a problematic new page could be switched back to the legacy page instantly without redeploying or shipping a fix, meeting management's zero-downtime and disaster-recovery requirements
- Hosted several Next.js sharing sessions demonstrating App Router advantages step by step, winning over Vue-focused teammates who were initially reluctant to adopt Next.js
- Beyond development, owned tech-stack decisions, project scheduling, cross-team resource coordination, risk assessment, and internal training for the CMS project, and served as PM — assigning tasks, writing technical documentation, and communicating directly with users
- Developed and maintained both LINE Shopping repos — the Vue SSR frontend and the Node.js + GraphQL BFF, both in TypeScript — under the rule that every line is code-reviewed before merging
- Contributed to JSTF, a cross-team task force establishing company-wide frontend standards (frameworks, coding style, PR review requirements, static analysis), introducing Lighthouse CI for automated performance evaluation as part of the standard development workflow
- Built a custom React project template generator CLI with the JSTF team, baking CI rules, code linting, and SonarQube static analysis into the template to speed up new project setup and unify frontend standards company-wide, and researched OpenTel frontend monitoring
- Mentored 2 new engineers to positive feedback and led an internal Next.js teaching forum to accelerate onboarding for new team members
Sep 2021 – Oct 2024(3 yrs 1 mo)
Software Engineer (Consultant)
AI.Book
- Sole contract engineer and technical owner for AI.Book's online photo book editor — an end-to-end product covering frontend architecture, editor core, and backend API design, independently built from scratch and launched within 6 months
- Built a custom drag-and-drop photo book editor with pure Vue, supporting layout editing, text input, and font style/size customization across both web and mobile browsers, with photo import from Google Photos and Instagram
- Led backend API design covering AWS Cognito OAuth2 sign-in, the cart and order flow, and payment result integration — defining the API contract, data models, and error handling from the frontend consumer's perspective and working with the backend to bring it to production
- Joined remotely at an early stage with loosely defined requirements and specs, making the tech selection and architecture decisions independently and communicating directly with the company's non-technical head
Jan 2021 – Sep 2021(8 mos)
Software Engineer (Consultant)
FundFluent
- Contract software engineer and technical lead at FundFluent from its startup stage, independently building three frontend systems — a shared UI Kit, an SME loan portal, and a bank partner portal — for a Hong Kong SME lending platform
- Personally led a cross-project shared UI component library built with Stencil.js Web Components usable in non-React projects, with a Tailwind + Semantic UI design system and Storybook documentation — published to private NPM and installed independently by both downstream portals from a separate repo
- Built the SME Portal, a one-stop loan application platform integrating bank and government loan information with OCR-based document organization to reduce redundant submissions across multiple applications, using React (Next.js), TypeScript, Semantic UI, and TailwindCSS
- Built the Partner Portal, a lender-facing management platform for banks to list and manage loan products and review SME applications
- Working remotely with loosely defined requirements and specs, made the frontend tech selection and architecture decisions from scratch, communicated directly with the company's non-technical head, and kept design patterns consistent across products through reusable components
Dec 2020 – Aug 2021(8 mos)
Fullstack Engineer
FoxitSoftware
- Full-stack engineer in Foxit's newly formed AI team, planning the technical architecture and managing a 2-person frontend team while building a SaaS automation platform end-to-end
- Built a SaaS automation platform similar to n8n that integrates the company's PDF services (conversion, translation, editing, signing) with triggers such as manual actions, email keywords, and Google Doc updates to automate office workflows end-to-end
- Used NextJS, TypeScript, and ElementUI on the frontend, and NodeJS, TypeScript, MongoDB, Redis, NestJS, and GraphQL on the backend
Aug 2019 – Nov 2020(1 yr 3 mos)
Frontend Engineer
Aotter
- Frontend engineer at Aotter, delivering fast-iterated advertising and data platforms as part of project-based teams of about 4 members (PM, UI designer, frontend/backend engineers)
- Built SuprLink, a short-link service with A/B testing, data analytics, custom domains, and organization management, plus a companion Chrome extension for quick link creation
- Built Aotter Trek, a big-data-driven DSP advertising platform with rich chart interfaces for audience targeting
- Built a government open-data dashboard for the Institute for Information Industry and beanfun!'s cross-product data management center, both featuring highly customizable chart visualizations
- Built custom TailwindCSS micro-UI frameworks per project to maintain high design fidelity with UI mockups, prioritizing reusable, scalable code across a fast-paced multi-project workload
- Shipped projects on a Nuxt ecosystem + TypeScript + Sass & TailwindCSS architecture with CI/CD on Docker + K8s, running a fast Scrum process in small teams while balancing multiple concurrent project schedules
Apr 2019 – Jun 2019(2 mos)
Frontend Developer
Third Dimension Technology
- Frontend developer at Third Dimension Technology for a brief tenure, building a decoupled Vue + PHP architecture for Shushu Comics, an online comics platform
- Integrated the WeChat Pay payment system to support online transactions
Dec 2017 – Mar 2019(1 yr 3 mos)
Digital Ad Personnel & Frontend Developer
Asian Bridge (Japanese Company)
- Digital Ad Optimizer transitioning to Frontend Engineer & PM at Asian Bridge, a Japanese trading company, building official websites and campaign landing pages for agency clients
- Managed a 2-person frontend team while also serving as project manager and Japanese-speaking marketing liaison, communicating in Japanese as the primary working language
- Won the company's first internal evaluation, assessing business and market understanding, Japanese business negotiation, and crisis handling
- Optimized Facebook Ads Manager and Google Ads campaigns plus website traffic and SEO, using heatmaps and A/B testing to reduce bounce rate and Google Analytics user flow reports to improve website usability
- Built official websites and one-page campaign sites for agency brands including Churacos (skincare), Hairlife, and Japan Selection, using native JavaScript and jQuery for layout and dynamic effects on a PHP MPA foundation, with WordPress for quick builds
Sep 2016 – Sep 2017(1 yr)
Japanese Sales and Operation
AsiaYo
- Japan Market Sales & Operations at AsiaYo, sourcing Japanese share-house and minshuku (B&B) listings and supporting the platform's Japan-market growth and translation needs
- Reached 2,616 listings (93% of target) and 8,846 bookings in 2017 (Jan–Sep), 276% growth over the previous year
- Reached 1,682 listings (82% of target) and 2,353 bookings in 2016 (Mar–Dec)
- Set and managed quarterly Japanese listing-growth targets, introducing the service to lodging operators centered on the Japanese market and helping them list on the platform
- Provided service support to existing operators, including promotion proposals, translation, listing assistance, and check-in issue handling
- Served as the company's Japanese business contact and helped travelers handle emergencies during their trips in Japan

Projects

21 representative projects showcasing product impact and tech stack.

Personal Projects

(4)

BiBoost - Overseas Video Speedup for bilibili - 1

BiBoost - Overseas Video Speedup for bilibili - 2

BiBoost - Overseas Video Speedup for bilibili - 3

BiBoost - Overseas Video Speedup for bilibili - 4

BiBoost - Overseas Video Speedup for bilibili ↗

An open-source, free-forever browser extension that makes videos and live streams on the web version of Bilibili play smoother for overseas users, dynamically rewriting the stream CDN host to the fastest node for the user's region and automatically falling back to Bilibili's native backup node on failed segment requests or playback stalls. Supports every country (with the companion CDNSpeedTest desktop app for building custom node lists), ships one codebase to Chrome / Edge / Firefox / Safari with a five-language UI, and iterates on community feedback. 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 hookingFLV / HLS (m3u8) / fMP4 streamingSafari Web Extension (Xcode)Node.jsJSZipPuppeteerSharpPythontkinterPyInstallerDNS over HTTPS (ECS)Cloudflare Workers (KV)GitHub Issues APIGoogle Apps ScriptGoogle SheetsNeon (PostgreSQL)Git HooksClaude Code

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

SiyaMap ↗

A two-person side project built with a UI designer (started February 2026, currently deployed to a stage environment). The platform uses interactive SVG venue seat maps as an index: concert-goers submit real photos of the view from the seat they sat in along with experience ratings (satisfaction, obstructed view, exit time, air-conditioning strength, etc.), so future ticket buyers can click a section on the seat map and see what that seat actually looks like. The designer owns the product concept and UI design, while all engineering (database modeling, backend API, frontend and shared UI library, image-processing service, AWS infrastructure, and CI/CD) was delivered independently.

TypeScriptNext.js 16 (App Router, standalone)React 19TailwindCSS 4TanStack React QueryHonoZod@hono/zod-validatorDrizzle ORMdrizzle-kitNeon Serverless PostgreSQLDBMLjose (JWT)bcryptjsGoogle OAuth 2.0DOMPurifynext-swagger-docSwagger UIsharpAWS (Route 53, CloudFront, S3, API Gateway, Lambda, ECR, IAM)AWS Lambda Web AdapterAWS SDK v3DockerGitHub Actionspnpm WorkspacesTurborepotsupStorybook 10VitestJestPlaywrightHuskyESLintPrettier

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. Responsibilities span two subsystems: financial settlement (contract management, pricing, settlement statements) and ad procurement (demand submission, approval workflows, scoring tasks, ad buying flows).

Rush v5 (Monorepo)PNPM WorkspacesReact 17TypeScriptreact-router-dom v5/v6Arco Designunstated-nextAxiosEChartsLessCSS ModulesRspackJest@testing-library/reactESLintcommitlintlint-staged

LINE Taiwan

LINE Shopping ↗

A LINE affiliate shopping service where users earn LINE Points through partner merchants, also serving as a shopping portal for third-party online shops to search, compare, and share goods. A full-stack project with a Vue SSR frontend repo and a BFF (Node.js + GraphQL) integrating dozens of backend microservices, both in TypeScript and maintained and iterated personally.

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

Proposed and led the 2023 migration of LINE Shopping CMS from PHP architecture to React & NextJS App Router with iframe micro-frontends, managing a 4-person team to achieve full frontend-backend separation while owning tech-stack decisions, internal training, schedule planning, task allocation, and risk assessment. 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, custom domains, organization management, 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)

Churacos Official Website

The Taiwan official website for Churacos, an Okinawa-based skincare brand.

PHPjQueryCSS

Asian Bridge (Japanese Company)

Hairlife

A content-driven media website focused on hair care.

WordPressPHPCSS

Asian Bridge (Japanese Company)

Japan Selection Blog

A blog for advertorial content.

WordPressPHPCSS