GlowKart

Skin-aware lipstick matching — see the shade before you buy

Comment

Inspiration

Buying lipstick online is a gamble. Product photos never answer "will this shade suit me?", so shoppers hesitate, buy blind, or return what doesn't work — and retailers pay for those returns. The YouCam API hackathon pairs exactly the two tools that remove that gamble: Skin AI answers "what should I choose for my skin?" and Makeup VTO answers "will it look good on me?". We wanted a guest-first experience — no login wall — that turns that uncertainty into confidence in under two minutes: analyze → explain → recommend → preview → purchase. The retail angle matters to us too: the same journey gives a store informed product views and a stronger discovery → try-on → cart path.

What it does

GlowKart is a skin-aware lipstick matching demo. A shopper uploads a selfie (or uses the camera, or a one-click demo photo; JPG/PNG ≤ 8 MB, downscaled client-side, never stored). Our server calls YouCam AI Skin Analysis and returns 2–3 plain-language observations with scores and a "beauty reference, not a diagnosis" disclaimer. The shopper then tunes finish + occasion and gets a ranked shortlist of 6 curated shades — every pick shows its reason ("We noticed / This product offers / Starting point"). YouCam Makeup VTO then previews the shade, with side-by-side shade compare, a before/after result, a "Save this look" download, and a prototype cart with subtotal and remove. Two modes: a clearly labeled recorded mode (default, public) replays results captured from real YouCam calls so judges need no key and spend zero credits; live mode runs the same routes against the real YouCam API server-side, behind a protected-deployment gate.

How we built it

Stack: Next.js 16 + React 19 + strict TypeScript + Tailwind 4; Node's built-in test runner with tsx (56 tests: route boundaries, adapters, journey reducer, recommendations); self-hosted variable fonts (Archivo + Fraunces via @fontsource-variable/*) so the production build works fully offline; security headers, custom 404/error screens, skip link, focus management, prefers-reduced-motion.

The browser only talks to our own route handlers, which delegate to typed server adapters — both YouCam APIs are asynchronous (host yce-api-01.makeupar.com): register the file with POST /s2s/v2.0/file, PUT bytes to the pre-signed URL, create a task, then poll. Skin AI: POST /s2s/v2.1/task/skin-analysis with {"format":"json", src_file_id, dst_actions:["acne","pore","moisture"]}, polling every 2 s up to 10 times; we surface only ui_score (higher = better). VTO: POST /s2s/v2.0/task/makeup-vto with a lip_color effect (original shape, full style, catalog swatch hex, matte texture, intensity 100), result read from data.results.url. Budgets are bounded (120 s upload, 20 s/request, 45 s adapter deadline, 420 s abortable client), provider URLs are HTTPS-validated, responses are no-store, and no credential, task ID, or signed URL ever reaches the browser.

Recommendations are deterministic and explainable, not a black box. Each product pp is scored against observed concerns OO, chosen finish f∗f∗ and occasion o∗o∗:

s(p)=3 ∣Cp∩O∣+4 1[fp=f∗]+2 1[op=o∗]+b(fp)s(p)=3∣Cp​∩O∣+41[fp​=f∗]+21[op​=o∗]+b(fp​)

where CpCp​ is the product's target concerns and b(fp)∈{2,1,0}b(fp​)∈{2,1,0} is its finish's rank in a skin-derived preference order (e.g. acne≥85acne≥85 or pore≥70pore≥70 → sheer leads; moisture<65moisture<65 → satin leads). Even swatch-label contrast uses WCAG luminance, with c=C/255c=C/255 per sRGB channel:

L=0.2126Rlin+0.7152Glin+0.0722Blin,clin={c/12.92,c≤0.03928((c+0.055)/1.055)2.4,c>0.03928L=0.2126Rlin​+0.7152Glin​+0.0722Blin​,clin​={c/12.92,((c+0.055)/1.055)2.4,​c≤0.03928c>0.03928​

(dark text when L>0.45L>0.45, light otherwise). Mode is server-env-only; live additionally requires GLOWCART_LIVE_DEPLOYMENT=protected + server-only YOUCAM_AUTHORIZATION and fails closed (503) otherwise, so a public deployment can never spend API units or leak a key.

Challenges we ran into

Provider docs were unreachable from our dev environment (DNS/TLS failures) and blind auth-header guesses got 401. We verified the real contract through YouCam's official agent skill, the API playground, and one controlled live probe per API — recording only sanitized results, never credentials. Judge access vs. real integration: the rules expect the project to be testable without private keys, so we built the two-mode design — recorded mode replays genuine captured YouCam responses (credited in public/demo/CREDITS.md), every recorded surface is labeled, and the UI validates source === mode. A real bug caught before submitting: in recorded mode the result screen showed the same photo for before/after. Fixed to display the actual recorded YouCam render pair, labeled "demo face · not your photo", with the labeled simulation kept only as a fallback — plus a regression test. Credit-abuse risk: a public live route would let anyone drain the 1,000 free units, hence the protected gate and fail-closed 503; .env* is gitignored and secrets are server-only. Image edge cases: transparent PNGs turned black on JPEG export (fill white first), camera preview needed mirroring, oversize uploads needed 413 passthrough, and YouCam rejects badly framed faces (error_src_face_too_small, error_large_face_angle) — so the UI asks for an upright front-facing face. No browser automation in our environment, so behavior is pinned with 56 Node route/adapter/reducer tests instead. Also learned the hard way that the deadline is Nov 2, 2026, 11:45 EST = 22:15 IST (US fall-back on Nov 1).

Accomplishments

that we're proud of Both YouCam integrations were verified live on 2026-10-31 with controlled probes: Skin AI returned acne 99 / pore 61 / moisture 72, and a Sun Coral Makeup VTO render completed — then captured sanitized into labeled recorded fixtures. 56/56 tests, clean typecheck, offline-safe production build; the public recorded demo runs the full journey with zero keys. A fail-closed security design: live mode 503s unless explicitly enabled on a protected deployment; zero secrets in the repo or browser; tests pin zero provider calls in recorded mode. Honest labeling everywhere — no fixture is ever presented as a fresh inference — and a before/after bug found and fixed with a regression test right before submission. A complete guest journey (discover → capture → snapshot → matches → try-on → result/cart) that a judge can finish uncoached in under two minutes, on a public MIT-licensed repo with a deployed HTTPS demo.

What we learned

YouCam's APIs are register → upload → create task → poll services; every call needs a bounded polling budget (we poll every Δ=2 sΔ=2s, max N=10N=10) and cancellation, with task states moving pending→running→success/failedpending→running→success/failed. Skin-analysis action families (SD vs HD) must not be mixed, and only ui_score is meant for users — raw scores and signed URLs get discarded. Never guess an auth header; verify the contract through official docs/skills/playground, and keep credentials server-side only. The project must be judge-runnable without credentials, which is why an honestly labeled recorded mode (real captured responses) plus a fail-closed live mode is the right pattern. next/font/google breaks builds without Google access — self-hosting fonts made our build deterministic; and deterministic, explainable scoring builds more user trust than a black box.

What's next for GlowKart

Swap the static 6-shade catalog for a real product database without touching the UI; add accounts with saved looks and try-on history; extend VTO beyond lipstick to full-face makeup categories; and measure the real business lift — conversion and return-rate reduction from try-before-you-buy — with retailer analytics. Beauty guidance only, always: no medical claims.

Built With

Share this project:

Updates

Submission history