Care & Wear

💡 What inspired us

We noticed a massive disconnect in the e-commerce world: the beauty industry and the fashion industry rarely talk to each other during the checkout experience. When preparing for a significant event—like a job interview or a first date—people don't compartmentalize their anxiety into "just skin" or "just clothes." The underlying question is always holistic: "Will I feel confident in this?"

Traditional virtual try-ons are amazing, but they often feel purely transactional. We were inspired to build Care & Wear to prove that integrating beauty diagnostics with fashion try-ons can create an empathetic, emotionally intelligent retail experience. Instead of treating skin conditions as "flaws to fix," we wanted to use them as data points to empower styling choices—bridging the gap between skincare context and wardrobe confidence.

🛠️ How we built it

Care & Wear is built using a Zero-Dependency Vanilla JavaScript and CSS frontend backed by a Node.js/Express serverless backend, optimized for deployment on Vercel.

• The Backend: We built a robust proxy server in Node.js to handle the complex, asynchronous YouCam workflows. Instead of exposing API keys in the browser, the backend orchestrates Server-to-Server file uploads, executes task creation, and aggressively polls for completion status.
• The Frontend: The UI is crafted with custom, premium micro-interactions. We used raw CSS math to calculate 3D parallax tilt effects that track mouse movements on the cards.
• The Integration: We integrated two major Perfect Corp APIs: the YouCam Skin Analysis API (extracting all 16 hd_ parameters and rendering visual overlay masks on the user's portrait) and the YouCam Apparel VTO API / AI Clothes v3 (generating hyper-realistic fashion try-ons). We tied them together with a bespoke logic engine that dynamically translates skin parameters (e.g., redness, radiance) into actionable color theory and fabric texture advice for the user's outfit.

🚧 Challenges we ran into

• Asynchronous API Orchestration: The YouCam APIs require a multi-step process (Upload File $\rightarrow$ Get File ID $\rightarrow$ Create Task $\rightarrow$ Poll Task ID $\rightarrow$ Fetch Result). Handling this entirely in the backend while keeping the frontend UI responsive and informative (with custom loading states) required writing resilient, promise-based polling logic.
• Meaningful Data Translation: We received 16 different hd_ skin data points from the Skin AI API. The challenge was: How do we make this useful for fashion? We solved this by mapping specific skin traits (like dark circles or texture) to fashion principles (like using saturated colors to counter shadows, or structured fabrics to complement skin texture), turning clinical data into a personalized "Wear Strategy."
• Advanced UI Masking: Rendering the Before/After Virtual Try-On slider seamlessly without distorting the high-resolution output from the YouCam API required writing precise CSS clip-path logic bound to touch/mouse drag events.

🧠 What we learned

• The Power of API Synergy: Combining two distinct AI APIs (Skin + Apparel) creates a product experience that is infinitely greater than the sum of its parts.
• Empathetic UX Design: We learned that how you present data matters just as much as the data itself. By framing skin analysis results as "visual context" rather than "problems," the entire virtual try-on experience shifted from feeling analytical to feeling profoundly supportive and empowering.

Built With

• css3
• express.js
• html5
• javascript
• json
• node.js
• rest-api
• skin-analysis
• vercel
• virtual-try-on
• youcam-api