flipflop

Prompt

You are the lead engineer building a production-ready mobile app called **Dress Picker**. ## PRODUCT Dress Picker answers: > "What should I wear today?" The app recommends outfits using the user's own wardrobe, weather, occasion, personal style, preferences, and previous outfit history. ### IMPORTANT MVP CONSTRAINT **DO NOT USE ANY LLM OR PAID AI API.** The recommendation engine must be completely deterministic and rule-based for the MVP. Do not add: - OpenAI - Gemini API - Claude API - LLM API calls - AI image generation - paid AI services The architecture must, however, be modular enough that an AI recommendation engine can be added later without rewriting the application. --- # TECH STACK Use: - React Native - Expo - TypeScript - Expo Router - NativeWind - Supabase - PostgreSQL - Supabase Auth - Supabase Storage - TypeScript strict mode Use minimal dependencies. The application should work on Android first while maintaining compatibility with iOS. --- # CORE FEATURES Build these features: 1. Authentication 2. User onboarding 3. User profile 4. Style preferences 5. Wardrobe management 6. Add clothing items 7. Edit clothing items 8. Delete clothing items 9. Favorite clothing items 10. Outfit generation 11. Weather-aware recommendations 12. Occasion-aware recommendations 13. Style-aware recommendations 14. Color compatibility 15. Outfit scoring 16. Outfit history 17. Save outfits 18. Like/dislike outfit recommendations 19. Replace individual outfit pieces 20. Recently worn tracking 21. Personalization through rules 22. Home dashboard 23. Saved outfits 24. Profile/settings --- # RECOMMENDATION ENGINE Create the recommendation system independently from the UI. Use: generateOutfits({ wardrobe, weather, occasion, style, preferences, history }) Return: { outfit, score, reasons } The recommendation engine should score outfits using: - Color compatibility: 25% - Occasion match: 20% - Weather match: 20% - Style compatibility: 15% - User preferences: 10% - Recent-wear penalty: -5 - Duplicate outfit penalty: -5 Normalize the final score to 0–100. The system should generate multiple candidate outfits, score them, sort them, and return the best options. --- # COLOR RULES Support: - black - white - gray - navy - blue - light_blue - beige - brown - cream - green - olive - red - burgundy - pink - yellow - orange - purple Create a reusable compatibility system rather than hardcoding logic inside screens. --- # WEATHER Support: - very_hot - hot - warm - mild - cool - cold - very_cold - rain Weather should influence: - clothing thickness - layering - material - sleeves - footwear - rain suitability Create a WeatherProvider interface so the weather provider can be replaced later. --- # OCCASIONS Support: - College - Work - Casual - Date - Party - Wedding - Travel - Gym - Traditional - Custom --- # STYLES Support: - Minimal - Casual - Smart - Trendy - Relaxed - Formal --- # PERSONALIZATION Track: - liked outfits - disliked outfits - favorite clothing - recently worn clothing - frequently worn clothing - saved outfits - preferred colors - preferred styles - preferred occasions Likes and dislikes should gradually influence recommendation scores. Do not overfit after one interaction. --- # DATABASE Create Supabase migrations for: profiles clothing_items outfits outfit_feedback outfit_history user_preferences Every user-owned table must have Row Level Security enabled. Users must only be able to access their own data. Never expose a Supabase service-role key to the client. --- # WARDROBE Users can: - add clothing - upload/take a photo - choose category - choose color - choose style - choose occasion - choose season/weather suitability - mark favorite - edit - delete Categories should include: - T-shirt - Shirt - Polo - Hoodie - Jacket - Sweater - Jeans - Trousers - Cargo - Shorts - Sneakers - Shoes - Loafers - Sandals - Traditional - Accessories Store clothing metadata in PostgreSQL. Store images in Supabase Storage. --- # IMAGE HANDLING When adding clothing: 1. Select image or camera 2. Compress image 3. Show local preview 4. Upload to Supabase Storage 5. Store resulting URL 6. Handle upload errors 7. Provide retry 8. Handle missing/offline images gracefully --- # HOME SCREEN The main screen should contain: - Greeting - Current weather - Today's recommendation - Large outfit card - Outfit score - "Why this outfit?" - Wear this - Save - Try another - Build an outfit The UI should feel like a modern consumer fashion application rather than an admin dashboard. --- # OUTFIT DETAIL Show: - outfit image/cards - score - weather - occasion - style - clothing pieces - explanation - Wear Today - Save - Change Item Changing an item should only replace the selected clothing piece and find the best compatible alternative. --- # NAVIGATION Bottom navigation: Home Wardrobe Saved Profile Include an obvious action for creating/building an outfit. --- # DESIGN Design direction: - Minimal - Premium - Modern - Clean - Fashion-focused - Spacious - Strong typography - Subtle animations - Rounded cards - High-quality image presentation Avoid: - excessive gradients - excessive shadows - clutter - generic dashboard appearance - AI-looking UI - unnecessary decorative elements The UI should feel like a real consumer app designed by an experienced product designer. --- # ARCHITECTURE Use this structure: app/ src/ components/ features/ services/ recommendation/ hooks/ store/ constants/ utils/ types/ supabase/ tests/ Keep: - UI separate from business logic - recommendation logic separate from Supabase - services abstracted - types centralized - reusable components - validation outside screens --- # FUTURE-PROOFING Create interfaces: RecommendationEngine WeatherProvider StorageProvider AnalyticsProvider Initial implementation: RuleBasedRecommendationEngine Future implementations could include: PersonalizedRecommendationEngine AIRecommendationEngine But DO NOT implement AI now. --- # TESTING Create tests for: - color compatibility - weather compatibility - occasion compatibility - style compatibility - outfit scoring - recently worn penalty - duplicate outfit penalty - preference scoring - missing wardrobe items - recommendation generation --- # SEED DATA Create development seed data containing: Black oversized T-shirt White basic T-shirt Navy polo Beige cargo pants Blue jeans Black jeans Olive cargos White sneakers Black sneakers Brown loafers Black hoodie Denim jacket --- # IMPORTANT DEVELOPMENT RULES Use TypeScript strict mode. Do not use unnecessary `any`. Do not put business logic directly inside React components. Do not create fake production APIs. Do not hardcode user-specific data. Do not skip loading/error/empty states. Do not expose secrets. Do not use an LLM. Do not add unnecessary dependencies. Build reusable components. Write clean, maintainable production-quality code. --- # DEVELOPMENT PROCESS Do NOT try to implement the entire application blindly in one step. First: 1. Inspect the current workspace. 2. Create the project foundation. 3. Configure Expo. 4. Configure TypeScript. 5. Configure Expo Router. 6. Configure NativeWind. 7. Configure Supabase. 8. Create the folder architecture. 9. Create database migrations. 10. Create types/interfaces. 11. Create the basic navigation. 12. Create reusable UI primitives. Then stop and report what was created and any configuration I need to provide. After the foundation works, implement features in this order: Phase 1 — Foundation Phase 2 — Authentication Phase 3 — Onboarding Phase 4 — Wardrobe Phase 5 — Recommendation Engine Phase 6 — Home Phase 7 — Outfit Details Phase 8 — Personalization Phase 9 — Polish Phase 10 — Testing At every phase: - run the appropriate checks - fix errors - keep the app buildable - do not break previously working features - explain any manual setup required from me Start with **Phase 1 only**.