Glowcare

Inspiration

The journey to build GlowCare began with a personal struggle that many people face: navigating the overwhelming world of skincare products. With thousands of products on the market, each claiming to solve different skin concerns, finding the right products for your unique skin type felt like searching for a needle in a haystack.

I was inspired by the idea of democratizing personalized skincare advice—making professional-grade skin analysis accessible to everyone, not just those who can afford expensive dermatologist consultations. The vision was to create an app that combines the power of artificial intelligence with the convenience of mobile technology to help people make informed decisions about their skincare routine.

We discovered that:

60% of consumers buy skincare products without knowing if they're suitable for their skin type
$1.4B+ is spent annually on skincare in the US alone, with many purchases going unused
Dermatologist wait times can be weeks to months, even for basic concerns
Confusing ingredient lists make it hard to know what will actually help your skin

The name "GlowCare" reflects our mission: helping users achieve their best skin and glow with confidence through personalized, AI-driven care.

What It Does

GlowCare is a comprehensive AI-powered skincare platform that serves as your personal skin health companion—from analysis to purchase to professional consultation.

🤖 AI-Powered Skin Analysis

Google Gemini Vision + TensorFlow Lite: Analyzes skin images to detect:
- Skin Type: Oily, dry, combination, normal, or sensitive
- Skin Concerns: Acne, pimples, black patches/hyperpigmentation, dark circles, dull skin, oily skin
- Severity Scores: 0–100% for each concern for precise tracking
Instant Results: Get comprehensive analysis in seconds
Fallback Support: Graceful degradation when AI is unavailable

🛍️ Personalized Product Recommendations

AI-Driven Recommendations: Gemini AI recommends products that specifically target your detected concerns
Ingredient-Aware: Prioritizes proven ingredients (salicylic acid for acne, vitamin C for hyperpigmentation)
Price-Conscious: Balances quality with affordability

📦 Product Catalog & E-Commerce

Curated Skincare Catalog: Browse cleansers, moisturizers, serums, and more
Cart & Checkout: Manage addresses, complete purchases, track orders (pending → confirmed → processing → shipped → delivered)

📱 Product Scanning

Scan Before You Buy: Extract ingredients using ML Kit text recognition, analyze suitability with Gemini AI
Instant Feedback: Get "suitable" or "not recommended" with reasons

🏥 Professional Consultations

Online Video Consultations: Book video calls with dermatologists
In-Person Appointments: Find nearby partner doctors via Google Maps

💎 Membership & Admin

Subscription: Exclusive discounts on products and consultations
Admin Panel: Manage products, doctors, and orders (role-based access)
Design: White & Pink theme (#FFB6C1), Poppins typography, Material Design 3

How I Built It

The development followed an iterative, feature-driven approach:

Phase 1: Foundation (Weeks 1-2)

Set up Flutter project structure (screens, providers, services, theme)
Configured Serverpod backend with PostgreSQL
Implemented authentication with JWT tokens and refresh token mechanism
Designed initial schema for users, products, and orders

Phase 2: Core Features (Weeks 3-4)

Skin Analysis Module: Integrated TensorFlow Lite for on-device ML, camera for face scanning, analysis result visualization
Product Catalog: Browsing, filtering, search with image caching
Shopping Cart & Checkout: Cart management, address management, order processing

Phase 3: Advanced Features (Week 5)

AI Recommendations: Google Gemini for intelligent product recommendations based on skin analysis
Product Suitability: ML Kit text recognition for ingredient extraction + Gemini for compatibility analysis
Appointments: Doctor listing, booking, online and in-person options
Subscription Management: Membership with automatic discount calculation

Phase 4: Polish & Optimization (Week 6)

UI/UX Refinement: Consistent white and pink theme, elevation and borders for modern card design
Performance: Reduced APK size from 103MB to 64MB (38%) via resource shrinking, ProGuard, architecture filtering
Error Handling: Toast notification system, comprehensive fallbacks
Code Quality: Removed debug statements, cleaned up codebase

Technical Architecture

┌─────────────────────────────────────┐
│      Flutter UI Layer                │
│  (Screens, Widgets, Theme)           │
└──────────────┬──────────────────────┘
               │
┌──────────────▼──────────────────────┐
│      State Management Layer         │
│  (Providers: Auth, Cart, Products)   │
└──────────────┬──────────────────────┘
               │
┌──────────────▼──────────────────────┐
│      Service Layer                  │
│  (ML, AI, API, Business Logic)      │
└──────────────┬──────────────────────┘
               │
┌──────────────▼──────────────────────┐
│      Serverpod Backend               │
│  (Endpoints, Database, Auth)         │
└─────────────────────────────────────┘

Key Technologies:

Frontend: Flutter 3.0+, Provider, Material Design 3
Backend: Serverpod (Dart), PostgreSQL, JWT authentication
AI/ML: TensorFlow Lite, Google ML Kit, Google Gemini AI
Infrastructure: SharedPreferences, CachedNetworkImage, Geolocator, Google Maps

Challenges I Faced

1. ML Model Integration Complexity

Challenge: Integrating TensorFlow Lite while maintaining performance and keeping APK size manageable
Solution: Lazy loading for ML models, model quantization, fallback mechanisms when models aren't available
Learning: Balancing model accuracy with mobile constraints is critical

2. Dependency Conflicts

Challenge: CocoaPods conflicts between mobile_scanner (MLKitCore 6.0.0) and google_mlkit_text_recognition (4.0.0)
Solution: Removed mobile_scanner, implemented product scanning with ML Kit text recognition—which provided a better UX
Learning: Sometimes removing dependencies leads to better, more focused solutions

3. Build Optimization & Size Reduction

Challenge: Initial APK was 103MB, exceeding practical limits
Solution: Resource shrinking, removed x86_64 support, aggressive ProGuard rules, ABI splits
Result: 64MB universal APK (38% reduction), split APKs as small as 30MB
Learning: Understanding build tools is crucial for production apps

4. R8/ProGuard Configuration

Challenge: R8 was removing required ML Kit classes during shrinking, causing runtime crashes
Solution: Comprehensive ProGuard rules with -dontwarn directives for optional language-specific recognizers
Learning: Proper ProGuard config is essential for apps using reflection or dynamic class loading

5. Token Management & Authentication

Challenge: Secure token refresh without interrupting user experience
Solution: Proactive token refresh (5 min before expiry) with automatic retry logic
Learning: UX in auth flows is as important as security

6. Real-time State Synchronization

Challenge: Keeping cart, orders, and appointments synced across screens
Solution: Provider pattern with single source of truth
Learning: Right state management significantly impacts maintainability

7. API Serialization Issues

Challenge: Serverpod serialization errors with complex structures (e.g., ProductSuitabilityResult)
Solution: Correctly implemented SerializableModel and ProtocolSerialization for non-table protocol classes
Learning: Understanding framework-specific serialization prevents runtime errors

8. UI Consistency & Theming

Challenge: Consistent design across 20+ screens
Solution: Centralized AppTheme with reusable color constants and elevation/border styling
Learning: Investing in a solid design system pays off long-term

What I Learned

Machine Learning & AI

TensorFlow Lite: On-device ML integration, trade-offs between accuracy and mobile performance
Google ML Kit: Computer vision for text recognition and ingredient extraction
Google Gemini AI: Prompt engineering, API optimization, structured JSON output

Full-Stack Development

Serverpod: Type-safe APIs, shared protocol, code generation reducing bugs
State Management: Provider pattern for complex state across screens
Database Design: PostgreSQL schema with proper relationships and constraints

Mobile Development

Flutter Architecture: Scalable, maintainable codebase following clean architecture
Cross-Platform Optimization: App size reduction (103MB → 64MB) through resource shrinking, code splitting, ABI builds
Performance: Efficient image caching, lazy loading, optimized API calls

DevOps & Deployment

Build Optimization: ProGuard/R8 rules, resolving CocoaPods conflicts
CI/CD: Automated builds and deployment workflows for Android and iOS

Accomplishments I'm Proud Of

End-to-End AI Pipeline: Face image → analysis → actionable product recommendations in one flow
Type-Safe Full-Stack: Serverpod protocol ensures consistency from DB to UI
38% APK Size Reduction: Production-ready optimization
Complete Feature Set: Auth, products, orders, skin analysis, doctors, appointments, subscriptions, admin panel
User-Centric Design: Intuitive flows, real-world utility (barcode scanning), professional integration

What's Next for GlowCare

Future Enhancements

Real-time video consultation integration
Augmented Reality (AR) try-on for products
Community features for user reviews and recommendations
Integration with wearable devices for skin health tracking
Advanced ML models for more accurate skin condition detection

Roadmap

Phase 1: App Store and Play Store submission, onboard dermatologists and product partners
Phase 2: Fine-tune on diverse skin tones, add offline TFLite analysis
Phase 3: Web app, B2B partnerships, localization

Conclusion

Building GlowCare was a transformative experience that combined technology with solving a real-world problem. The project reinforced that great software isn't just about writing code—it's about understanding user needs, making thoughtful technical decisions, and continuously iterating to improve both functionality and user experience.

Key takeaways:

Planning: Proper architecture decisions early on save time later
Iteration: Building in phases allows continuous learning and improvement
Problem-Solving: Every challenge is an opportunity to learn something new
User-Centric Design: Technology should serve people, not the other way around

GlowCare represents not just a skincare app, but a testament to how modern technology can make personalized healthcare advice accessible to everyone.

🛠️ Built With

Flutter • Serverpod • PostgreSQL • TensorFlow Lite • Google ML Kit • Google Gemini AI • Provider • google_fonts (Poppins) • image_picker • camera • google_maps_flutter • geolocator • cached_network_image

🔗 Try It Out

Clone the repository
Set up PostgreSQL and Serverpod backend
Add Gemini API key to flutter_app/assets/config/gemini_api_key.txt
Run migrations: serverpod create-migration and apply
Start server: dart run bin/main.dart (from server/)
Run app: flutter run (from flutter_app/)

📊 Project Statistics

Screens: 20+ (auth, home, scan, products, cart, orders, doctors, appointments, subscription, admin)
API Endpoints: 8+ groups (auth, products, orders, skin analysis, doctors, appointments, subscriptions, addresses)
AI Features: Skin analysis (6+ conditions), personalized recommendations, product suitability check
APK Size: 113MB (universal), 57MB (split)

GlowCare—your personal skincare expert, powered by AI. ✨