JH

John Hsieh

Senior Frontend Engineer

Singapore

7 years of frontend development experience, previously at TikTok Singapore and LINE Taiwan as a senior software engineer. Core tech stack includes React (NextJS), Vue (NuxtJS), and TypeScript. My core value is 'User Experience First' — my mission is not just to build a product, but to create software that is 'user-friendly' and 'beautiful.' Capable of building products from scratch in resource-limited environments, as well as delivering high-quality code in large enterprise settings. Fluent in English, Japanese, and Mandarin Chinese. Well-versed in Agile development and sustainable team delivery models, skilled at collaborating with others and communicating with non-technical stakeholders. Excel at explaining complex problems in simple terms.

TikTok Singapore / LINE Taiwan — Cross-border Product Development
0

Years Frontend Exp.

0

Products Shipped

0

Team Members Led

0

Languages Spoken

Work Experience
  • TikTok Singapore

    Software Engineer

    TikTok Singapore

    • Part of the User Growth team, responsible for running advertisements for company products across major DSP platforms to increase the user base for apps such as TikTok.
    • Responsible for developing the financial settlement systems for ad delivery, using React, monorepo, and the company's proprietary framework to build a frontend microservices system.
    • Led the development team in adopting Scrum — leveraged retrospectives for self-correcting mechanisms, refinement sessions to break down siloed work, balanced workloads, and improved PM visibility into project schedules.


  • LINE Taiwan

    Software Engineer

    LINE Taiwan

    • Developed LINE Shopping daily with Vue SSR + GraphQL + TypeScript + ExpressJS.
    • Served as Team Leader of a 4-person team, led CMS migration from PHP to NextJS App Router architecture.
    • Participated in JSTF to establish company-wide frontend development standards; introduced Lighthouse CI for automated performance evaluation.
    • Mentored 2 new engineers with positive feedback. Led an internal NextJS teaching forum to help onboard new members.


  • AI.Book

    Frontend Engineer (Contract)

    AI.Book

    • Solely responsible for building an online photo book editor with drag-and-drop, resizing, and text editing features.
    • Planned the entire technical architecture from scratch using Vue + NuxtJS; launched the product within 6 months.
    • Supported PWA installation for a native-app-like experience.


  • FundFluent

    Frontend Engineer (Contract)

    FundFluent

    • Joined at the startup stage and planned frontend architecture and tech stack from scratch.
    • Built an SME loan platform targeting the Hong Kong market using React / NextJS + TypeScript + TailwindCSS.
    • Designed a cross-project shared UI component library (Stencil.js Web Component), deployed to private NPM.


  • FoxitSoftware

    Full-Stack Engineer

    FoxitSoftware

    • Served as a full-stack engineer in a new AI team, managing a 2-person frontend team.
    • Developed a B2B management platform integrating internal AI microservices.
    • Tech stack included NuxtJS / NextJS + TypeScript + MongoDB + Redis.


  • Aotter

    Frontend Engineer

    Aotter

    • Project-based team with ~4 members per project, rapidly iterating products.
    • Used Nuxt ecosystem + TypeScript + TailwindCSS with Docker + K8s CI/CD pipeline.
    • Developed SuprLink URL shortener, Aotter Trek DSP ad platform, and other internal/external projects.
    • Focused on UI/UX design fidelity, building custom TailwindCSS micro UI frameworks per project.


  • Third Dimension Technology

    Frontend Engineer

    Third Dimension Technology

    • Developed with Vue + PHP in a decoupled frontend-backend architecture.
    • Integrated WeChat Pay payment system.


  • YouBridge (Japanese Company)

    Digital Ad Optimizer & Frontend Engineer

    YouBridge (Japanese Company)

    • Initially worked as a digital ad optimizer, managing Facebook / Google Ads with A/B testing and heatmaps to optimize UX.
    • Later transitioned to frontend engineer & PM, building official websites and campaign pages for agency products.
    • Managed a 2-person frontend team with Japanese as the primary working language.
    • Built UI/UX expertise that laid the foundation for a frontend development career.


  • AsiaYo

    Japan Market Operations & Business Development

    AsiaYo

    • Sourced Japanese accommodation properties and listed them on the company platform.
    • Served as the Japanese translation liaison, assisting customers with travel emergencies in Japan.
    • Achieved 8,846 bookings in 2017, a 376% year-over-year increase.
Projects
18 representative projects showcasing product impact and tech stack.
Lazy CV - 1
Lazy CV - 2
Lazy CV - 3
Lazy CV - 4
Lazy CV - 5

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.

Technical Highlights

  • Next.js 16 App Router + Standalone Output for lightweight Docker packaging
  • AI Agent automated SOP via Chrome DevTools MCP for end-to-end resume generation
  • Serverless deployment on AWS: ECR → Lambda Web Adapter, S3 + CloudFront CDN, GitHub Actions CI/CD
  • Neon Serverless PostgreSQL + Drizzle ORM for type-safe database access
  • TailwindCSS 4 + Framer Motion for responsive design with smooth animations
Next.js 16TypeScriptTailwindCSS 4Drizzle ORMNeon PostgreSQLAWS LambdaFramer Motion
UG Overseas Platform - 1
UG Overseas Platform - 2
UG Overseas Platform - 3

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.

Technical Highlights

  • Complex form component development based on JSON Schema dynamic rendering with cascading selects, dynamic fields, and conditional rendering
  • High-precision numeric computation for financial scenarios, solving JavaScript floating-point precision issues
  • Micro-frontend integration via proprietary framework with dynamic sub-application loading
  • Type-safe API communication using Ferry + Thrift IDL for auto-generated strongly-typed service code
  • Internationalization with runtime-fetched translations via an internally developed online translation platform

Key Contributions

  • Web Worker multi-threaded CSV validation: offloaded heavy validation to a separate thread using Comlink for RPC-like communication, with Yup + Regex schemas — reduced UI blocking time by 90% across 10 data entries
  • Function caching utilities for rendering optimization: created cache/cacheMany tools mimicking React useMemo to cache computation results — reduced Total Blocking Time (TBT) by 98% on a 500-form interface without pagination
React 17TypeScriptRush MonorepoArco DesignEChartsJest
LINE Shopping - 1
LINE Shopping - 2
LINE Shopping - 3
LINE Shopping - 4

LINE Shopping

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

Key Contributions

  • Independently developed the 'Live Shopping' feature — inspired by YouTube's auto-preview mechanism, designed a reusable video auto-preview module with a global scheduler that resolved chaotic previews during high-speed scrolling and memory spikes from too many live streams on a single page
Vue SSRGraphQLTypeScriptExpressJSSASS
CMS Migration to NextJS - 1
CMS Migration to NextJS - 2

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.

Technical Highlights

  • Used iframe to implement micro-services, enabling independent deployment of new and legacy projects with progressive URL-based migration
  • One of the early projects within the company to adopt Next APP router

Key Contributions

  • Beyond coding, served as architect planning the entire project while also acting as PM — assigning tasks, writing technical documentation, and communicating with users
ReactNextJSApp RouterTypeScript
AI.Book Photo Editor - 1
AI.Book Photo Editor - 2

AI.Book Photo Editor

An online photo book editor supporting drag-and-drop, resizing, and text editing with cross-platform PWA support. Built from scratch to launch in just 6 months.

Technical Highlights

  • Built a custom editor with pure Vue, supporting add/remove photos, text input, and font style/size editing
  • Editor supports both web and mobile editing
  • Supports PWA installation for a native app-like experience

Key Contributions

  • Built entirely from scratch as sole developer
VueNuxtJSPWAIndexedDB
FundFluent UI Kit Library

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.

Technical Highlights

  • UI components built with Stencil as web components, framework-agnostic
  • Design system constructed with Tailwind + Semantic UI
  • Components showcased via StoryBook for easier communication with designers
  • Monorepo separating component library and business code; component library can be independently published and tested

Key Contributions

  • Built entirely from scratch as sole developer
Stencil.jsWeb ComponentTailwindCSSStorybook
SuprLink

SuprLink

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

NuxtJSTypeScriptTailwindCSSDockerK8s
Aotter Trek DSP Platform

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.

NuxtJSTypeScriptChart.jsSASS
JavaScript Task Force

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.

SonarQubeLighthouse CIOpenTelReact
FundFluent SME Portal

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.

Key Contributions

  • Built entirely from scratch as sole developer
ReactNextJSTypeScriptTailwindCSS
FundFluent Partner Portal

FundFluent Partner Portal

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

Key Contributions

  • Built entirely from scratch as sole developer
ReactNextJSTypeScriptSemantic UI
Chrome Extension - SuprLink

Chrome Extension - SuprLink

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

Chrome ExtensionJavaScript
III City Dashboard

III City Dashboard

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

NuxtJSTypeScriptChart.jsTailwindCSS
beanfun! Data Management Center

beanfun! Data Management Center

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

NuxtJSTypeScriptChart.jsSASS
Shushu Comics

Shushu Comics

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

VuePHPWeChat Pay
Chorasu Official Website

Chorasu Official Website

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

PHPjQueryCSS
Hair Life

Hair Life

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

WordPressPHPCSS
Japan Select

Japan Select

A Japanese product review blog specializing in sponsored content.

WordPressPHPCSS
Tech Stack Visualization
Core technologies and their interconnections.
TypeScript
React
NextJS
Vue
NuxtJS
GraphQL
Socket.io
Frontend JS Frameworks & Tools
Jest
Cypress
Webpack
Storybook
Firebase
i18n
Lodash
Sass / Scss
TailwindCSS
Bootstrap
ElementUI
Buefy
CSS Frameworks & Libraries
Vuetify
BEM
CSS Variable
Media Query
Service Worker
Workbox
web-push
PWA
IndexedDB
Cache Storage
Navigator API
Shadow DOM
StencilJS
Micro Frontend & Web Component
Web Socket
Quill
Express
Socket.io
MongoDB
Mongoose
Backend & Databases
EJS
Swagger
GraphQL
Skill Keywords
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
Education & Certifications

Education

InstitutionDegree / ProgramPeriod
Soochow UniversityBachelor of Arts — Japanese Language & Literature2013 - 2017
Doshisha University, KyotoExchange Program — Japanese Language & Culture2016.03 - 2016.08

Certifications

JLPT N1 (Japanese)

JLPT N1 (Japanese)

Highest level — Business conversation proficiency

NTU Extension Program

Web Development Technology Course

Languages

Mandarin Chinese — NativeJapanese — Business (JLPT N1)English — Professional Working