colorfit

A selfie and 20 swipes find real eBay tops that suit your personal color and match your taste — then YouCam AI lets you try them on before you buy.

Comment

Inspiration

Online fashion shopping asks two questions at once — "does this suit me?" and "is this my style?" and gives you tools for neither. Personal color analysis lives in beauty apps, shopping lives in stores, and because you can't try anything on, you either hesitate or send it back. We wanted one flow that answers both questions and ends with a real product on your own photo.

What it does

  1. Personal color, with evidence. Upload a face photo and an upper-body photo. The YouCam AI Facial Color Tones Analyzer returns your skin, lip, eye, eyebrow and hair colors; ColorFit classifies you into one of 12 personal color types (e.g. Soft Autumn) and shows why - the five detected colors, scores on three axes (warmth, depth, clarity), skin lightness and contrast.
  2. Taste in 20 swipes. Like or dislike outfit photos; a FashionCLIP taste vector is built from your answers (optional: upload outfit photos you love).
  3. Recommendations you can explain. ~1,500 real eBay tops are ranked by 0.7 × taste similarity + 0.3 × color harmony against your 12-type palette, with "avoid" colors penalized. Every card shows why it was picked and its USD price.
  4. Try it on, then buy it. One click sends your upper-body photo and the actual product image to YouCam AI Clothes Virtual Try-On (cloth-v4). Drag a slider to compare original vs. try-on, then Buy now opens the same eBay listing.

The item you try on is the item you buy - not a look-alike.

How we built it

  • YouCam APIs (server-side, async task + polling)
    • skin-tone-analysis - every color field is used. Classification runs in CIE Lab: warmth = skin hue (70%) + lip hue (30%); depth = skin L* (60%) + contrast (40%); clarity = skin chroma (60%) + lip chroma (40%). Warmth × depth gives the season; the most pronounced axis gives the subtype -> 12 types.
    • cloth-v4 — POST /api/fittings returns 202 immediately, a background worker polls YouCam to completion and stores the result in S3, the browser polls for status. Results are cached per (user photo × product), so re-trying an item costs no credits.
  • Recommendation engine - FashionCLIP image embeddings in PostgreSQL + pgvector. Taste vector u = normalize(mean(liked) + w·mean(wardrobe) − β·mean(disliked)). Each product's dominant color is extracted once at ingest (border-pixel background removal + K-means, k=3) and scored by ΔE to the user's palette.
  • Product data - eBay Browse API batch: tops for women and men, embedded, style-classified with FashionCLIP, deduplicated and manually reviewed. Only image URLs are stored, never the images.
  • Frontend - React 19 + TypeScript + Vite, MediaPipe face / upper-body guides for capture, English and Korean UI.
  • Backend & infra - Using Vertical Feature Slicing Harness made by me (https://github.com/najunho04/vertical-feature-slicing-harness-template), Python 3.13 + FastAPI on AWS EC2, Neon Postgres, private S3 with presigned URLs, Vercel for the SPA, GitHub Actions CI -> ECR -> SSM deploy.
  • Process - built solo with "vertical feature slices": each feature (auth, profile, personal_color, swipe, wardrobe, recommendation, fitting, product_ingest) is an isolated slice with frozen contract tests and import-boundary checks, which let AI-assisted sessions work in parallel without breaking each other.

Challenges we ran into

  • Turning five colors into a trustworthy verdict. A season label alone feels like magic; we designed three measurable axes and surface every number so users can see the reasoning.
  • Dominant color of messy product photos. eBay images have random backgrounds and models; estimating the background from border pixels before K-means made colors far more accurate.
  • Real-world API edge cases. YouCam omits hair_color when it can't find hair, and rejects photos over 4096 px. We fill missing hair/eyebrow colors from each other, normalize uploads (EXIF rotation, resize), and log the upstream error code.
  • Credits. Try-on is async and expensive, so every started task is polled to completion (timed-out tasks are still billed) and results are cached.

Accomplishments that we're proud of

  • An explainable personal color result instead of a black-box label.
  • A complete loop from selfie to purchase link in about three minutes, on real products.
  • 300+ backend and 120+ frontend tests, with contract tests frozen before implementation.

What we learned

  • using my own harness, what is matter of my Vertical Feature Slicing Harness. (it is good at isolated development. but if i want to change the base codes, It’s actually a hindrance.)
  • Showing the evidence matters as much as the answer - users trust a result they can check.
  • Async-first design (202 + polling + cache) is essential when an AI call takes tens of seconds and costs credits.
  • Small, isolated slices with machine-enforced boundaries make solo + AI development much more reliable.

What's next

  • Skin analysis (YouCam Skin AI) for skincare and makeup recommendations that match the same personal color.
  • Bottoms, outerwear and full-outfit try-on.
  • Learning from feedback on recommendations, and more marketplaces (e.g. Naver Shopping for Korean users).

Built With

Share this project:

Updates

Submission history