WardrobeAI - AI-Powered Wardrobe Stylist Mobile App

A React Native Expo app that helps users manage their wardrobe and get AI-powered outfit suggestions.

✨ Features

Core Functionality

• 📱 Wardrobe Management: Add, view, and organize clothing items with photo upload
• 🤖 AI Image Analysis: Automatically analyze clothing items using AI (Gemini API integration ready)
• 👗 Outfit Suggestions: Get personalized outfit recommendations based on weather, occasion, and activity
• 🔍 Smart Search: Search through your wardrobe by type, color, pattern, or material
• 💾 Persistent Storage: Data saved locally using AsyncStorage with automatic sync

User Experience

• 🎨 Modern UI: Clean, purple-themed interface with intuitive navigation
• 🌤️ Weather Integration: Smart outfit suggestions based on current season and time
• 💡 Helpful Tips: Onboarding and guidance for new users
• ⚙️ Settings: Comprehensive settings screen with preferences and data management
• 📊 Dashboard: Home screen with wardrobe statistics and quick actions

Additional Features

• 📤 Data Export: Export your wardrobe data for backup or sharing
• 🗑️ Wardrobe Management: Clear wardrobe data with confirmation dialogs
• 🎯 User Onboarding: Guided introduction for first-time users
• 📋 Profile Management: User profile with statistics and settings access

📱 App Structure

The app includes 5 main tabs with additional screens:

Main Tabs

• 🏠 Home: Dashboard with wardrobe stats, weather suggestions, and quick actions
• 🔍 Search: Search and filter through your clothing items
• ➕ Add: Upload and categorize new clothing items with AI analysis
• ✨ Outfits: Get AI-powered outfit suggestions with customizable conditions
• 👕 Wardrobe: Grid view of all your clothing items

Additional Screens

• 👤 Profile: User information, statistics, and navigation to settings
• ⚙️ Settings: Comprehensive settings with toggles, preferences, and app information
• 🎯 Onboarding: Welcome flow for new users with app features overview

Tech Stack

• React Native with Expo
• TypeScript for type safety
• Expo Router for navigation
• AsyncStorage for data persistence
• Expo Image Picker for photo uploads
• Context API for state management
• Gemini AI integration (API key required)

Installation & Setup

1. Prerequisites

   npm install -g expo-cli
   npm install -g @expo/cli

2. Clone and Install

   git clone <repository-url>
   cd wardrobe-app/mobile
   npm install

3. Environment Setup

   • Create a .env file in the root directory
   • Add your Gemini API key:

     GEMINI_API_KEY=your_gemini_api_key_here
     

4. Run the App

   npm start
   # or
   npx expo start

5. Test on Device

   • Install Expo Go app on your mobile device
   • Scan the QR code displayed in terminal
   • Or press 'w' to open in web browser for testing

Project Structure

app/
├── (tabs)/           # Tab navigation screens
│   ├── index.tsx     # Home page
│   ├── search.tsx    # Search functionality
│   ├── add.tsx       # Add new items
│   ├── outfits.tsx   # Outfit suggestions
│   └── wardrobe.tsx  # Wardrobe management
├── profile.tsx       # User profile page
└── _layout.tsx       # Root layout

components/
├── ClothingCard.tsx  # Clothing item display
├── OutfitCard.tsx    # Outfit suggestion display
├── ImageUpload.tsx   # Image picker component
└── LoadingSpinner.tsx # Loading states

context/
└── WardrobeContext.tsx # Global state management

services/
└── geminiService.ts   # AI integration service

constants/
└── Colors.ts         # Theme colors

Key Components

WardrobeContext

Manages global state with:

• wardrobeItems: Array of clothing items
• outfitSuggestions: Array of AI-generated outfit suggestions
• addClothingItem(): Add new clothing item
• addOutfitSuggestion(): Save outfit suggestion

ClothingCard

Reusable component for displaying clothing items with:

• Image preview
• Item details (name, type, color, etc.)
• Consistent styling

AI Integration

• Ready for Gemini API integration
• Image analysis for automatic tagging
• Outfit suggestion generation based on wardrobe and conditions

Usage

1. Add Clothing Items

   • Tap "Add Item" from home or use the Add tab
   • Upload a photo or skip to manual entry
   • Fill in clothing details (type, color, season, etc.)

2. Get Outfit Suggestions

   • Go to Outfits tab
   • Enter weather, occasion, and activity details
   • Get AI-powered suggestions based on your wardrobe

3. Search Your Wardrobe

   • Use the Search tab
   • Search by name, type, color, or any clothing attribute

4. Manage Wardrobe

   • View all items in Wardrobe tab
   • Organized in a clean grid layout

Development Notes

• The app uses TypeScript for better development experience
• All screens integrate with the global WardrobeContext
• Data persists locally using AsyncStorage
• Purple theme (#8B5CF6) used consistently throughout
• AI features are simulated but ready for real API integration

Future Enhancements

• Real Gemini AI integration for image analysis
• Weather API integration for automatic weather suggestions
• User accounts and cloud sync
• Social sharing of outfits
• Advanced filtering and sorting options
• Seasonal wardrobe organization

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

This project is licensed under the MIT License.