Inspiration

Planning a bridal party usually spirals into a chaotic mix of group chats, screenshots, Pinterest boards, and someone inevitably asking "wait, does this actually match?" three days before the fitting. I wanted to solve that: let the bride set the overall vibe, let each bridesmaid try things on for herself, and let everyone see how the group looks together — before anyone commits to buying.

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, I 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 I build it I 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. I 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 I ran into

The biggest technical wall was keeping the YouCam API, VTO processing, image storage, database state, and UI in sync without making the user wait unnecessarily. I used asynchronous requests with Promise.all() where the tasks Ire independent, so things like dress analysis and other preview data could load in parallel instead of blocking each other.

For the VTO itself, I tracked the YouCam task status and polled for completion, then updated the UI only after the render was successfully stored. This gave us a much more responsive experience while keeping the workflow consistent.

Accomplishments that I am proud of

What I'm most proud of is that this project doesn't stop at generating a single virtual try-on image — it becomes part of a real bridal-party workflow.

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

I'm especially proud of the real-time collaboration piece. The lineup isn't just a set of individual views stitched together — the bride and bridesmaids can watch changes propagate live across the shared workspace, exchanging suggestions without ever needing to refresh the page.

I'm also glad the core workflow leans on real AI services while keeping the color-compatibility logic as transparent, lightweight math — rather than burying it inside another black-box AI recommendation system.

What I 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.

What's next for VOWS&VIBE

Venue-aware styling: Use IC-Light to account for the venue's lighting and environment, helping brides evaluate how their selected dresses may look in the actual setting and flag potential visual mismatches.

Trend discovery: Bring relevant dress trends and inspiration into the workspace through social-media and fashion data, so brides and bridesmaids can explore current styles while building their looks.

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

Share this project:

Updates