Cosmatiqa

skincare AI powered analyzer

Inspiration

The inspiration for Cosmatiqa came from a personal frustration that many skincare enthusiasts face: spending hundreds of dollars on products, only to discover that some ingredients were neutralizing each other or causing irritation when used together.

I experienced this firsthand when I learned that my morning Vitamin C serum was conflicting with my evening Retinol cream—two expensive products essentially canceling each other out. The skincare industry is overwhelming: thousands of ingredients, conflicting advice, and no single tool that combines scientific knowledge with personalized recommendations.

Generic compatibility charts don't account for individual skin types, usage timing, or the nuanced interactions between ingredients. I wanted to build something that would democratize skincare knowledge, prevent wasted money, protect sensitive skin, and educate users about the "why" behind conflicts—not just the "what."

What it does

Cosmatiqa is an AI-powered skincare ingredient compatibility analyzer that helps users identify conflicts in their skincare routines. Here's what it does:

Analyzes Complete Routines: Users input their skincare products with ingredient lists and assign AM/PM usage timing
Detects Ingredient Conflicts: Uses a multi-layer detection system:
- Fast lookup in a hardcoded compatibility matrix for 20+ known conflicts (instant results)
- Database search for previously analyzed ingredient pairs
- AI-powered research using Claude 3.5 Sonnet for unknown combinations
Calculates Safety Scores: Provides a 0-10 safety score based on conflict severity and count, using a weighted risk calculation
Personalized Recommendations: Suggests timing adjustments (e.g., "Use Retinol at night only, Vitamin C in morning") based on user's skin type and sensitivities
Real-time Results: Shows analysis results as they're computed using Convex's real-time database
Educational Explanations: Explains the science behind each conflict in simple, non-technical language

The app helps users avoid wasted money, prevent skin irritation, and optimize their routines for better results.

How we built it

Cosmatiqa follows a monorepo architecture with clear separation between frontend and backend:

Frontend Stack:

React 19 with Vite 6 for fast development and optimized builds
React Router 7 for client-side navigation
TailwindCSS 4 for utility-first styling
Convex React for real-time data synchronization
Zustand for client-side state management

Backend Stack:

Convex as the full-stack platform (TypeScript-first database + serverless functions)
Anthropic Claude 3.5 Sonnet for AI-powered ingredient research
TypeScript throughout for end-to-end type safety

Development Process:

Set up monorepo structure with Frontend/ and Backend/ directories
Designed database schema with Convex (ingredients, compatibility matrix, user profiles, analysis results)
Built ingredient parser with normalization and fuzzy matching
Implemented three-tier conflict detection system (hardcoded → database cache → AI fallback)
Created React components for onboarding, product input, and results dashboard
Integrated real-time data flow using Convex queries and mutations
Configured Vercel deployment with proper monorepo routing

Key Technical Features:

Ingredient Normalization: Parses messy user input (various formats, parentheses, capitalization) and matches to canonical database names
Cost-Optimized AI: Achieved 70%+ cache hit rate to control API costs
Real-time Updates: Frontend automatically receives analysis results as backend mutations complete
Type-Safe Stack: Auto-generated TypeScript types from database schema ensure compile-time safety

Challenges we ran into

1. Monorepo Deployment Configuration

Challenge: Vercel returned NOT_FOUND errors even though builds succeeded.
Root Cause: Without rootDirectory in vercel.json, Vercel looked in the repository root instead of Frontend/.
Solution: Added proper vercel.json with rootDirectory: "Frontend" and rewrite rules for client-side routing.

2. Ingredient Name Normalization

Challenge: Users paste ingredient lists in various formats (INCI names, common names, with parentheses, different capitalizations), making exact matching impossible.
Solution: Built a robust multi-step parser that handles comma/semicolon/newline separation, removes parenthetical content, normalizes case, and uses fuzzy matching with Convex search indexes.

3. AI Cost Management

Challenge: Claude API calls are expensive—without caching, analyzing 8 products could cost $0.50+ per analysis.
Solution: Implemented three-tier caching: hardcoded matrix (0ms, $0) → database cache (50ms, $0) → LLM fallback (2-5s, $0.05-0.20). Achieved 70%+ cache hit rate, reducing average cost by 90%.

4. Real-time Data Synchronization

Challenge: Users needed to see results as they computed, but traditional REST APIs require polling.
Solution: Leveraged Convex's real-time query system—frontend automatically receives updates when backend mutations complete, eliminating manual refresh.

5. Type Safety Across Stack

Challenge: Maintaining type consistency between frontend and backend is error-prone.
Solution: Used Convex's TypeScript-first approach with auto-generated types from schema, ensuring compile-time type checking for all database operations.

6. Client-Side Routing in Production

Challenge: React Router routes returned 404 errors when accessed directly.
Solution: Added rewrite rules in vercel.json to serve index.html for all routes, letting React Router handle navigation client-side.

Accomplishments that we're proud of

Complete End-to-End Integration: Successfully connected React frontend to Convex backend with real-time data synchronization—users see results instantly as analysis completes
Cost Optimization: Achieved 70%+ cache hit rate for AI API calls, making the service sustainable on free tiers
Robust Ingredient Parsing: Built a normalization system that handles messy user input and matches to canonical database names with high accuracy
Mathematical Safety Scoring: Implemented a weighted risk calculation algorithm that accurately reflects routine safety: $$ \text{Safety Score} = 10 - \left( \sum_{i=1}^{n} w_i \cdot s_i \right) $$ Where $w_i$ is the conflict weight and $s_i$ is the severity score
Type-Safe Full Stack: Maintained end-to-end TypeScript type safety from database schema to frontend components
Successful Deployment: Configured complex monorepo deployment on Vercel with proper routing and environment variable management
User Experience: Created an intuitive wizard-style flow that guides users from onboarding through analysis to actionable recommendations

What we learned

Building Cosmatiqa was a deep dive into several new domains:

Backend Architecture: Learned to leverage Convex as a full-stack TypeScript platform, understanding NoSQL schema design, real-time queries, and serverless function patterns. The experience taught me how modern backend-as-a-service platforms can dramatically simplify development.

AI Integration: Discovered the importance of prompt engineering, caching strategies, and cost optimization when working with LLM APIs. The three-tier caching system (hardcoded → database → AI) became a critical pattern for sustainable AI applications.

State Management: Explored React Context, Convex React hooks, and real-time data synchronization. Learned that reactive queries eliminate entire classes of state management complexity.

Mathematical Modeling: Implemented a weighted scoring algorithm that accurately reflects skincare routine safety, balancing multiple conflict severities into a single intuitive score.

Deployment Complexity: Gained deep understanding of monorepo deployments, SPA routing configuration, and the importance of explicit configuration files (vercel.json) over implicit assumptions.

Type Safety: Discovered that auto-generated types from schemas don't just catch bugs—they fundamentally improve developer experience and eliminate runtime errors.

Problem-Solving: Learned to break down complex problems (like ingredient normalization) into smaller, solvable pieces, and to always build robust parsing layers for user input.

What's next for Cosmatiqa

While the MVP is complete, there are several exciting directions for future development:

OCR Integration: Allow users to scan product labels with their camera instead of manual ingredient list input
Product Database: Build a curated database of popular skincare products with pre-filled ingredient lists for faster analysis
Community Features: Enable user-contributed conflict reports, product reviews, and routine sharing
Mobile Apps: Develop native iOS and Android apps for on-the-go analysis and routine tracking
Advanced Analytics: Track routine changes over time, measure skin improvement, and provide personalized insights based on historical data
Dermatologist Integration: Connect users with licensed dermatologists for complex cases that require professional consultation
Multi-language Support: Expand beyond English to serve global skincare communities
Haircare Support: Extend the analysis engine to include haircare product compatibility
Routine Optimization AI: Use machine learning to suggest optimal product combinations and timing based on user goals and skin type
Export & Sharing: Allow users to export analysis reports as PDFs and share routines with friends or skincare communities

The foundation is solid, and the architecture supports these enhancements. The most exciting part is seeing how users will use Cosmatiqa to make smarter skincare decisions!