GlowFit AI

An AI beauty & fashion decision engine that combines skin context, personal style, digital wardrobe intelligence, and virtual try-on into one personalized look.

Comment

Inspiration

I was inspired by a simple observation: choosing what to wear is often less about having enough clothes and more about having the right context.

I noticed that beauty analysis, fashion recommendations, wardrobe management, and virtual try-on are usually treated as separate experiences. A user may receive a skin analysis from one tool, an outfit suggestion from another, and a virtual try-on from a third, but the user is still responsible for connecting everything and making the final decision.

I wanted to build something that connects those pieces into one meaningful experience.

My goal was not to build another virtual try-on demo. I wanted to create a decision layer around visual AI that considers the user's context, explains its recommendation, uses what the user already owns, and then lets the user validate the result visually.

That idea became GlowFit AI.

What it does

GlowFit AI guides the user through an end-to-end beauty and fashion journey:

Skin Context → Styling Context → Explainable Recommendation → Digital Wardrobe → Virtual Try-On → Final Result

Skin AI Analysis

I use YouCam Skin AI to analyze a portrait and create a beauty context using signals such as radiance, texture, pore, redness, oiliness, moisture, acne, and wrinkle.

I designed this analysis as part of the larger personalization journey rather than as an isolated skin report.

Styling Context

I let the user define the real-world situation:

  • Occasion
  • Personal style
  • Budget

For example:

Job Interview + Elegant + $0 — Use my wardrobe

This gives the recommendation actual constraints instead of relying on generic styling.

Explainable AI Stylist

GlowFit ranks multiple style directions using transparent compatibility signals:

  • Occasion fit
  • Style fit
  • Color harmony
  • Budget fit

For example:

Polished Interview — 95/100

The score is broken down into its contributing factors instead of appearing as an unexplained AI number.

Digital Wardrobe

I built a wardrobe experience where users can organize clothing they already own and use those pieces to build complete outfits.

This creates an important alternative to purchase-first fashion discovery:

Use what you already have.

Virtual Try-On

After the recommendation is selected, I use YouCam Apparel Virtual Try-On to visualize the selected garment on the user's photo.

I intentionally positioned VTO as the final visual validation step rather than making it the entire product.

How I built it

I built GlowFit AI as a full-stack web application.

Frontend

I used:

  • Next.js 16
  • React
  • TypeScript
  • Tailwind CSS

The frontend contains the complete user journey:

Home
↓
Skin Analysis
↓
Styling Context
↓
AI Stylist
↓
Digital Wardrobe
↓
Virtual Try-On
↓
Final Result

Backend

I built a FastAPI backend in Python to handle the integration with YouCam services.

The backend exposes dedicated routes for:

  • Skin analysis
  • Virtual try-on

I designed the YouCam APIs as building blocks inside a larger product flow rather than treating them as the product itself.

Browser-side data

For the MVP experience, I used browser storage to keep the experience lightweight and local:

  • sessionStorage for small workflow state and analysis results
  • IndexedDB for wardrobe image data

This became especially important because wardrobe images are too large to rely on browser session storage safely.

Recommendation layer

I added my own application logic around the visual AI capabilities.

The recommendation flow combines:

Occasion
+
Style
+
Budget
+
Wardrobe
        ↓
Compatibility scoring
        ↓
Recommended look
        ↓
Virtual validation

This is the layer that turns individual APIs into a connected consumer experience.

Challenges I ran into

1. Making the experience more than an API wrapper

One of my biggest challenges was deciding what GlowFit itself should own versus what YouCam should provide.

I deliberately designed YouCam Skin AI and YouCam VTO as capabilities inside a broader workflow.

GlowFit owns the surrounding decision process: context, scoring, wardrobe logic, recommendation flow, and final presentation.

2. Virtual try-on upload flow

The VTO workflow required registering image files, receiving upload instructions, uploading the images correctly, creating the VTO task, and polling the task until completion.

I also had to handle failures and asynchronous task states without breaking the frontend experience.

3. Browser storage limitations

At one point, storing wardrobe data inside sessionStorage caused a QuotaExceededError because the image data exceeded the browser storage quota.

I redesigned the storage flow so that larger wardrobe image assets use IndexedDB while lightweight state remains in sessionStorage.

4. Frontend/backend connectivity

During development, I encountered Failed to fetch errors between Next.js and FastAPI.

I resolved the issue by correctly configuring CORS and ensuring the frontend and backend were communicating through the expected local addresses and ports.

5. External service connectivity

The YouCam VTO workflow also experienced a temporary DNS resolution problem while accessing the S3-backed upload URL.

I verified the issue at the network level rather than changing working VTO code unnecessarily.

6. Making the final experience cohesive

Another challenge was making Skin AI, styling, wardrobe, and VTO feel like one product rather than four unrelated screens.

I addressed this by creating a consistent visual language and connecting every stage through a single user journey.

Accomplishments that I'm proud of

A complete end-to-end experience

I successfully connected:

YouCam Skin AI + GlowFit styling logic + Digital Wardrobe + YouCam VTO

into one working journey.

An explainable recommendation

Instead of only showing a look, GlowFit can explain the recommendation through compatibility signals such as occasion, style, color, and budget.

Wardrobe-first styling

One of the parts I am most proud of is that the user does not have to start with shopping.

GlowFit can build a look from pieces the user already owns.

VTO as decision validation

I intentionally positioned virtual try-on after the recommendation so the user can visualize a decision rather than simply generate an image.

A production-oriented architecture

I built the project with a separate Next.js frontend and FastAPI backend, protected environment variables, reusable API services, structured routes, and documented setup instructions.

What I learned

I learned that integrating AI APIs is only one part of building a useful product.

The harder problem is deciding how the technology should fit into the user's decision journey.

I also learned that:

  • Context makes recommendations more useful.
  • Explainability makes recommendations easier to trust.
  • Wardrobe-aware recommendations can create value without requiring a purchase.
  • Virtual try-on is more powerful when it validates a recommendation instead of existing as an isolated feature.
  • Browser storage constraints matter when working with image-heavy applications.
  • Product UX and technical architecture have to evolve together.

Most importantly, I learned that a strong AI product should not simply ask:

What can the API generate?

It should ask:

What decision can this technology help the user make better?

What's next for GlowFit AI

GlowFit AI is currently an MVP focused on the core end-to-end experience.

My next steps would be:

Smarter personalization

Use richer wardrobe, preference, and interaction history to improve recommendations over time.

Retail-aware recommendations

Connect recommendations with product catalogs so users can distinguish between:

  • What they already own
  • What complements their wardrobe
  • What may be worth purchasing

More complete outfit visualization

Expand virtual try-on from a primary garment preview toward more complete outfit visualization where supported.

Persistent user profiles

Move beyond the local browser MVP toward secure user accounts and persistent wardrobes.

Preference learning

Allow the system to learn from actions such as saved looks, rejected recommendations, and repeated styling choices.

Broader styling scenarios

Extend the experience to travel, events, workwear, everyday dressing, modest fashion, and other context-driven decisions.

Ultimately, my vision for GlowFit AI is to build a context-aware beauty and fashion decision assistant that helps people make better choices with both the clothes they already own and the products they may consider buying.

Built With

Share this project:

Updates

Submission history