starry-skin

byMeghana Jk

Build a complete cross-platform mobile app (iOS + Android) called SUGI — an AI-powered skincare companion for Gen Z users. The app is completely free with no paywalls or subscriptions. --- 🎨 DESIGN AESTHETIC - Bright, playful, Gen Z energy - Bold gradients, soft pastels mixed with vibrant accent colors (coral, lavender, mint, sky blue) - Rounded corners, bubbly UI elements, micro-animations on every interaction - Fun, conversational tone throughout all copy and empty states - Dark mode support - Custom illustrated empty states and onboarding screens - Typography: modern, slightly chunky sans-serif (like DM Sans or Plus Jakarta Sans) --- 📱 APP STRUCTURE — SCREENS & NAVIGATION Bottom tab navigation with 5 tabs: 1. Home (Dashboard) 2. Scan (AI Skin Analysis) 3. Routine 4. Progress 5. Profile --- 🔐 AUTH & ONBOARDING - Splash screen with SUGI logo animation - Onboarding carousel (3–4 slides): explain AI scan, routine tracking, progress photos - Sign up / Login with Email, Apple, Google - After auth: skin profile quiz (skin type, concerns, age range, climate, allergies, current products used) - Quiz results generate an initial skin profile saved to user account --- 🏠 HOME (DASHBOARD) - Personalized greeting: "Hey [Name], your skin is glowing today ✨" - Daily skin tip card (rotates daily) - Today's routine checklist (AM/PM steps with checkboxes) - Streak counter (days consistent with routine) - Quick action buttons: "Scan My Skin", "Log Today", "View Progress" - Recent AI scan summary card - Recommended products carousel - Skin score widget (0–100) based on recent scans and routine consistency - Notifications/reminders bell icon --- 📸 AI SKIN ANALYSIS (SCAN TAB) - Camera screen with face oval overlay guide - Upload photo OR take live photo - AI analyzes the photo and detects: • Skin type (oily, dry, combination, normal, sensitive) • Acne & breakouts (location, severity) • Dark spots & hyperpigmentation • Fine lines & wrinkles • Pores (enlarged, clogged) • Redness & irritation • Under-eye circles • Skin texture & tone evenness • Hydration level estimate • UV damage indicators - Results screen with: • Annotated face map highlighting detected issues • Skin score (0–100) • Detailed breakdown per concern with severity level • Personalized advice per concern • Recommended ingredients to look for • Ingredients to avoid • Suggested product types - Save scan to history - Share scan results card (as image) - Scan history list with date, thumbnail, score --- 🛍️ PERSONALIZED PRODUCT RECOMMENDATIONS - Dedicated section on Home and in Scan results - Products recommended based on: scan results + skin profile quiz + routine gaps - Each product card shows: • Product image • Name, brand • Key ingredients • Why it's recommended for the user (AI-generated reason) • Skin concern it targets • User ratings • Link to buy (external) - Filter by: category (cleanser, moisturizer, SPF, serum, toner, eye cream, etc.), concern, ingredient, price range - Save/bookmark products to a "My Wishlist" collection - "Build My Routine" button that auto-generates a routine from recommended products --- 📋 SKINCARE ROUTINE TRACKER (ROUTINE TAB) - AM Routine and PM Routine tabs - Add steps manually or from recommended products - Each step: • Product name, step type (cleanse, tone, treat, moisturize, protect) • Application instructions • Wait time between steps (optional timer) • Drag-to-reorder - Daily check-in: mark each step as done - Streak tracking (daily, weekly, monthly) - Routine reminders (push notifications, custom time for AM and PM) - "Routine Score" based on completeness - Suggested steps if routine is incomplete (e.g., "You're missing SPF!") - Edit/delete steps - Routine templates: Beginner, Anti-acne, Anti-aging, Brightening, Sensitive Skin --- 📈 PROGRESS TRACKING (PROGRESS TAB) - Before & After photo comparison (side-by-side slider) - Photo log: take or upload weekly check-in photos - Timeline gallery of all progress photos - Skin score graph over time (line chart) - Per-concern trend charts (e.g., acne improving over 4 weeks) - Milestone badges: "First Scan", "7-Day Streak", "Skin Score +10", etc. - Monthly skin report summary card - Share progress as a beautifully designed card image --- 👤 PROFILE TAB - Profile photo, name, username - Edit skin profile / re-take quiz - Saved products (wishlist) - Scan history - Routine history - Achievements & badges collection - Settings: • Notification preferences (AM/PM reminder times) • Theme (light/dark) • Units & preferences • Privacy settings • Delete account • About / FAQ - Logout --- 🔔 NOTIFICATIONS - AM routine reminder (custom time) - PM routine reminder (custom time) - Weekly progress check-in reminder - Daily skin tip push notification - Streak at-risk warning ("Don't break your 5-day streak!") - Milestone celebration alerts --- 🧠 AI & BACKEND - Use any suitable AI vision API for skin analysis (e.g., OpenAI Vision, Google Vision, or a custom model) - Use any suitable backend (Supabase or Firebase recommended) for: • User auth (email, Apple, Google) • Storing scan results, photos, routines, progress • Product database • User profile & preferences - All user data stored securely, photos stored in cloud storage - Offline support for routine check-ins (sync when online) --- 📦 TECHNICAL REQUIREMENTS - React Native with Expo (for cross-platform iOS + Android) - TypeScript throughout - Smooth animations using Reanimated or Moti - Camera integration (Expo Camera) - Image picker (Expo Image Picker) - Push notifications (Expo Notifications) - Local storage for offline support - Clean folder structure: /screens, /components, /hooks, /services, /store, /assets - State management: Zustand or Redux Toolkit - Navigation: React Navigation (stack + bottom tabs) --- 🌟 EXTRA DETAILS - App name: SUGI - Completely free — no subscriptions, no paywalls, no ads - Friendly, encouraging micro-copy throughout ("Your skin is on a journey 🌱") - Accessibility: proper contrast, font scaling support - Loading skeletons on all async screens - Error states with illustrated empty states - Haptic feedback on key interactions - Confetti animation on milestone achievements