VOWS&VIBE

• 

  bride creating an event

• 

  bride in bridal studio

• 

  bridesmaid in bridesmaid studio

• 

  bride is compose studio with Live 2D canvas

• 

  bridesmaid in public lineup board

• 

  youcam AI clothes chnager Results

• 

  youcam AI skin tone analyzer Results

Inspiration

Planning a bridal party usually turns into a mess of group chats, screenshots, Pinterest boards, and someone asking, “wait, does this actually match?” three days before the fitting. We wanted to fix that: let the bride set the vibe, let each bridesmaid try things on herself, and let everyone see the group together before anyone buys anything.

What it does

VOWS&VIBE is a shared styling workspace for a bride and her bridal party. The bride creates an event, picks a palette and dress requirements, and uses AI virtual try-on to test multiple looks. Bridesmaids just click a link — no account needed — try on dresses themselves, and confirm their pick.

Once the looks are confirmed, the whole group appears on a 2D lineup canvas. The bride can drag people around, resize them, reorder the lineup, filter by exact palette or color family, and export the final composition as a PNG.

The lineup is collaborative in realtime. Changes made to the canvas are saved and pushed through Supabase Realtime, so other people viewing the event see the updated arrangement without refreshing.

Participants can also turn Suggestions on, select someone else in the lineup, and leave a quick styling note. Suggestions are delivered in realtime to the relevant participant.

For color analysis, we use YouCam's Skin Tone Analysis to obtain skin and hair color data, convert the values to CIE Lab, and run our own compatibility calculations against each dress.

How we built it

We built the app with Next.js, React, and TypeScript, with Supabase handling the database, authentication, storage, and realtime synchronization.

Virtual try-on runs through Perfect Corp's YouCam AI Clothes Changer API, along with their Skin Tone Analysis API for color data. Both the bride and bridesmaids can generate multiple VTO attempts, which are stored in the vto_attempts table so previous results can be revisited instead of being lost.

The lineup canvas uses Fabric.js. Participant positions, scale, and ordering are persisted so the lineup can be reconstructed consistently when it is reopened.

Supabase Postgres Changes handles the realtime participant and suggestion updates. This keeps the shared lineup synchronized across the bride and bridesmaids without requiring page refreshes.

The color matching uses CIE Lab distance, CIEDE2000, and circular hue-angle distance where appropriate. We also separate palette matching into exact palette matches, same-family matches, and other colors rather than treating every shade as simply match or no-match.

Challenges we ran into

Bride and bridesmaid needed to feel like the same product even though they're doing pretty different things — one has an account and manages the event, while the other joins from a link. Getting a session-based invite flow that could survive a bridesmaid closing the tab and coming back later took more iteration than we expected.

The VTO pipeline was another challenge. YouCam responses are asynchronous, so we had to keep the VTO task, image storage, database state, and UI synchronized without letting one part get out of step with the others.

Making the canvas feel actually shared — not just five people looking at five separate copies of the same screen — was its own problem. A change made by one person needs to reach everyone else while preserving what they're doing locally.

Accomplishments that we're proud of

We're proud that the project goes beyond simply generating a virtual try-on image. The result becomes part of an actual bridal-party workflow.

A bridesmaid can join from a link, try on a dress, get color guidance, confirm her look, and see herself appear in the shared lineup. The bride can then arrange the group, compare colors, send suggestions, and save the final composition.

We're particularly proud of the realtime collaboration. The lineup isn't just a collection of individual views, the bride and bridesmaids can see changes propagate through the shared workspace, and suggestions can be exchanged without manually refreshing the page.

We're also happy that the core workflow uses real AI services while keeping the color compatibility calculations transparent and lightweight rather than hiding everything behind another black-box recommendation.

What we learned

Calling an AI API is only one part of building an AI product. The real work is everything around it — handling asynchronous jobs, keeping state consistent, dealing with failed requests, managing image storage, and making sure the output actually makes sense to the person using it.

Realtime collaboration brought another set of challenges. Database state, canvas state, and multiple people interacting with the same event all have to stay consistent without stale local state overwriting newer changes.

We also learned that color is more nuanced than “match or no match.” Two shades can have completely different names and still belong to the same visual family when compared as actual color data.

What's next for VOWS&VIBE

I want VOWS&VIBE to sit between inspiration and purchase — helping bridal parties make more confident decisions online while giving retailers a better understanding of what their customers are actually looking for

Built With

• fabric.js
• groq
• next.js
• node.js
• react
• supabase
• youcamapi