ClosetMate

Your AI-powered wardrobe assistant. Personalized outfits for any weather or occasion. Maximize your closet, simplify your style.

Comment

Inspiration

The inspiration behind ClosetMate stems from the common challenge of managing one's wardrobe effectively and making informed daily outfit choices. Many individuals struggle with outfit fatigue, weather-appropriate dressing, and maximizing the utility of their clothing items. I envisioned an intelligent, personalized solution that leverages AI to transform the daily dressing experience, making it effortless, efficient, and enjoyable.

What it does

ClosetMate is an AI-powered wardrobe assistant designed to help users organize their clothing, receive personalized outfit suggestions, and make smarter fashion decisions. Key functionalities include:

  • AI Clothing Analysis: Users can upload photos of their clothing items, and our AI automatically analyzes and extracts detailed properties, including category, color, warmth level, formality, material, style aesthetic, and even emotional associations.
  • Comprehensive Wardrobe Management: A digital catalog of all clothing items, allowing users to view, edit, and delete entries. Personalized Outfit Generation: Based on current weather conditions, user preferences (occasion, style, color, comfort), and their existing wardrobe, the AI generates tailored outfit suggestions.
  • Outfit Saving & Favorites: Users can save generated outfits, rate them, and mark them as favorites for future reference.
  • User Preferences: Customizable settings for preferred colors, clothing categories, and city for accurate weather-based recommendations. Secure Authentication: Robust user authentication powered by Supabase.
  • Intuitive User Interface: A clean, modern design with full dark mode support for an enhanced user experience.

How I built it

ClosetMate was built as a modern full-stack web application using a combination of cutting-edge technologies. While I didn't code any of the codes when creating the app, this is what is used by bolt.new.

  • Frontend: Developed with React for a dynamic and responsive user interface, bundled with Vite for a fast development experience. Styling was meticulously crafted using Tailwind CSS for utility-first design, ensuring a highly customizable and maintainable visual layer. Icons are provided by Lucide React.
  • Backend & Database: Supabase serves as the robust backend, providing user authentication, a PostgreSQL database for storing clothing items, outfits, and user preferences, and secure object storage for clothing images.
  • AI Integration: The core intelligence of ClosetMate is powered by Google's Gemini API, integrated via Supabase Edge Functions. This enables advanced image analysis for clothing properties and sophisticated outfit generation logic.
  • Weather Data: Real-time weather information is fetched using the Open-Meteo API, allowing for accurate weather-appropriate outfit suggestions.
  • Version Control: GitHub was used for source code management, enabling tracking changes.
  • Deployment: The application is deployed using Netlify, which provides continuous deployment directly from our GitHub repository, ensuring that every push to the main branch automatically triggers a new build and deployment to a global CDN.

Challenges I ran into

Developing ClosetMate presented several interesting challenges:

  • Image Handling & Storage: I didn't know that I could use gemini API until I found out supabase edge function

  • Error Handling & User Feedback: Ensuring comprehensive error handling for API calls (Supabase, Gemini, Open-Meteo) and providing clear, actionable feedback to the user in case of failures.

    Accomplishments that I'am proud of

    I am particularly proud of:

  • Seamless AI Integration: Successfully integrating a powerful AI model (Gemini) to perform complex tasks like detailed clothing analysis and intelligent outfit generation, which are central to the application's value proposition.

  • Intuitive User Experience: Delivering a visually appealing and user-friendly interface that simplifies wardrobe management and makes AI-driven features accessible. Robust Backend Infrastructure: Building a secure and scalable backend using Supabase, demonstrating its capabilities for authentication, database management, and serverless functions.

  • Comprehensive Feature Set: From manual item entry to AI analysis, weather-based suggestions, and outfit saving, ClosetMate offers a complete solution for wardrobe assistance.

    What I learned

    Throughout the development of ClosetMate, I gained valuable insights into:

  • Advanced AI Prompting: The critical role of detailed and structured prompt engineering for achieving desired outputs from large language models in specific application contexts.

  • Supabase Ecosystem: A deeper understanding of Supabase's comprehensive features, including Row Level Security (RLS), Storage, and Edge Functions, and how they can be leveraged to build secure and scalable applications.

  • Full-Stack Development Workflow: Practical experience in connecting frontend React applications with serverless backend functions and databases.

  • User-Centric Design: The importance of designing features that directly address user pain points and provide tangible value, such as personalized recommendations.

  • Iterative Development: The necessity of an iterative approach to refine AI models and user interfaces based on testing.

    What's next for ClosetMate

    I have exciting plans for the future of ClosetMate:

  • Trend Integration: Incorporating real-time fashion trends into outfit suggestions.

  • Enhanced AI Personalization: Further refining the AI models to learn from user interactions (e.g., outfit ratings, saved outfits) to provide even more accurate and preferred suggestions over time.

  • Mobile Application

Built With

Share this project:

Updates