Derma Glow

• 

  Scan Page

• 

  Me Page

• 

  Progress Page

• 

  Result Page

Inspiration

Skincare is overwhelming. Most people don't know what their skin actually needs. They follow generic routines from social media, buy products that don't address their real concerns, and only visit a dermatologist when problems become severe. We wanted to bridge that gap between professional skin analysis and everyday self-care. The idea was simple: what if your phone could be your personal skin clinic? Using AI-powered analysis, anyone could get dermatologist-level insights instantly, track their progress over time, and follow a routine built specifically for their skin, not someone else's.

What it does

Derma Glow is an AI-powered skin analysis and care app that follows a three-step loop: Scan → Understand → Act.

• Scan: Take a selfie or pick a photo from your gallery. The app uploads it to the YouCam AI API, which analyzes 15 skin concerns: acne, texture, pores, wrinkles, redness, oiliness, moisture, radiance, age spots, dark circles, eye bags, firmness, tear trough, and eyelid droopiness. each scored 0–100 with severity levels.
• Understand: View a detailed assessment with a skin score, heatmap overlays showing exactly where each concern appears on your face, a before/after skin simulation showing projected improvement, and for severe concerns, a professional treatment plan recommending specific clinical procedures.
• Act: Get a personalized daily routine (morning, evening, weekly) tailored to your skin type and top concerns. Check off completed steps, build streaks, and track your skin score over time with trend charts and "What Changed?" delta comparisons between scans. ## How we built it The app is built with Expo SDK 57 and React Native using TypeScript. We kept the architecture lean, with no React Navigation, just simple state management in the root component for tab navigation. The core pipeline lives in the services layer:
• youcamApi.ts handles the full YouCam S2S integration, image upload via presigned URLs, analysis task creation with polling, and skin simulation generation.
• analysisService.ts orchestrates the pipeline: normalize the image (resize to 1200×1600), upload, analyze, and build the result object.
• treatmentService.ts contains all domain logic, 15 concern definitions, 45 product suggestions (3 per concern), clinical treatment recommendations, routine generation, and mock data fallback.
• storage.ts persists everything locally with AsyncStorage and the file system, analyses, photos, heatmap masks, and simulation results. The UI follows a 3-tab structure inspired by three user questions: "What should I do today?" (Me tab), "What is happening with my skin?" (Scan tab), and "Am I getting better?" (Progress tab). We used an emerald green design language with Playfair Display headings, Inter body text, and card-based layouts with gradient accents. ## Challenges we ran into Heatmap alignment was one of the trickiest problems. The AI returns mask images at different aspect ratios than the original photo, so we had to build aspect ratio detection and alignment logic in MaskOverlayView to prevent overlays from appearing shifted or distorted. API reliability and offline fallback was critical. The YouCam API can be slow or unavailable, so we built a full mock data system that generates realistic random scores, allowing the entire UI to function without an API key important for development and demos. Routine generation logic was more complex than expected. Creating a personalized routine that adapts to skin type, concern severity, and time-of-day blocks, while also supporting streak tracking and completion persistence, required careful state management across multiple services. Notification scheduling across platforms had its quirks. Expo's notification API requires different handling for Android (notification channels) vs iOS, and scheduling recurring reminders with day-of-week selection needed thorough testing. ## Accomplishments that we're proud of 15-concern AI analysis with per-concern heatmap visualization, each concern gets its own overlay mask that users can toggle through individually. Skin simulation feature that shows users a projected "after" version of their skin, making the AI analysis tangible and motivating. Clinical treatment plans for severe concerns, recommending specific procedures like IPL, microneedling, or fillers with session counts and recovery notes, bridging the gap between app and clinic. Zero React Navigation dependency, the entire app navigates via simple state, keeping the bundle small and the mental model simple. Accessibility throughout, every interactive element has proper accessibilityRole, accessibilityLabel, and accessibilityState props. ## What we learned AI API integration is more than just calling an endpoint. Image normalization (resizing, format handling), presigned URL uploads, task polling with status checks, and graceful error handling all need to work together seamlessly. Mock data is not just for development. Having a realistic fallback system became our most valuable tool for UI development, testing, and demos. It let us iterate on the frontend without burning API credits. Simple navigation beats complex libraries for apps with a clear, fixed structure. State-based tab navigation eliminated routing bugs and reduced dependency overhead. Domain logic deserves its own service layer. Keeping concern metadata, product suggestions, routine generation, and treatment plans in treatmentService.ts, separate from UI and API concerns, made the codebase maintainable as the feature set grew. ## What's next for Derma Glow User accounts and cloud sync, save progress across devices and enable sharing with dermatologists. Product recommendation engine, move from generic suggestions to personalized product matching based on analysis history, budget, and ingredient preferences. Camera integration improvements, real-time skin analysis preview, guided photo capture with face detection and alignment prompts. Community features, anonymous progress sharing, before/after galleries, and user challenges to keep streaks motivating. Multi-language support, expand accessibility beyond English-speaking users. Exportable reports, generate PDF skin health reports users can bring to their dermatologist appointments.

Built With

• aiskinanalysis
• expo.io
• exposdk57
• reactnative
• typescript
• youcamapi