A visual skincare motivation app that shows users how their skin may change over time based on habits and lifestyle choices.
This app provides visual simulations, NOT medical advice. No diagnoses, no guarantees, no fear-based messaging. All predictions are visual estimates only.
"See how your skin may change — and how small habits can improve it."
- Visual Onboarding - Guided selfie upload with lighting tips
- Skin Snapshot - Baseline analysis with trend indicators
- Future Simulations - See your skin's potential path (1yr, 5yr, 10yr)
- Interactive Comparison - Viral-ready side-by-side slider
- Routine Builder - Simple AM/PM skincare tracking
- Motivation System - Streaks and progress tracking
- Skin Weather Alerts - UV, pollution, and humidity insights
- Glow Score - Simple consistency metric
- Monthly Reports - Visual progress summaries
- Node.js 18+
- npm or yarn
- Firebase account (free tier)
# Install dependencies
npm install
# Copy environment variables
cp .env.local.example .env.local
# Edit .env.local with your Firebase credentials
# Get them from: https://console.firebase.google.com/
# Run development server
npm run dev- Frontend: Next.js 15, React 19, TypeScript
- Styling: Tailwind CSS
- Animation: Framer Motion
- Backend: Firebase (Auth, Firestore, Storage)
- Image Storage: Cloudinary (free tier)
- Hosting: Vercel (free)
- Welcome / Value Proposition
- Selfie Upload with Tips
- Skin Snapshot (Baseline)
- Future Simulation Viewer
- Interactive Comparison Slider
- Routine Builder
- Progress & Streaks
- Monthly Report
- Settings & Privacy
- Minimal & Clean - No cluttered UI
- Calm & Human - Skin-friendly neutral tones
- Fast Wow Moment - Under 60 seconds to first simulation
- Mobile-First - Optimized for touch
- No Fear Tactics - Encouraging, not scary
- Clear disclaimers throughout
- No medical diagnosis language
- No data selling
- Secure image storage
- Easy data deletion
"This makes me want to actually stick to skincare"
If users say this, we've succeeded.
# Run dev server
npm run dev
# Build for production
npm run build
# Start production server
npm start
# Lint code
npm run lintsrc/
├── app/ # Next.js app router pages
├── components/ # React components
│ ├── ui/ # Reusable UI components
│ ├── onboarding/ # Onboarding flow
│ ├── analysis/ # Skin analysis screens
│ └── simulation/ # Future prediction views
├── lib/ # Utilities & configs
│ ├── firebase.ts # Firebase setup
│ ├── skinAnalysis.ts # Rule-based analysis
│ └── imageProcessing.ts # Image transformations
└── types/ # TypeScript definitions
NOT building:
- 3D avatars
- AR mirror
- Medical diagnosis
- Wearable integrations
Focus on:
- Emotion & motivation
- Visual payoff
- Simple, fast execution
This is an MVP. Contributions welcome after initial launch!
MIT License - See LICENSE file
Built with 💙 for skincare enthusiasts everywhere