SwapNight

Swap clothes that suit you. See them on you first.

Comment

Inspiration

Every closet has that one piece you bought for a version of yourself who goes to a lot more festivals. Clothing swaps should be the answer, but they break down for three reasons:

  1. No reciprocal match. You love her blouse, but she doesn't want your jacket. Without a direct trade, nobody swaps.
  2. No try-on. You can't see how something looks on you until you're standing in someone's living room, committed.
  3. No color confidence. Even if it fits, will that shade actually work with your skin tone?

We built SwapNight to fix all three — using YouCam's AI to give people the confidence to say yes before anyone hands over a thing.

What it does

SwapNight is a mobile-first private clothing-swap app. Hosts create invite-only events, participants add pieces they're willing to give away, and the app handles matching, try-on previews, and the swap itself.

Colors that love you (YouCam AI Facial Color Tones Analyzer)

One close-up selfie. YouCam's Facial Color Tones Analyzer reads the colors of your skin, lips, brows, and hair. SwapNight takes those hex values and runs its own palette logic — converting to OKLab/OKLCH color space to determine your undertone (warm, neutral, or cool), depth, contrast, and seasonal palette.

The rack sorts "Flatters you first", and every garment gets a match badge: Flatters you, Works on you, or Bold pick. We never call a color "wrong." The selfie is streamed to YouCam for analysis and never stored by SwapNight — only the resulting tone values are kept, and users can delete those anytime.

See it on yourself (YouCam AI Clothes API)

Tap Generate real try-on and YouCam's AI Clothes v4 renders the garment on your photo. The task ID is persisted, so you can close the app and come back later — the result picks up where it left off. Finished previews are stored privately in Supabase with short-lived signed URLs. You can delete both your source photo and any preview at any time.

The key moment: when the swap proposal arrives, your try-on preview sits right above the Accept button. You see it on you before you commit.

The circle (deterministic cycle matching)

Sara doesn't want your jacket. But Sara wants Lina's cardigan, and Lina wants your jacket. No two-person trade exists — but a three-person circle does.

SwapNight's matching engine finds two- and three-person cycles using only explicit preferences. No AI is guessing what you'd like. A match only happens when each person has explicitly said yes to a specific item. The engine is pure, deterministic, and unit-tested.

The full lifecycle

  • Atomic reservations: The first acceptance locks all items in the cycle.
  • Handover checklist: Condition check, fitting opportunity, physical exchange — completion requires every participant to confirm.
  • Cancellation and expiry: Proposals expire after 24 hours. Anyone can decline, but once a physical handover starts, cancellation is blocked.
  • Private events: Invite-only, not a marketplace. Every query is scoped to the authenticated user and their event.
  • Solo demo: Try the entire lifecycle alone with three fictional adult participants (Maya, Sara, Lina) in isolated browser-local state.

How we built it

  • Next.js 16 with TypeScript and Tailwind v4 for the frontend
  • Supabase for Auth (email/password), Postgres (transactional RPCs with revision-checked commits), and private Storage (signed URLs, owner-scoped access)
  • YouCam REST API — two integrations:
    • AI Facial Color Tones Analyzer (skin-tone-analysis) for reading facial color values
    • AI Clothes (cloth-v4) for virtual try-on generation
  • Cloudflare Workers via @opennextjs/cloudflare (OpenNext) for deployment
  • Custom color science in lib/swap/palette.ts — OKLab/OKLCH conversion, undertone derivation from skin hue nudged by hair and eye color, seasonal palette assignment, and perceptual color distance scoring

The matching engine (lib/swap/engine.ts) is a pure function with no side effects. Concurrency is handled at the database layer with Postgres revision-checked commits.

Challenges we ran into

The matching problem. When nobody has a reciprocal match, you need cycle detection across three owners with explicit bilateral preferences. Getting the algorithm right — and proving it's deterministic — took careful work and thorough unit tests.

Color science from raw hex values. YouCam's Facial Color Tones Analyzer returns hex values but doesn't return undertone or season. We built that ourselves: converting to OKLab/OKLCH, deriving undertone from skin hue (nudged by hair and eye color), mapping to a four-season palette, and scoring garment colors by perceptual distance.

Resumable try-on tasks. YouCam AI Clothes generation takes 30–90 seconds. We persist the provider task ID, poll at bounded intervals, and let users navigate away and return. A crash before the task ID is saved leaves a bounded failed state rather than silently double-submitting.

Transactional concurrency. When three people are accepting the same proposal, the reservations have to be atomic. We use Postgres revision-checked commits with row-level locking, and every command is idempotent.

Accomplishments we're proud of

  • Both YouCam APIs integrated end-to-end on the deployed production app — real API calls, real storage, real results.
  • The reveal moment. When the swap proposal arrives and your genuine YouCam try-on preview is sitting right above the Accept button — that's when the whole product clicks.
  • 31 automated tests — 21 Vitest unit/integration tests and 10 Playwright end-to-end tests — all passing on local dev and the deployed Cloudflare URL.
  • Private by design. Selfies never stored. Try-on photos owner-scoped with short-lived signed URLs. Everything deletable. Server secrets verified absent from public assets.

What we learned

  • Integrating YouCam's AI APIs in a real application — task lifecycles, polling strategies, credit management, and the difference between what the API returns (hex values) and what users need (seasonal palette guidance).
  • OKLab and OKLCH color spaces for perceptual color matching.
  • Deploying Next.js 16 to Cloudflare Workers with OpenNext.
  • Building transactional multi-party workflows in Postgres where timing, idempotency, and conflict resolution all matter.

What's next

  • More garment categories — dresses, accessories, shoes — with category-aware try-on.
  • Larger swap circles — four+ person cycles to unlock more matches in bigger events.
  • Store-hosted take-back nights — brands hosting swap events to keep clothes in circulation.
  • Group invites and friend connections — easier organization with your actual friend group.

Built With

Share this project:

Updates

Submission history