Inspiration

Every morning, millions of people stand in front of their wardrobe and feel lost. Not because they don't have clothes — but because nobody has ever told them what actually works for their face, their skin tone, their body shape, and the occasion they're dressing for. Beauty and fashion have always been sold as one-size-fits-all. Foundation shades that don't match. Outfit recommendations that ignore your undertone. Style guides written for a body type that isn't yours.

We built GlowFit

because personalization in fashion and beauty is still broken — and Perfect Corp's AI and AR APIs gave us the tools to actually fix it. One selfie should be enough to unlock a complete, scientifically matched, head-to-toe look. So we built exactly that.

What it does

GlowFit is an AI-powered personal style and skincare advisor that transforms a single selfie into a complete, personalized look — in under 60 seconds.

Here's the full flow:

1. Selfie — The user takes a photo via webcam or uploads one. No account needed.

2. Skin Analysis — Perfect Corp's AI analyzes skin type (oily, dry, combination, normal), undertone (warm, cool, neutral), face shape, and active skin concerns like hyperpigmentation, fine lines, or large pores.

3. Style Quiz — A fast 3-question visual quiz captures the user's style vibe (minimalist, bold, streetwear, classic, bohemian), body shape, and budget. Answers in under 20 seconds.

4. Occasion Selection — The user picks their context: job interview, date night, wedding guest, casual day out, or night out. This anchors the entire recommendation.

5. The Look — A personalized, gender-aware complete look is generated: outfit, shoes, accessories, and makeup or grooming products — all matched to the user's undertone, face shape, body silhouette, style vibe, occasion, and budget. Perfect Corp's virtual try-on APIs render the look directly on the user's photo.

6. Shareable Look Card — A downloadable 9:16 styled card with the user's look, occasion label, and top product picks. One tap to share.

7. Saved Profile — The skin analysis and style profile is saved locally so returning users skip straight to occasion selection.

The personalization engine runs a multi-layered filter matrix — undertone drives color palette, body shape drives silhouette, style vibe drives aesthetic, occasion drives formality, and budget drives price tier. Every combination of inputs produces a genuinely different result from a catalog of 50+ tagged products.

How we built it

Frontend: React 18 + Vite, Tailwind CSS, Framer Motion for page transitions, html2canvas for the shareable look card download. The UI follows a dark editorial aesthetic — Cormorant Garamond for display text, DM Sans for body, rose-gold accent throughout — designed to feel like a luxury fashion app, not a hackathon project.

Backend: Supabase Edge Functions acting as a secure API proxy. All Perfect Corp API calls happen server-side. The frontend never touches an API key — it only calls internal /api/* routes. Keys live exclusively in environment variables.

Perfect Corp APIs used:

face-skin-analysis — skin type, undertone, concerns, face shape clothes-vton — clothing virtual try-on accessories-vton — bags and jewelry makeup-vton — lip color and foundation matched to undertone Personalization Engine: A custom personalizationEngine.js module that filters and ranks a 50+ item tagged product catalog across 7 dimensions: gender, undertone, occasion, style vibe, body shape, budget, and skin concern. The engine always returns exactly 3 outfit items, 2 shoes, 2 accessories, 3 makeup/grooming items, and 3 skincare items — each with a "why this?" rationale surfaced on hover.

Challenges we ran into

API authentication complexity. Perfect Corp's server-to-server flow requires RSA-OAEP encryption of credentials to generate a short-lived access token before every API call. Implementing this correctly inside Supabase Edge Functions — where the crypto environment differs from Node.js — took significant debugging. We got it working with the Web Crypto API instead of Node's built-in crypto module.

Gender-aware recommendations from a cold start. Our first pass defaulted to women's clothing for all users. We rebuilt the entire product catalog and personalization logic to be gender-aware from the ground up — with a dedicated men's grooming tab replacing makeup, and entirely different silhouette rules per body shape.

Keeping the 60-second promise. Running skin analysis + 3 try-on API calls sequentially was too slow. We parallelized the style-look calls with Promise.all on the backend and added animated loading screens that show the user's photo while processing — so perceived wait time dropped even though actual time didn't change much.

Catalog variety without a database. We needed 50+ products with 7 tags each to guarantee uniqueness across input combinations — all without a backend database. We built a flat JS catalog with a deterministic filter + randomSeed system so the "Refresh Look" button always surfaces genuinely different results without an API call.

Accomplishments that we're proud of

The first styling app we know of that connects skin biology (undertone, skin type, face shape) directly to wardrobe and makeup decisions — treating them as one system instead of two separate products. A complete personalization matrix that produces meaningfully different outputs for every combination of gender, skin tone, style vibe, body shape, and occasion — not just swapping a color. A production-grade security architecture from day one — zero API keys on the frontend, full server-side proxy, environment variable discipline throughout. Built and shipped end-to-end in under 48 hours — landing page, 9-page flow, backend proxy, personalization engine, virtual try-on integration, shareable look card, and mobile responsiveness. The shareable look card feature — the virality mechanism that makes GlowFit spread organically. Every user who downloads their card is a piece of organic marketing.

What we learned

We learned that personalization depth is a product differentiator, not a nice-to-have. The moment we added the body shape and style vibe layer, the recommendations stopped feeling like a demo and started feeling like something a real person built for you specifically.

We learned that Perfect Corp's API suite is genuinely powerful — the skin analysis scores are detailed enough to build real downstream logic on, not just display. The undertone output alone is enough to drive an entire color palette recommendation system.

We learned that perceived speed matters as much as actual speed. Showing the user their own face while the AI works — rather than a blank spinner — reduced drop-off during the loading screens dramatically.

And we learned that a clear monetization story matters in hackathon judging. Every product card has a shop link. Every skin concern leads to a product recommendation. GlowFit has a natural affiliate revenue model baked into its core loop — not bolted on afterward.

What's next for GlowFit

Short term:

Live AR try-on mode using the device camera (not just static photo) User accounts with full look history and skin progress tracking over time Climate-aware recommendations — the app knows your city's weather and adjusts layering accordingly Medium term:

Brand partnership API — retailers pay to surface their products inside GlowFit's recommendation engine, targeted by skin tone and style profile "Shop the look" one-click cart builder that aggregates items from multiple retailers Social features — share your look, see what others with similar profiles are wearing Long term:

B2B white-label for fashion retailers — embed GlowFit's personalization engine inside any e-commerce site to reduce return rates (which average 30%+ for online fashion) Seasonal wardrobe auditor — upload your existing wardrobe, GlowFit tells you what works, what doesn't, and what one item would complete your capsule The vision is simple: your face is the most honest data point about what looks good on you. We're just building the infrastructure to finally use it.

Built With

• react
• tyepscript