silent-face

byMahesh Yaduvanshi

Build a web application called "FaceBalance" (or SymFace) — a face symmetry analyzer tool. ## CORE FEATURES ### 1. Face Symmetry Scanner - User uploads a selfie photo - App uses face-api.js to detect facial landmarks - Calculate left vs right side symmetry percentage - Show a visual overlay on the face highlighting which side is dominant/weaker - Display a symmetry score (e.g., "Your face is 74% symmetric") - Show which specific areas are asymmetric (jaw, cheek, eye level, forehead) ### 2. Personalized Exercise Plan - Based on the analysis, recommend 4-6 specific facial exercises - Each exercise should have: name, description, duration, frequency - Exercises target: jaw alignment, cheek muscle balance, neck posture, eye-level correction - Also show Root Cause suggestions (sleeping side, chewing habits, posture) ### 3. Progress Tracker - User can upload weekly photos - App compares current vs previous scans - Show improvement percentage over time - Simple timeline/history view ### 4. Shareable Result Card - Generate a clean, branded card showing symmetry score - One-click share/download button - Card should look good on Instagram/WhatsApp ## PAGES REQUIRED 1. Landing page — hero section, how it works, features, pricing, testimonials (dummy), CTA 2. Auth pages — Sign up / Login (via Supabase) 3. Dashboard — Upload photo, view score, exercise plan 4. Progress page — History of scans with comparison 5. Pricing page — 3 plans (Free, Basic, Pro) ## PRICING PLANS - Free: 1 scan per month, basic score only - Basic ($3/month or $29/year): 5 scans/month + exercise recommendations - Pro ($9/month or $79/year): Unlimited scans + progress tracking + shareable card + priority support ## DESIGN STYLE - Clean, modern, minimal UI - Primary color: deep navy or soft teal - Mobile-first responsive design - Soft card-based layout - Subtle animations on landing page ## TECH STACK - Frontend: React (via Lovable) - Auth + Database + Storage: Supabase - Face Detection: face-api.js (load models from CDN) - AI Recommendations: Claude API (for generating personalized exercise plans based on analysis result) - Payments: Razorpay (for Indian users) ## IMPORTANT NOTES - Add medical disclaimer: "This tool is for informational purposes only and is not a substitute for medical advice." - All photo uploads should be stored securely in Supabase Storage - User data should be private — only visible to the logged-in user - Scan history tied to user account ## DATABASE TABLES NEEDED (Supabase) - users (handled by Supabase Auth) - scans: id, user_id, photo_url, symmetry_score, analysis_json, created_at - exercises: id, scan_id, name, description, duration, frequency - subscriptions: id, user_id, plan, status, razorpay_id, start_date, end_date Start with the landing page and auth flow first, then build the scanner dashboard.