ShadeMatch

Inspiration

Wrong-shade purchases are one of the biggest causes of beauty returns, and shoppers with deeper or less-represented skin tones are hit hardest because catalogs rarely cover them well. We wanted to fix this from both sides: help the shopper find the right match, and show the retailer where their range is failing.

What it does

• Shop: upload a selfie, get skin tone, undertone, skin type and top concerns, then a catalog re-ranked by a Match score with a one-line reason for each product, plus a try-on preview labeled "Visual preview, not a guarantee."
• Gift mode: a toggle that switches the flow to shopping for someone else, with a shareable gift-note card.
• Retailer dashboard: skin-tone distribution, top concerns, a Catalog Gap Report showing high-demand tones and concerns with few matching products, and an estimated return-reduction impact.

How we built it

Next.js, React, TypeScript and Tailwind, with Framer Motion for the scan, ring and slider animations and Recharts for the dashboard. All YouCam calls go through one service layer (analyzeSkin, analyzeTone, tryOn) behind server-side API routes so the key never reaches the browser, with a graceful fallback to sample data.

Challenges

Handling the asynchronous upload, task and poll flow, and designing for slow or failed calls so the demo never breaks.

What's next

Live try-on for every product, real retailer catalog import, and using aggregated scan data to recommend which shades to stock.

Built With

• framer-motion
• next.js
• react
• recharts
• tailwind-css
• typescript
• vercel
• youcam-api