Mirror
Mirror
APR 2025
APR 2025
President's Pick • CruzHacks
President's Pick • CruzHacks
Partners
Partners
Figma
Hackathon
React
TypeScript
Expo
CSS
AI
Mobile App
Mirror is a mobile application designed to provide personalized hair and skin care recommendations through AI-powered analysis. The inspiration behind Mirror stems from the recognition that many individuals struggle to find suitable hair and skincare products tailored to their specific health and hygiene needs. Proper skin and hair care are crucial for maintaining overall health, preventing common dermatological conditions, and promoting hygiene. By utilizing computer vision and artificial intelligence, Mirror democratizes access to personalized beauty and health advice, making professional-level skincare insights accessible without the need for expensive consultations or extensive personal research.
Mirror is a mobile application designed to provide personalized hair and skin care recommendations through AI-powered analysis. The inspiration behind Mirror stems from the recognition that many individuals struggle to find suitable hair and skincare products tailored to their specific health and hygiene needs. Proper skin and hair care are crucial for maintaining overall health, preventing common dermatological conditions, and promoting hygiene. By utilizing computer vision and artificial intelligence, Mirror democratizes access to personalized beauty and health advice, making professional-level skincare insights accessible without the need for expensive consultations or extensive personal research.
Functionality
Functionality
Mirror is built as a React Native mobile application, enabling users to capture photos of their face or hair, answer detailed questions about their hair characteristics (such as dandruff, dryness, and density) and receive personalized analyses and product recommendations. The app includes features such as bookmarking useful products. It boasts a clean, modern user interface with a customized navigation system, seamlessly guiding users through various screens including welcome and authentication screens, home screen for choosing face or hair analysis, a camera interface for photo capture, a hair questionnaire, loading and analysis screen, and finally, a results screen presenting personalized recommendations.
Mirror is built as a React Native mobile application, enabling users to capture photos of their face or hair, answer detailed questions about their hair characteristics (such as dandruff, dryness, and density) and receive personalized analyses and product recommendations. The app includes features such as bookmarking useful products. It boasts a clean, modern user interface with a customized navigation system, seamlessly guiding users through various screens including welcome and authentication screens, home screen for choosing face or hair analysis, a camera interface for photo capture, a hair questionnaire, loading and analysis screen, and finally, a results screen presenting personalized recommendations.
Tech
Tech
Technically, Mirror utilizes React Native for cross-platform mobile development, Expo for handling camera access and file system operations, MongoDB for user data storage, a Node.js backend with Express for server-side operations, JWT for secure authentication, and transfer learning models to achieve high-accuracy analysis. High-quality, scalable UI elements are ensured through SVG components, while custom animations enhance user experience during loading screens and transitions. However, the biggest component of our project was leveraging gemini API alongside ResNet transfer model (ML) for the most accurate classification for skin and hair types to provide the utmost beneficial products.
Technically, Mirror utilizes React Native for cross-platform mobile development, Expo for handling camera access and file system operations, MongoDB for user data storage, a Node.js backend with Express for server-side operations, JWT for secure authentication, and transfer learning models to achieve high-accuracy analysis. High-quality, scalable UI elements are ensured through SVG components, while custom animations enhance user experience during loading screens and transitions. However, the biggest component of our project was leveraging gemini API alongside ResNet transfer model (ML) for the most accurate classification for skin and hair types to provide the utmost beneficial products.
Foundations
Foundations
Mirror's UI/UX design emphasizes intuitive, seamless user experiences from image capture to receiving recommendations. Smooth navigation flows, elegant transitions, and sophisticated yet approachable visuals using Instrument Sans typography and a refined color palette enhance usability. The intelligent camera interface with background removal ensures precise analyses, creating an accessible, premium experience that combines technological sophistication with personal warmth.
Mirror's UI/UX design emphasizes intuitive, seamless user experiences from image capture to receiving recommendations. Smooth navigation flows, elegant transitions, and sophisticated yet approachable visuals using Instrument Sans typography and a refined color palette enhance usability. The intelligent camera interface with background removal ensures precise analyses, creating an accessible, premium experience that combines technological sophistication with personal warmth.
Transfer Learning Models
Transfer
Learning
Models
Transfer Learning
Models
Mirror employs advanced machine learning and background removal technologies to seamlessly analyze user-submitted images for precise skin and hair care recommendations. Images undergo intelligent preprocessing with compression and format conversion, then pass through sophisticated computer vision services like CarveKit or rembg to isolate facial features. Transfer learning techniques applied to finely-tuned models accurately identify skin tone, acne, and skin type, preserving user privacy as images are not permanently stored. This was possible through leveraging Kaggles data set for skin types to create a robust and accurate model. Overall, this intelligent process ensures professional-grade recommendations even under challenging lighting or lower-quality camera conditions.
Mirror employs advanced machine learning and background removal technologies to seamlessly analyze user-submitted images for precise skin and hair care recommendations. Images undergo intelligent preprocessing with compression and format conversion, then pass through sophisticated computer vision services like CarveKit or rembg to isolate facial features. Transfer learning techniques applied to finely-tuned models accurately identify skin tone, acne, and skin type, preserving user privacy as images are not permanently stored. This was possible through leveraging Kaggles data set for skin types to create a robust and accurate model. Overall, this intelligent process ensures professional-grade recommendations even under challenging lighting or lower-quality camera conditions.
Data Powerhouse
Data
Powerhouse
MongoDB's Atlas a flexible, document-oriented database architecture enables Mirror to store user profiles, authentication details, and personalized product recommendations efficiently, delivering quick and secure access. Utilizing Mongoose schemas and middleware, the app continuously adapts to user interactions, enhancing recommendation accuracy and personalizing skincare journeys in real-time.
MongoDB's Atlas a flexible, document-oriented database architecture enables Mirror to store user profiles, authentication details, and personalized product recommendations efficiently, delivering quick and secure access. Utilizing Mongoose schemas and middleware, the app continuously adapts to user interactions, enhancing recommendation accuracy and personalizing skincare journeys in real-time.
Increasing Accuracy
Increasing
Accuracy
Integration with Google's Gemini AI transforms Mirror into an intelligent skincare assistant. Advanced computer vision and natural language processing capabilities allow the Gemini-powered algorithm to deliver context-aware, scientifically-backed recommendations, typically available only through professional consultations. This ensures users receive accurate skincare advice tailored to their specific concerns and environmental factors.
Integration with Google's Gemini AI transforms Mirror into an intelligent skincare assistant. Advanced computer vision and natural language processing capabilities allow the Gemini-powered algorithm to deliver context-aware, scientifically-backed recommendations, typically available only through professional consultations. This ensures users receive accurate skincare advice tailored to their specific concerns and environmental factors.
Challenges
Challenges
Throughout the development process, several challenges were encountered, including complexities in backend infrastructure setup for image processing while maintaining user privacy, achieving UI consistency across diverse screen sizes, which was resolved by switching from PNG-based navigation elements to SVG components, and backend integration difficulties related to secure MongoDB connections and reliable API calls. Additionally, ensuring optimal performance, particularly smooth screen transitions during background image processing, required meticulous state management.
Throughout the development process, several challenges were encountered, including complexities in backend infrastructure setup for image processing while maintaining user privacy, achieving UI consistency across diverse screen sizes, which was resolved by switching from PNG-based navigation elements to SVG components, and backend integration difficulties related to secure MongoDB connections and reliable API calls. Additionally, ensuring optimal performance, particularly smooth screen transitions during background image processing, required meticulous state management.
Future
Final
Thoughts
Future development plans for Mirror involve enhancing the application with more sophisticated AI analysis algorithms, expanding product recommendations, incorporating social sharing features, and introducing progress tracking capabilities over time. Overall, this project significantly advanced my expertise in machine learning, backend integration, and UI/UX design.
Future development plans for Mirror involve enhancing the application with more sophisticated AI analysis algorithms, expanding product recommendations, incorporating social sharing features, and introducing progress tracking capabilities over time. Overall, this project significantly advanced my expertise in machine learning, backend integration, and UI/UX design.