Skip to content
Hao Phan Senior Frontend Engineer
View CV(PDF, opens in a new tab)
Placeholder portrait of Hao Phan

Section 1 of 7 · Hello

Hao Phan

Senior Frontend Engineer

9+ years · React · TypeScript · Frontend owner @ AddSearch

ONLINE · Vantaa, Finland

Senior Frontend Engineer with 9+ years of experience who owns and leads frontend at a search SaaS company. I set the technical direction, standards, and development workflow across the admin dashboard, embeddable search widgets, and open-source UI libraries.

I scale frontend delivery beyond my own output: I scope and delegate frontend work to backend engineers, guide them through review, and build tools that make operations, Sales, design, and customers self-sufficient. Strong in React, TypeScript, accessibility, and privacy and security compliance.

Section 2 of 7 · Work

Senior Frontend Engineer · AddSearch

Current role Nov 2019 – Present Helsinki

AddSearch is a Helsinki-based SaaS company providing site search and e-commerce search. As the dedicated frontend owner, I set technical direction for all frontend products and enable engineers and non-engineers across the company to contribute to them.

Illustration: five products, all connected to one central node labelled Hao.

  1. Chapter 1 of 7

    Ownership

    Direction

    • Own the frontend technical roadmap and make architecture and stack decisions across all frontend applications, aligning priorities with product and backend leads.
    • Contribute to backend and system design discussions, drawing on a full-stack view of the product architecture.

    Scaling through others

    • Scale frontend capacity by breaking features into well-scoped tasks for backend engineers, then guiding them through implementation and code review until they ship frontend changes independently.
    • Established frontend onboarding materials and conventions so backend engineers can contribute to frontend projects with minimal hand-holding.

    3 backend engineers now ship frontend changes on their own.

  2. Chapter 2 of 7

    Admin Dashboard

    • Built and maintain the Admin Dashboard (React, TypeScript), where customers configure search experiences and manage integrations.

  4. Chapter 4 of 7

    Search widgets

    • Built a no-code configurator that lets non-technical customers customize and deploy search widgets themselves, reducing onboarding and support load.
    • Created embeddable search, results page, recommendation, and AI conversation widgets that run reliably on customer-controlled websites, including e-commerce platforms.

  5. Chapter 5 of 7

    Infrastructure as code

    Pulumi · TypeScript

    I wrote a Pulumi stack in TypeScript for the React Admin Dashboard's hosting: a private S3 bucket served through CloudFront, DNS records in Route 53, and a fallback to index.html for client-side routes.

    Recovering lost state

    An earlier stack's state had been kept on a single machine and was lost. We moved Pulumi state to a self-managed S3 backend, and I recovered the stack's state with pulumi import.

  6. Chapter 6 of 7

    Internal tools

    • Partnered with the operations team to build an internal tools application that streamlines customer data management.

  7. Chapter 7 of 7

    Migration

    • Led migrations from AngularJS/Angular to React and from Webpack to Vite, planning each rollout so feature delivery continued throughout.

    Phase 1 · micro-frontends

    I set up a micro-frontend architecture: the Admin Dashboard ran several micro-frontends, so new features were built in React while old features moved to the new React repo one by one. Each took 1–4 weeks, depending on its complexity and dependencies, and features kept shipping.

    Phase 2 · 2026

    We then ran an autonomous Claude Code migration workflow, with each feature verified side by side against the legacy app in a real browser. It moved the rest of the codebase in about 3 months, and the micro-frontends were retired for a single React SPA.

    More in AI workflow

TECHNICAL STACK React, TypeScript, Angular, Vite, Tailwind CSS, Material UI, PrimeReact, AWS, GitHub Actions

Section 3 of 7 · Craft

Process & tooling

Claims that usually have to be taken on trust. Each tile gives the CV lines, how the work was done, and proof you can check on this page where there is some.

Ship it

Practice 1 of 4
  • Defined the team's frontend development workflow: coding standards, PR and review process, release automation with Release Please, and CI/CD on GitHub Actions with AWS S3/CloudFront deployment.

The workflow, in order

The path every frontend change takes, from commit to CDN.

  1. Commit
  2. PR review
  3. CI on GitHub Actions
  4. Release Please
  5. AWS S3
  6. CloudFront

Accessible

Practice 2 of 4
  • Act as the company's accessibility authority: authored VPAT reports and advise customers and Sales on WCAG 2.2 AA.
  • Led accessibility compliance to WCAG 2.2 AA across all frontend products.

The scope, and this page

Authored VPAT reports for 3 end-user-facing products: the open-source search UI library, the ready-made search widget and the AI conversational widget.

ON THIS PAGE

  • axe checks every section in the end-to-end tests, in both themes.
  • Every interactive part has a keyboard path and a visible focus ring.
  • Single-key shortcuts have an off switch (WCAG 2.1.4):
  • Reduced motion shows every animation's final state straight away.
  • Dark and light themes follow your system setting.

Private & safe

Practice 3 of 4
  • Implemented privacy compliance with Google Consent Mode v2, Google Analytics event tracking, and CookieBot integration.
  • Configured Content Security Policy headers for the Admin Dashboard and keep all frontend projects and public libraries free of known vulnerabilities.

Measured live on this page

Cookies on this page …

Requests to other origins …

This page's Content-Security-Policy

Added to the page when it's built.

AI workflow

Practice 4 of 4
  • Designed an AI-assisted PR review workflow pairing Claude Code and Codex to raise review quality and consistency across frontend contributions.
  • Enabled Sales and designers to produce demos and UI changes on their own through AI-assisted workflows (Claude Code, Codex), removing frontend as a bottleneck for small requests.

How the migration was checked

Autonomous migration

We moved the rest of the Admin Dashboard to React with an autonomous Claude Code workflow. Every feature went through the same loop, and the loop halted rather than skip a check.

  1. Analyse the AngularJS module
  2. Build the React feature
  3. Add unit tests
  4. Open legacy and React side by side in a real browser
  5. Check visual parity, API request parity and zero console errors
  6. Check the backend logs for errors
  7. Halt on broken infrastructure instead of skipping verification

The two-phase story: Migration chapter

Review

Earlier, Claude Code and Codex cross-checked each other's output.

Section 4 of 7 · Skills

Technical skills

One card per technology. Each preview shows where the CV puts it to work. No self-rated bars.

Hover or use ← → to browse · click or Enter to pin · Esc or click outside to unpin

Section 5 of 7 · Earlier

Web Developer · Frosmo

Dec 2016 – Nov 2019 Helsinki

Frosmo is a consultancy offering an analytics platform for data tracking, A/B testing, and UI optimization.

  • Retail
  • Online betting
  • Banking
  • Delivered custom solutions for clients across retail, online betting, and banking sectors.
  • Implemented responsive UI transformations, converting desktop layouts to mobile-friendly experiences.
  • Developed product recommendation systems, personalization features, and A/B testing implementations to increase client conversion rates.
  • Built custom APIs and analytics tracking solutions tailored to client requirements.
  • Collaborated with cross-functional teams to deliver data-driven optimizations.

TECHNICAL STACK JavaScript, AngularJS, Custom APIs, Analytics Platforms

Section 6 of 7 · Facts

Education, certification & languages

Education

  • Lahti University of Applied Sciences Bachelor of Business Administration in Business Information Technology

Certification

  • Golden Codility Challenges

Languages

  • English Fluent
  • Finnish Basic
  • Vietnamese Native

Section 7 of 7 · Contact

Get in touch

Based in Vantaa, Finland. Email is the quickest way to reach me.

© Hao Phan · Built with SvelteKit · No tracking