Inspiration

Choosing what to wear online can be difficult because we often cannot visualize how an outfit will actually look on us. We wanted to make this experience more personalized and interactive by combining AI-powered style recommendations with virtual try-on.

This inspired us to build SkinStyle AI, a fashion and beauty assistant that takes a user's selfie and helps them discover outfits that suit their appearance and preferences, while also giving them the ability to virtually try on the recommended looks.

What We Built

SkinStyle AI combines AI-based personalization with virtual fashion try-on to create a more engaging shopping experience.

The user can upload a selfie and receive personalized style recommendations. Instead of simply displaying clothing suggestions, the application is designed to help users visualize themselves in different looks through virtual try-on.

The main flow is:

  1. Upload a selfie The user provides an image through the application.

  2. AI-powered analysis The application processes the image to understand relevant visual characteristics for personalized styling.

  3. Personalized outfit recommendations Based on the analysis, the application suggests suitable fashion choices.

  4. Virtual try-on Users can visualize how selected clothing looks on them using the virtual try-on experience.

  5. Explore and choose Users can compare different styles and find looks they are more confident about choosing.

How We Built It

The project was developed as a full-stack web application.

  • Frontend: Next.js, React, and Tailwind CSS
  • Backend: Python and FastAPI
  • AI / Virtual Try-On: YouCam APIs
  • Development: VS Code, Node.js, npm, Python, and uv
  • Version Control: Git and GitHub

The frontend provides the user interface for uploading images and displaying recommendations and results. The FastAPI backend handles application logic and communication with the external AI services. The YouCam integration enables the virtual try-on functionality.

What We Learned

Building SkinStyle AI helped us learn how to integrate an external AI API into a full-stack application and connect frontend interactions with backend services.

We also gained practical experience with:

  • Building and connecting a Next.js frontend with a FastAPI backend
  • Working with image-based AI applications
  • Managing API keys and environment variables securely
  • Designing an interactive user experience around AI results
  • Debugging dependency and deployment issues
  • Preparing a full-stack project for deployment

One of the biggest lessons was that building an AI application is not only about the AI model itself. The complete experience—from image upload to processing, API integration, displaying results, and making the interface easy to use—is equally important.

Challenges We Faced

One of our biggest challenges was integrating the virtual try-on functionality while keeping the application reliable and easy to use.

We also faced development and deployment challenges involving Python dependencies, Node.js packages, environment variables, API credentials, and connecting the frontend and backend correctly.

During development, we had to debug issues with package installation, backend dependencies, API configuration, and deployment environments. Working through these problems helped us understand how real-world applications behave outside a local development environment.

Future Scope

We would like to extend SkinStyle AI with more personalized recommendations, additional clothing categories, improved styling intelligence, and a smoother virtual shopping experience.

Our long-term goal is to make fashion discovery more personalized by helping users not only find clothes they like, but visualize and confidently choose styles that suit them.

Built With

  • ai
  • computer
  • css
  • fashion
  • fastapi
  • next.js
  • python
  • react
  • tailwind
  • technology
  • try-on
  • virtual
  • vision
  • youcam
Share this project:

Updates