Rack | Devpost

Project Demo Link: https://rack-closet-style-planner-com.lovable.app/

Inspiration The inspiration for Rack came from a real, everyday problem close to home. My girlfriend was constantly facing that universal morning frustration: standing in front of a wardrobe packed with clothes, yet feeling like she had absolutely nothing to wear. The issue wasn't a lack of clothes; it was decision fatigue and a lack of visual organization. Existing fashion apps felt clunky, required uploading personal photos to random servers, or tried to force unrealistic "AI virtual try-on" filters that distorted how clothes actually fit. I wanted to build her a fast, beautiful, and completely private tool that turned her own closet into an intelligent, effortless calendar.

What it does Rack is an intelligent, privacy-first digital wardrobe assistant and outfit planner. It operates across three core views:

The Digital Closet: Users upload photos of their clothes, which are automatically stripped of backgrounds and tagged by category and color.

The Interactive Fit Canvas: Instead of distorted AI overlays, Rack uses a highly functional "corkboard" design. It positions a full-body reference photo alongside a proportional flat-lay preview where users can drag, resize, and rotate garments to visualize the vibe and fit instantly.

The Smart Planner: A dynamic schedule (Day, Week, Month views) featuring a "Shuffle" engine. It uses styling logic to generate outfits based on color coordination while actively avoiding clashing combinations or repeating recent outfits.

How we built it Rack is engineered completely as a client-side, standalone web application to guarantee absolute data privacy.

Frontend: Built using React and component-driven JSX to handle smooth drag-and-drop mechanics, canvas scaling, and fluid calendar grid updates.

AI & Vision Integration: Leveraged vision model capabilities to inspect full-body photos and automatically estimate body anchor points (shoulders, waist, hips, ankles) to position garments proportionally.

Image Processing & Fallbacks: Designed a lightweight on-device contrast processing fallback engine to handle background isolation directly in the browser when network connections are absent.

Storage: 100% powered by browser-native local storage. User photos and wardrobe data never leave the device.

Challenges we ran into One of the biggest hurdles was managing the visual presentation of the clothes. Initially, I looked into true generative virtual try-on models, but deploying a specialized diffusion model behind an API meant slow loading times, high server costs, and privacy compromises. Pivoting to the interactive flat-lay canvas required building a robust coordinate-tracking system in React so that when a user manually scales, rotates, or drags a jacket or jeans over their reference photo, the app remembers those precise spatial adjustments for future recommendations.

Accomplishments that we're proud of Seamless UX/UI: Delivering an app that feels like a premium, high-end fashion editorial rather than a rigid database spreadsheet.

True Privacy Architecture: Achieving a zero-egress structure where a user can catalog their entire wardrobe and personal photos with total peace of mind that their data is completely localized.

Deterministic Styling Logic: Crafting an algorithmic coordinator that successfully balances color harmony (neutrals pairing widely, complementing color wheels scoring higher) with an anti-repeat schedule that genuinely solves morning decision fatigue.

What we learned We learned that constraints breed better user experiences. Dropping the pursuit of "perfect photorealistic AI try-on" forced us to focus on what is actually functional for day-to-day use. A highly responsive, adjustable flat-lay canvas is faster, more reliable, and ultimately more useful for planning a week's worth of outfits than waiting on a cloud-based image generator. We also deepened our understanding of building robust local-first web applications that minimize server dependencies.

What's next for Rack Weather-Driven Context: Integrating localized, privacy-preserving weather APIs to ensure the planner automatically shifts toward outerwear on rainy days or lighter layers during heatwaves.

Advanced Analytics: Adding a "Cost-per-Wear" tracker and closet metrics to help users see which items are sitting idle, encouraging sustainable fashion habits.

Worn-History Toggles: Introducing customizable strictness levels for the anti-repeat logic (e.g., an absolute "avoid anything worn in the last 7 days" lock).