Projects · John H's Website

Projects

From personal side projects to large-scale company products — the projects I've built and owned, newest first.

2026

Personal projects2026

BiBoost - Overseas Video Speedup for bilibili

Open source

An open-source extension that makes Bilibili smoother overseas

Bilibili's default CDN routing is often slow outside mainland China. This open-source, free-forever extension rewrites the video and live-stream CDN host to the fastest node for the user's region, and falls back to Bilibili's native backup node on failures or stalls. One codebase ships to Chrome / Edge / Firefox / Safari — designed, built, published, and maintained solely by me.

Highlights

Injects into the MAIN world and hooks fetch / XHR and the playinfo setter to rewrite stream CDN hosts in real time
Automatic fallback: detects 403/404/5xx, timeouts, and stalls, silently switching to a backup node first
Built CDNSpeedTest, a crowdsourced Python desktop app that collects real-world results to curate per-country nodes
Reproducible builds, automated store screenshots, release automation, and a Safari Web Extension

Results

Shipped in 2 days with zero ads; 1,000+ weekly active users within 9 days
10,000+ weekly active users within 83 days (under 3 months), ~240 net new users per day over the last 4 weeks
163 ratings, 4.9★ average, 98% 5-star, 106 with written reviews

Chrome Extension Manifest V3Vanilla JavaScript (ES6+)Safari Web Extension (Xcode)Node.jsPuppeteerPythonNeon (PostgreSQL)Claude Code

Write-ups

View project details

Store page GitHub

Personal projects2026

Lazy CV

An AI-powered tailored resume generator (this very site)

Give it a job posting URL and the /cv command in Claude Code scrapes the JD, analyzes the requirements, and generates a tailored bilingual resume page from my personal data source — ready to print as PDF.

Highlights

A workflow built from Claude Code skills: /cv, /update, /cover-letter, and /job searches
check-cv rule checks plus weighted ATS scoring act as a quality gate for AI-generated resumes
Docker → ECR → Lambda Web Adapter, with static assets on S3 + CloudFront

Next.js 16React 19TailwindCSS 4Drizzle ORMNeon Serverless PostgreSQLPlaywrightDocker

View project details

Website GitHub

Personal projects2026

SiyaMap

A concert seat-view sharing platform

A two-person side project with a UI designer: the designer owns the product concept and UI; I own all of the engineering. Interactive SVG seat maps serve as the index — concert-goers post real photos of the view from their seat along with ratings, so future buyers can click a section and see what it actually looks like. Currently deployed to stage.

Highlights

Next.js runs on AWS Lambda via Lambda Web Adapter, keeping compute cost near zero with no traffic
Layered Route → Controller → Service backend with constructor injection; every DTO derived from one Zod schema
A standalone image-processor Lambda handles watermarking and on-demand resizing, with a width whitelist against cost attacks
pnpm Workspaces + Turborepo across three modules; the shared UI library is deployed as its own Storybook

TypeScriptNext.js 16React 19HonoZodDrizzle ORMNeon Serverless PostgreSQLAWS LambdaTurborepoStorybook 10

Write-ups

SiyaMap System Architecture

View project details

GitHub Infra diagram Database ER diagram

Personal projects2026

AI Persona Pet Chatbot

A LINE chatbot built on n8n and an LLM

A LINE chatbot that brings a pet to life. Built on an LLM and n8n workflows, it remembers context, understands images and voice, and replies with stickers or text.

Highlights

n8n orchestrates LINE webhooks, the Gemini API, and storage — no traditional backend needed
Past memories are stored as JSONL, embedded, and exposed via tool calls for long-term memory
Containerized with Docker and deployed on a DigitalOcean VPS

n8nGemini APILINE Messaging APIDocker

View project details

2024

TikTok2024 –

UG Overseas Platform

An enterprise monorepo for TikTok's overseas growth business

Serves TikTok's overseas ad growth business across media assets, financial settlement, procurement, and dashboards — 50+ sub-projects and a million-line codebase. I own modules in two subsystems: financial settlement (contracts, pricing, statements) and ad procurement (requests, approvals, scoring tasks).

Highlights

Multi-threaded CSV validation with Web Worker, working around internal framework constraints — 90% less UI blocking
cache / cacheMany function caching for the form engine cut TBT by 98% on a 500-form page
LLM contract validation: remotely configurable rules, block vs. warn levels, and a read-only SQL tool call

React 17TypeScriptRush + PNPM WorkspacesArco DesignEChartsRspackJest

Write-ups

Multi-threaded CSV Validation with Web Worker

View project details

Web Worker diagram

2023

LINE Taiwan2023 – 2024

CMS Rebuild in React & Next.js

Led a 4-person team rebuilding the LINE Shopping back office

In 2023 I proposed and led this migration, deciding to introduce micro-frontends (iframe) and the Next.js App Router, and rebuilt the PHP-based LINE Shopping CMS on the Next.js App Router, owning tech selection, training, scheduling, task allocation, and risk assessment alongside development.

Highlights

iframe-based micro-frontends let new and legacy apps deploy independently and migrate URL by URL
One of the early projects at LINE Taiwan to adopt the Next.js App Router
Beyond coding, served as architect planning the entire project while also acting as PM — assigning tasks, writing technical documentation, and communicating with users

Results

After the migration, average development time dropped by 30%, and PHP maintenance went from understaffed to adequately staffed

ReactNext.jsApp Router

View project details

2021

AI.Book2021 – 2024

Online Photo Book Editor

The core product, built from zero to launch in 6 months

Lets users design custom photo albums online and print them as keepsake books. I planned and built it from scratch as the sole developer — frontend architecture, the editor core, and backend API design.

Highlights

A pure-Vue editor with drag-and-drop layouts, photo management, and text and font editing
Works on desktop and mobile browsers, with imports from Google Photos / Instagram
Led the backend API design: Cognito OAuth2, cart and orders, and payment integration

TypeScriptVue 2Nuxt 2VuexTailwindCSSAWS Cognito OAuth2AWS S3CloudFront

Website

LINE Taiwan2021 – 2024

LINE Shopping

LINE's shopping and points-reward platform

Users earn LINE Points when they shop at partner stores through LINE Shopping, which also serves as a hub for third-party e-commerce. A full-stack project with a Vue SSR frontend and a BFF (Node.js + GraphQL) integrating dozens of microservices — both maintained and developed by me.

Highlights

Researched, designed, built, and validated "Live Shopping" end to end on my own
Dual IntersectionObservers + a Vuex global scheduler + HLS.js keep previews orderly during fast scrolling
Prevents memory spikes from too many live streams on one page

Vue 2Vue SSRVuex 3TypeScriptNode.jsGraphQL (Apollo Server)RedisLighthouse CI

Write-ups

Auto-Play on Scroll — Live Stream List

View project details

Website Live autoplay diagram

LINE Taiwan2021 – 2024

JavaScript Task Force

A cross-team group setting company-wide frontend guidelines

Not a product but a project team whose members represent different product teams, with the goal of setting frontend development guidelines for all of LINE Taiwan. We researched and implemented SonarQube static code analysis, Lighthouse scoring in the CI pipeline, and the frontend monitoring tool OpenTel, and built a custom React project template generator — a CLI that bakes CI rules, code linting, and SonarQube static analysis into the template, speeding up the initial setup of new projects and unifying frontend standards company-wide.

TypeScriptCLI (yargs, prompts)Next.jsSentryLighthouse CISonarQubeESLintDrone CI

FundFluent2021

FundFluent UI Kit

A framework-agnostic cross-project UI library

A personally led internal cross-project UI component platform, built from scratch as the sole developer. Web Components built with Stencil.js, with TailwindCSS and a customized Semantic UI forming the company's design system — documented in Storybook and published to private NPM.

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
Published to a private NPM registry and installed independently by downstream apps (SME portal, Partner portal); the library and business codebases live in separate repos

Stencil.jsTailwindCSSFomantic UIStorybook

Architecture diagram