Wardrobe

Inspiration

In a fast-paced world, daily decisions—like what to wear—often lead to wasted time and wardrobe fatigue. We were inspired by two main observations:

The Underutilized Closet: Most people only wear 20% of their wardrobe 80% of the time, leading to closet clutter and poor purchasing decisions.

Context is King: Existing digital closet apps often fail to factor in real-world context. A great outfit on a sunny day is useless during a snowstorm.

We wanted to build a system that acts as a true personal stylist, leveraging AI and real-time context (weather, event type) not just to inventory clothes, but to provide actionable, intelligent, and sustainable outfit solutions.

What it does

The Digital Wardrobe & Outfit Planner is a comprehensive web app that functions as your personalized, automated stylist:

Smart Upload & Classification: Users upload clothing images, and AI instantly classifies the garments, tagging them by color, season, style, and type.

Contextual AI Recommendations: The core feature is the recommendation engine. It suggests outfits based on three key factors:

Real-time Weather: Fetches live temperature and precipitation data via the OpenWeather API.

Occasion: Filters for formal, casual, work, or event-specific styles.

Personal Taste: Learns from the user's saved favorites and feedback.

Seamless Planning: Use the integrated calendar to plan and schedule outfits for upcoming events, making packing or morning routines effortless.

PWA Functionality: Provides an app-like experience with offline capabilities and smooth performance across mobile devices.

How we built it

We implemented a modern, scalable, and modular architecture using a full-stack JavaScript/TypeScript approach:

Frontend: Built with Next.js 14, React 18, and TypeScript to handle the user-facing UI and deliver the PWA capabilities. Tailwind CSS and Radix UI ensured a responsive and accessible design.

Backend & API: NestJS provided a robust, modular backend architecture, exposing data via a GraphQL API (Apollo Server) for efficient data fetching.

AI/ML Pipeline: We used a hybrid approach: TensorFlow.js for immediate, client-side image feedback (e.g., cropping) and a dedicated server running PyTorch for the complex, server-side outfit recommendation algorithm (combining collaborative filtering and contextual features).

Infrastructure: PostgreSQL with Prisma ORM managed the structured data, while AWS S3 was essential for scalable and cost-effective image storage. We leveraged Vercel for serverless deployment and scalability.

Challenges we ran into

The most significant hurdles lay in integrating and tuning the various AI and external API components:

Contextual Recommendation Logic: Designing the server-side PyTorch model to accurately weigh three disparate variables (clothing vector, numerical weather data, and categorical occasion type) to output a stylistically coherent outfit was complex and required rigorous tuning of the dataset and loss functions.

Image Tagging Accuracy: Achieving high accuracy in auto-classification required combining the strengths of multiple tools. We utilized the general-purpose Google Cloud Vision API for initial tagging and supplemented it with our custom model to achieve fashion-specific precision (e.g., differentiating between a "t-shirt" and a "polo shirt").

PWA Offline Synchronization: Ensuring seamless state management between the Next.js frontend and the NestJS backend to allow users to view their wardrobe and planned outfits even when offline presented challenges in caching strategy and data hydration.

Accomplishments that we're proud of

Successful End-to-End AI Integration: We built a complete, working pipeline that goes from image upload → AI tagging → data storage → AI-powered recommendation, which is the heart of the application.

High-Fidelity Contextual Styling: The system successfully factors in real-time weather. Being able to demonstrate that the app recommends a heavy coat and boots for a 35°F day, and shorts for a 90°F day, is a major functional accomplishment.

Modular and Maintainable Tech Stack: Establishing a clean architecture using Next.js, NestJS, and GraphQL ensures the project is highly scalable and ready for future features outlined in the roadmap.

What we learned

This project provided invaluable learning, particularly in the intersection of web development and machine learning:

The Power of Hybrid ML: We learned that a purely server-side ML model is often inefficient for real-time applications. Combining client-side ML (TensorFlow.js) for quick feedback with server-side ML (PyTorch) for heavy-duty computation is a powerful performance strategy.

GraphQL for Complex Systems: Using GraphQL was essential for efficiently handling data requests that pull from multiple micro-sources (wardrobe DB, recommendation engine, weather API) into a single API response for the frontend.

What's next for Wardrobe

The foundation is strong, but we have an ambitious roadmap:

Smart Closet Insights: Develop AI features to analyze usage patterns (e.g., alert the user if an item hasn't been worn in six months) to encourage sustainability.

Enhanced Styling: Integrate AI to provide tips based on current fashion trends and body type.

Integration: Expand API integrations to include social sharing of outfits and potential links to online shopping platforms to complete an outfit.

Multilingual Support: Implement i18n to make the app accessible globally.