All Projects

Professional and personal projects I've built and shipped

Personal Projects

Built on the side

Developer tools I build outside of work to scratch my own itch — everything here is designed, written, and shipped end-to-end by me.

MF Playground

Side Project

A visual playground for designing Webpack 5 Module Federation micro-frontend architectures — sketch hosts and remotes on a canvas, get a generated webpack config, and stream an AI setup guide.

Problem

Module Federation is powerful but hard to picture — debugging host/remote wiring, port collisions, and shared-dependency mismatches always starts on a whiteboard. There was no tool that let me sketch the topology first and emit the config second.

My Role

Solo developer — designed the data model, built the canvas and config generator, and integrated streaming Claude for the AI setup guide.

Impact

  • Designed an interactive React Flow canvas for authoring host/remote topologies with live position + edge sync to a Zustand store
  • Built a pure TypeScript Webpack 5 ModuleFederationPlugin generator that emits host- and remote-specific config with framework-pinned shared deps
  • Integrated a streaming Claude Sonnet route handler that generates step-by-step local setup instructions tailored to the drawn architecture
  • Shipped URL-based config sharing via base64url encoding so architectures can be pasted into PR descriptions or Slack
Next.js 16React 19TypeScriptTailwind CSS v4React FlowMonaco EditorZustandAnthropic Claude

JSForge

Side Project

An interactive, browser-based practice platform for JavaScript and TypeScript interview preparation with real-time code execution.

Problem

Most interview prep platforms lack a real coding environment. Developers switch between reading problems and testing in a separate editor, breaking their flow.

My Role

Solo developer — designed architecture, built the full-stack platform, and implemented the sandboxed execution engine.

Impact

  • Built a sandboxed Web Worker execution engine with timeout protection and security guards
  • Implemented real-time code execution with console capture and error tracing
  • Designed a categorized problem library with difficulty levels, hints, and test cases
  • Achieved full dark mode support with responsive, resizable panel layouts
Next.js 16React 19TypeScriptTailwind CSS v4Monaco EditorWeb WorkersPrismaPostgreSQL

Professional Work

Shipped at day jobs

Projects I led or contributed to at Mercari and PharmEasy — cross-border marketplaces, country-agnostic platforms, and shared frontend infrastructure.

Cross-Border Marketplace

Professional

US-Japan cross-border marketplace integration at Mercari, delivering end-to-end product discovery through checkout flows across web, Android, and iOS.

Problem

Mercari needed to connect its US and Japan marketplaces to allow cross-border transactions, requiring seamless UX across platforms and geographies.

My Role

Led a team of 4 engineers, spearheading the cross-border integration from the web frontend side.

Impact

  • Increased quarterly GMV by 8%
  • Reduced dependency on proxy partner orders by 35%
  • Delivered end-to-end flows across web, Android, and iOS
React 19Next.js 15TypeScriptGraphQLgRPCProtobuf

Global Order Management System

Professional

Country-agnostic order management platform enabling Mercari to launch in new markets without building separate web apps.

Problem

Expanding to new countries required rebuilding frontends per market. The platform needed a single, adaptable system that works across regions.

My Role

Architected and delivered the system, leading the frontend design decisions and cross-team coordination with Japan-based teams.

Impact

  • Designed a country-agnostic architecture serving multiple markets from a single codebase
  • Successfully launched in Taiwan and Hong Kong
  • Eliminated the need for separate web apps per market
React 19Next.js 15React Server ComponentsJotaigRPC ConnectTypeScript

Shared React Component Library

Professional

Cross-application React component library adopted across 6 applications at PharmEasy, establishing consistent UI standards.

Problem

Multiple teams were building duplicate UI components independently, leading to inconsistent user experiences and wasted engineering effort.

My Role

Architected and shipped the shared library, driving adoption across teams and establishing component standards.

Impact

  • Adopted across 6 applications under the PharmEasy umbrella
  • Reduced feature development time by ~30%
  • Established consistent UI standards across teams
ReactTypeScriptStorybookRedux

Supply Chain Migration

Professional

Migrated 4 production supply chain management applications from Angular to React at PharmEasy.

Problem

Legacy Angular apps had poor module discoverability and slow frontend performance, slowing down warehouse operations.

My Role

Led the migration effort across 2 teams of 7 engineers, owning architecture and delivery.

Impact

  • 40% improvement in warehouse rack pickup times
  • Improved module discoverability and frontend performance
  • Migrated 4 production applications with zero downtime
ReactTypeScriptReduxAngular