README.md

FashionBuddy 👕

Dragonhack 2024 project by Rakete (Tim Vučina, Tjaž Eržen and Žan Horvat)

Virtual fashion assistant mobile app, designed to provide friendly and personalized style advice with AI.

• User can upload an image of their outfit and ocassion
• Assistant will rate it (based on provided ocassion) offering feedback on style
• Assistant will also provide recommendations to improve style
  • Recommendations are provided with products from ASOS webstore

Technologies used 📚

• React Native + Expo
• Typescript
• NativeWind (for styling)
• Supabase (for image bucket store)
• react-native-gen-ui

APIs used 🌎

• OpenAI API: for ChatGPT assistant
• Rapid API: for ASOS webstore product recommendations
• The New Black AI API: for creating user Fashion designs

Getting started 🔨

Before you begin, add following environment variables to .env:

EXPO_PUBLIC_OPENAI_API_KEY=<your_openai_api_key>
EXPO_PUBLIC_RAPID_API_KEY=<rapid_api_key>
EXPO_PUBLIC_RAPID_API_HOST=<rapid_api_host>
EXPO_PUBLIC_EMAIL=<your_auth_for_rapi_api>
EXPO_PUBLIC_PASSWORD=<your_auth_for_rapi_api>
EXPO_PUBLIC_SUPABASE_URL=<your_supabase_url>
EXPO_PUBLIC_SUPABASE_KEY=<your_supabase_key>

Install dependencies:

yarn install

To run app use:

yarn ios        # To run app on iOS
yarn android    # To run app on Android
yarn start      # To test app with Expo

Project structure 📁

A well-organized project structure is essential for efficient development. We are using following layout:

- app           # App screens or layout
- assets        # Static files lives here (icons, images, etc..)
- components    # UI components
-dump           # Map for ASOS webstore categories
- parser        # Parsing stuff for webstore products
- utils         # Helper functions and API calls

Architecture 📐

Flow

1. Get image of user outfit
2. Send the image data to Supabase bucket for storage, process image with OpenAI API
3. Get rating for user outfit, get outift recommendations using OpenAI Functions and external API call
4. Display the results and recommendations in the app's UI (using Generative UI) for the user to view and interact with.

Diagram