Tailor - Virtual Wardrobe & Style Discovery

Tailor is a mobile application built with React Native (Expo) that allows users to discover clothing items through a swipe-based interface and visualize how items might look on them using a virtual try-on feature.

Features

• Swipe Interface: Browse clothing items with a familiar Tinder-like swipe left (dislike) or swipe right (like) mechanic.
• Personalized Feed: Items displayed are fetched based on user preferences, such as price range, set in their profile.
• Liked Items: Keep track of all liked items in a dedicated screen.
• Virtual Try-On (Single Item): Select a liked item and generate an image visualizing how it might look on a representation based on user's profile picture (gender, skin tone, height).
• Outfit Builder: Select multiple liked items and generate an image visualizing them worn together as an outfit.
• User Profiles:
  • Sign up / Log in functionality (Firebase Auth).
  • Set and update shopping preferences (Price Range).
  • Set and update physical characteristics for try-on (Skin Tone, Height).
  • Upload a profile picture.
• Real-time Updates: Profile preferences (like price range) update the swipe feed in real-time using Firebase listeners.
• Price Tracking: view the price of individual items as well as the total cost of an outfit.
• Haptic Feedback: Provides haptic feedback on swipe actions.

Tech Stack

• Framework: React Native (with Expo SDK)
• Backend & Database: Firebase (Authentication, Firestore)
• Animation: react-native-reanimated, react-native-gesture-handler
• Image Generation: Google Gemini Flash 2.0

Setup Instructions

1. Clone the repository:

   git clone <your-repository-url>
   cd tailor # or your project directory name

2. Install dependencies:

   npm install
   # or
   yarn install

3. Set up Firebase:

   • Create a Firebase project at https://console.firebase.google.com/.
   • Enable Authentication
   • Enable Firestore Database. Set up appropriate security rules (e.g., allow users to read/write their own data in the users and likedItems collections).
   • Enable Firebase Storage (for profile pictures). Set up appropriate security rules.
   • Obtain your Firebase project configuration credentials (apiKey, authDomain, projectId, storageBucket, messagingSenderId, appId).
   • Create a configuration file (e.g., src/config/firebase.js or use environment variables) and paste your credentials there. Do not commit your credentials directly to Git. Ensure the firebase.js file initializes Firebase correctly using these credentials.

4. Configure Image Generation API:

   • Retrieve google gemini api key
   • Store your the key in a .env file

Running the App

1. Start the Expo development server:

   npx expo start

2. Run on a device or simulator:
   • Install the Expo Go app on your iOS or Android device.
   • Scan the QR code shown in the terminal with the Expo Go app.
   • Alternatively, press i to run on an iOS simulator or a to run on an Android emulator (if configured).

Firebase Configuration Notes

• Ensure your Firestore security rules allow logged-in users to:
  • Read and write their own document in the users collection (/users/{userId}).
  • Read and write documents in the likedItems collection where the userId field matches their own ID.
  • Create new documents in likedItems.
• Ensure your Firebase Storage security rules allow logged-in users to:
  • Read and write files under a path associated with their user ID (e.g., profile_pictures/{userId}).