Inspiration
Skincare can be confusing. People often struggle to understand their skin, maintain consistent routines, and track changes over time. We wanted to create a simple, visual experience that makes skincare tracking more organized and accessible.
What It Does
SKINTRACE AI is a bilingual skincare tracking prototype designed to help users organize their skincare routines and visualize skin-related information.
Key features include:
- A visual facial-zone interface.
- A dashboard for skin-related metrics.
- Progress charts for tracking changes over time.
- Morning and evening skincare routines.
- Arabic and English support with right-to-left layout.
How We Built It
We built SKINTRACE AI using React, TypeScript, Vite, Tailwind CSS, and Recharts, with an Express server for backend functionality.
The project includes a server-side integration architecture prepared for YouCam Skin Analysis API v2.1, designed to keep API credentials out of the frontend.
Challenges We Faced
One of the main challenges was designing a clear visual experience for skincare information while supporting both Arabic and English interfaces. We also worked on separating simulated results from real API responses and protecting API credentials on the server.
What We Learned
We learned how to structure a skincare tracking experience, build interactive dashboards, support multilingual interfaces, and prepare a backend for third-party API integration.
What's Next
Our next step is to verify the live YouCam API integration and use confirmed API responses to power real skin-analysis insights.
Current status: The publicly accessible prototype uses simulated analysis results. End-to-end live YouCam API analysis has not yet been verified. This project is intended for skincare tracking and informational purposes, not medical diagnosis.
Built With
- artificial
- express.js
- react
- recharts
- tailwind-css
- typescript
- vite
- youcam-api
Log in or sign up for Devpost to join the conversation.