Mirror

AI-powered virtual try-on for luxury fashion, built with React, Express, and Perfect Corp APIs.

Comment

Mirror: The luxury clothing store with virtual try-on

Inspiration

It's hard to tell how clothes will look on you without trying them on. That has always been the downside of shopping for clothes online. But what if you could virtually try on clothes before buying?

Now that powerful AI is here, the next step is to make practical products that help both customer and company sales. Mirror has a virtual try-on tool using Perfect Corps AI APIs to let customers see how a clothing item would look on them, without the need to go to a physical store.

Designs from luxury brand websites like Farfetch and Gucci were used an inspiration for the website design. The virtual try-on tool used together with an elegant design lets people be confident about their decision before hitting the purchase button.

What it does

Mirror is a luxury fashion e-commerce prototype that allows users to:

  • Browse curated products
  • Upload and save personal photos
  • Re-use saved images across the website
  • Generate an AI try-on result using Perfect Corp APIs
  • View the result side-by-side in a refined modal interface
  • Add items to cart directly from the try-on modal
  • The system dynamically routes to different Perfect Corp endpoints based on product type, making the try-on logic scalable across categories.

How we built it

Frontend

  • React
  • React Router
  • Context API
  • Custom luxury-styled CSS
  • localStorage for cart + photo persistence

Backend

  • Node.js (v18+)
  • Express
  • Perfect Corp S2S APIs
  • Local file storage for public image access
  • ngrok for tunneling during development
  • The backend:
    • Saves uploaded user photos to disk
    • Exposes them publicly
    • Starts a Perfect Corp async task
    • Polls until completion
    • Extracts and returns the result image URL
    • Each product type (cloth, shoes, bag, earrings) maps to a different API endpoint and payload structure.

Challenges we ran into

  • Perfect Corp requires publicly accessible image URLs, so localhost images initially failed.
  • Different product categories require different payload schemas.
  • Earrings required stricter validation and nested object structures.
  • The documentation appeared to be a slightly out-of-date at times. For example, in the documentation for shoes, the example photo is just a photo of someone wearing shoes. However, when I tried to use a similar photo, I got an error saying that no face was detected.
  • These challenges forced a deeper understanding of the API integration and image standards.

Accomplishments that we're proud of

  • Full end-to-end working S2S integration with real API polling
  • Dynamic endpoint mapping by product type
  • Clean luxury UI
  • Persistent local photo management
  • Integrated cart experience inside the try-on modal
  • Successful handling of complex earring payload structure
  • It's not a mock. It's a working website that could be used as a blueprint for an online store with a functioning AI try-on feature.

What we learned

  • Public asset management is critical for AI pipelines.
  • API schema differences matter more than expected.
  • Async task polling patterns must be carefully structured.
  • UX design matters just as must as the technical aspects of a website, especially for high-end stores.
  • AI integration works best when it enhances the experience.

What's next for Mirror

  • Deploy to cloud hosting
  • Move storage to S3 or blob storage
  • Add more items
  • Add real items that can be purchased
  • Optimize the mobile experience
  • Add more product categories, including makeup

MIRROR demonstrates how AI try-on can elevate online luxury shopping by transforming static product pages into interactive, confidence-building experiences.

Built With

Share this project:

Updates