Tonalique

Inspiration

Buying makeup online is often a guessing game. People want recommendations that fit their style, budget, and skin preferences, but product pages rarely help them see how a look comes together before they commit. Tonalique was inspired by the idea of making beauty discovery feel more personal, considered, and confidence-building—without turning cosmetic exploration into a medical assessment.

What it does

Tonalique is a personal beauty studio that helps users:

• Build a beauty brief using occasion, look, finish, shade preference, and budget.
• Upload an optional photo only after explicit consent.
• Receive AI-powered cosmetic reference insights.
• Get a small, budget-aware makeup shortlist.
• Preview a selected product through virtual try-on.

The experience is designed around the flow: preferences → consented photo → cosmetic insights → curated products → preview before deciding.

How we built it

We built Tonalique as an Expo/React Native app that also runs on the web, with a Node.js and Express backend.

The frontend handles the guided beauty flow, preference selection, consent messaging, image selection, product cards, and try-on experience. The backend keeps provider credentials private, creates temporary sessions, stores uploaded media only for the active session, serves the image through a temporary public HTTPS URL, and communicates with the YouCam APIs for skin analysis and virtual try-on.

We also used Cloudflare Tunnel during local development so YouCam could securely access temporary uploaded images through HTTPS. The product catalogue includes budget-aware recommendations and maps different product categories to the appropriate virtual try-on effect configuration.

Challenges we ran into

The biggest challenge was making local development work with an external AI provider that needs to fetch a user-uploaded image from a public HTTPS URL. A local localhost backend is not reachable by YouCam, so we configured a temporary Cloudflare tunnel and updated the backend’s public media URL.

We also encountered provider schema validation issues for virtual try-on effects. Different cosmetic categories require different request structures: for example, cheek tint needs a valid blush pattern and palette configuration, while lip colour requires its own shape and style fields. We updated the backend to generate category-specific effect payloads instead of applying one generic effect to every product.

Accomplishments that we're proud of

We are proud that Tonalique is more than a static mockup. It has a working end-to-end flow from preference selection to backend session creation, photo consent, image upload, cosmetic analysis requests, budget-based product recommendations, and virtual try-on requests.

We are also proud of the privacy-first approach. Photos are optional, consent is explicit, provider credentials stay server-side, and the app clearly frames results as cosmetic references rather than medical advice.

Finally, we created a polished visual identity and launch video that reflects the product’s intended experience: warm, calm, and editorial rather than overwhelming.

What we learned

We learned that integrating AI APIs is as much about operational design as it is about sending requests. Public media access, temporary storage, secure credential handling, asynchronous task polling, provider-specific schemas, and useful error messages all matter for a reliable user experience.

We also learned to treat AI beauty outputs carefully. Clear consent, constrained claims, and transparent “AI preview” labels are essential when working with personal photos and appearance-related recommendations.

What’s next for Tonalique

Next, we want to add a richer verified product catalogue with retailer availability, ingredient and finish filters, and more personalized recommendation logic.

We also plan to support additional try-on categories, save user-approved looks locally or securely in an account, improve the result experience with side-by-side comparisons, and add a production-ready media storage strategy with short-lived signed URLs instead of a development tunnel.

Built With

• kotlin
• react-native
• youcam-api