SwapLook

Sold out? Find up to three in-stock alternatives within your size and budget, compare YouCam AI try-ons, and discover alternative lipstick shades.

Comment

Inspiration

You find a top you love, select your size, and see “Sold out.” The shopping journey ends just when you were ready to choose.

We built SwapLook around that moment. Instead of showing unrelated recommendations, we wanted to preserve what matters: the shopper’s size, budget and preferences, while helping them see how an alternative could look on them.

What it does

SwapLook turns a sold-out favorite into up to three available alternatives.

  • Keep your constraints. Stock, size, budget and required attributes are hard rules. SwapLook never silently relaxes them.
  • Understand the alternatives. Each recommendation explains what matches and what differs from the original.
  • See the swap on you. YouCam AI Clothes Try-On previews an alternative using a fictional demo model, a consented photo upload or a live selfie.
  • Compare on the same person. Side-by-side previews help shoppers inspect the differences before choosing.
  • Recheck before choosing. The server transactionally checks stock and price again. An item that sells out during comparison cannot produce a false success.

A separate Beauty pilot extends the idea to 12 fictional lipstick shades. Optional YouCam Facial Color Tones Analyzer estimates skin and lip colors for contrast exploration, and Makeup VTO previews a selected palette on the same face.

The Merchant Studio shows demo substitution choices and provides authenticated stock controls and an AI preview switch.

Catalog names, prices, stock and lipstick palettes are demo data. A saved choice is neither payment nor inventory reservation. Previews illustrate appearance; they do not guarantee physical fit or exact retail shade fidelity.

How we built it

The frontend uses React, TypeScript, Vite and Tailwind CSS. The backend uses Go and PostgreSQL, with pure domain rules, application-owned ports and separate infrastructure adapters.

We integrated four YouCam capabilities:

  1. AI Clothes Try-On: renders an alternative top on the selected person.
  2. Facial Color Tones Analyzer: estimates skin and lip colors for optional contrast exploration.
  3. Makeup VTO: applies a selected demo lipstick palette, with skin smoothing and lip reshaping set to zero.
  4. AI Image Generator: created three fictional demo models, allowing visitors to explore without uploading a personal photo.

The Go backend handles file uploads, task submission, spaced polling and private result storage. YouCam credentials remain server-side.

Recommendations use deterministic filtering and ranking. Persistent generation caps, result reuse and an owner switch control provider usage. Provider errors never silently fall back to simulated results.

Uploads require consent. Photos and results have session-owned access, application deletion and expiry.

Challenges we ran into

Image preparation mattered. Early in-app clothing requests failed even though a command-line request worked. We traced the difference to 16-bit PNG normalization; changing to 8-bit encoding resolved the failures.

Inventory can change during a preview. We needed a transactional final check so the visual experience could not confirm an unavailable item.

AI tasks take time and consume credits. We retained task state, bounded polling, prevented automatic generation retries and reused eligible existing results.

Color analysis has limits. Estimated colors can support exploration, but they do not establish undertone, skin health or skincare suitability.

Accomplishments that we're proud of

  • A working shopping flow with real YouCam results, comparison and final stock checks.
  • Both clothing and lipstick preview integrations verified through the application.
  • Fictional demo models that let visitors explore without sharing their own face.
  • Seven PostgreSQL integration tests, 12 desktop/mobile browser tests and 18 React DOM tests passed during recorded verification.
  • Visible distinctions between real provider results, reused results and illustrations.

What we learned

A successful API call is only one part of a useful product. Input guidance, comparison, privacy, changing inventory and understandable failure states all shape the experience.

We also learned to separate engineering evidence from user validation. Our tests demonstrate working flows; they do not prove conversion improvements or shopper satisfaction. Those outcomes require research with real users.

What's next for SwapLook

  • Test the experience with shoppers and boutique owners, then publish the findings honestly.
  • Connect a real merchant catalog with live inventory.
  • Validate licensed retail lipstick palettes against actual products.
  • Explore additional garment categories after validating the current experience.

Photo sources, licenses and modifications are documented in the repository: https://github.com/fadillaoegi/swaplook-hacketon/blob/main/docs/CATALOG-CREDITS.md

Built With

Share this project:

Updates

Submission history