-
-
D'Fashion home — AI-powered personal colour intelligence and fashion discovery.
-
Personalised dashboard showing colour identity, profile completion, and the user's current colour palette.
-
AI-powered colour analysis — upload a photo to discover your seasonal colour profile and personalised palette.
-
Secure photo upload for personalised colour analysis, with camera and previous-photo options.
-
Personal colour report with seasonal profile, skin analysis, undertone, and personalised insights.
-
Virtual Try-On lets users preview selected outfits on their own image before buying.
-
D'Style provides personalised styling advice based on the user's colour profile and preferences.
-
Choose an outfit, try it on instantly, and download your personalised look for free.
-
Preview different makeup looks and explore options that complement the user's personalised colour profile.
-
AI-powered look exploration lets users compare different beauty styles before choosing a look.
-
Explore different hairstyles and preview how they look with the user's personalised appearance.
-
Men's fashion discovery with outfits across traditional, casual, and contemporary styles.
-
Men's Virtual Try-On lets users preview selected outfits on their own image before buying.
Inspiration
We started with a simple observation: choosing clothes that actually suit you is often harder than it should be. People see hundreds of colours and styles online, but very little of that experience is personalised to them.
Professional colour analysis can help, but it is not something everyone can easily access. We wanted to bring that experience into a simple web platform where a user could upload one photo and get useful, practical guidance about their colours and style.
That idea became D'Fashion.
What it does
D'Fashion combines colour analysis, fashion discovery, virtual try-on, and AI styling into one experience.
A user starts by uploading a photo. The platform analyses the image and identifies their undertone, colour characteristics, and one of twelve seasonal colour profiles. It then generates a personalised palette along with suitable colours, neutrals, and styling guidance.
From there, users can explore outfits across different categories and occasions. They can preview selected outfits on their own image using Virtual Try-On, explore makeup and hairstyle options, and save looks they like.
D'Fashion also includes D'Style, an AI stylist that uses the user's colour profile and saved looks to provide more relevant fashion advice instead of generic recommendations.
The idea is to take the user from understanding their colours to actually seeing and exploring styles that work for them.
How we built it
D'Fashion is built as a full-stack web application.
The frontend uses React, TypeScript, Vite, Tailwind CSS, Framer Motion, TanStack Query, and Zustand. The backend is built with Express and TypeScript, with MongoDB and Mongoose handling application data.
We integrated YouCam AI for skin and colour analysis and Virtual Try-On. The application communicates with these services through our backend, so API credentials are never exposed to the browser.
The main flow of the product is:
Photo Upload → Colour Analysis → Personal Report → Fashion Discovery → Virtual Try-On → AI Styling
We also implemented authentication, user history, saved looks, product browsing, and a personalised dashboard so that the experience continues beyond a single analysis.
Challenges we ran into
The biggest challenge was bringing several different capabilities together without making the product feel like a collection of unrelated features.
Colour analysis, outfit discovery, Virtual Try-On, and AI styling each have different requirements, so we had to design the application around one consistent user journey.
Integrating external AI services was another important challenge. We had to handle API requests, responses, errors, and asynchronous try-on processing while keeping the user experience smooth.
We also paid attention to security. Third-party AI credentials are handled on the server rather than being exposed to the client.
Accomplishments that we're proud of
We are particularly proud that D'Fashion became a complete working experience rather than a standalone AI feature.
A user can start with a single photograph, receive a colour profile, explore a personalised palette, discover outfits, try them on virtually, and get styling advice from D'Style — all within the same platform.
We also built the product with both women's and men's fashion in mind and included categories ranging from everyday and office wear to festive, wedding, traditional, party, and other occasions.
Seeing the complete journey work together in a live web application is what we are most proud of.
What we learned
Building D'Fashion gave us practical experience in connecting AI capabilities with a real user-facing product.
We learned that integrating an AI service is only one part of building an AI application. The surrounding experience matters just as much — how the result is presented, how users act on it, and how different features connect to solve the original problem.
We also gained experience with full-stack development, API integration, authentication, asynchronous workflows, database management, and keeping sensitive credentials on the server.
What's next for D'Fashion
There is a lot we would like to build on top of the current product.
We want to improve the accuracy of colour analysis and Virtual Try-On, make recommendations more personalised over time, and expand the wardrobe experience so users can build and manage their own digital wardrobe.
We also see opportunities to make D'Style more context-aware by considering a user's preferences, previous choices, saved looks, and specific occasions.
Our long-term vision is for D'Fashion to become a personal fashion companion that helps people understand what suits them, discover new styles, and make more confident fashion decisions.
Built With
- express.js
- framer-motion
- jwt
- mongodb
- mongoose
- node.js
- react
- tailwind-css
- tanstack-query
- typescript
- virtual-try-on
- vite
- youcam-ai
- zustand
Log in or sign up for Devpost to join the conversation.