Projects

A record of how I turned problems found in the field into product solutions.

01

DERMA:CODE

A consultation platform that turned intuition-led skin consultations into a data-driven workflow.

Next.js 15 · React 19 · TypeScript · React Three Fiber · three.js · MediaPipe · TensorFlow.js · Konva · TanStack Query · Zustand · react-i18next · Tailwind 4

Simulation2-week prototype → full featureKey marketing content
LCP16.7s → 5.7sMeasured stage by stage
02

CPE

A clinic operations program that systematised consultation and payment around how aesthetic clinics actually work.

V1 · Next.js 14 (App Router) · V2 · React 19 · Vite · react-router v7 · TypeScript 5.9 · Zustand · TanStack Query · Tailwind 4 · Storybook · Vitest · FSD

On-site interviewsConsultation screen redesignedDetails, purchase and discounts on one screen
ArchitectureNext → Vite3 months in parallel · zero-downtime migration
03

Derma:code Chart Library

An in-house shared chart library built to implement the product's distinctive visual language.

Canvas API · TypeScript · pnpm workspace · tsup (CJS+ESM) · Vitest · Storybook · GitHub Actions · GitHub Packages

BenchmarkCanvas 76fpsSVG 36 · Recharts 11 · CPU 4× throttling
In useDERMA:CODE V1 & V215 versions shipped · 50+ stories
04

TheiA Super App

A role-based super app for handling treatment-room workflows on mobile devices.

Flutter (implemented with AI coding tools) · Melos monorepo · Figma · iOS first · React (admin editor)

Starting pointTreatment-room bottleneckOn-site observation → apps split by role
CMSNo app releasefor content changes or new clinics · built the day the spec was handed off
05

Waiting for 7000 Bus

A Gapyeong 7000-series bus timetable app that cuts the time it takes to find the next bus.

React · Vite · TypeScript · Zustand · Emotion

Personal projectPlanning, design, build and release
PublicGitHubOpen-source repository