Jules' Wardrobe

About
1. Problem Statement
2. Solution
Example
Installation
Project Charter
Design
Project Management

About

Jules' wardrobe is a recreation of the infamous app from the movie Clueless - 'Cher's Closet'.

Problem Statement

Background

There have been a number of apps and websites that are similar to 'the clueless app', but none that actually attempt to recreate the purpose of the app - to show clothes in a similar arrangement to how they would look on a person, to allow for the shuffling of clothes, and to make a style judgement. My client loves clothes and fashion, and has always wanted her own version of the app to use.

Real World

Childhood dreams of being an LA socialite/Austen hero aside, many a 'floordrobe' is created from trying on various outfit combinations that don't coordinate or suit your style for the day. It can be hard to visualise combinations of clothes together without removing them from your wardrobe and placing them against each other. Inspiration can also sometimes be lacking - how often have you worn the same outfit again and again because you just don't know another combination that would look good together?

Solution

Jules' wardrobe provides a visual representation of potential outfits. It allows users to upload photos of images or their clothing, categorize the images as being a 'top', 'bottom' or 'shoes', and then displays them back to the user. The user is then able to either manually spin through the clothing to decide on an outfit or visualise an outfit they already have in mind, or, if inspiration is lacking, select the shuffle function to create a randomised outfit.

Example

Installation

As this is a native app that needs to run on an iOS device (or simulator), the installation is a little more involved.

Initial setup

Create a Cloudinary account to store images
This app requires a RESTful API backend. Please see the repository for the Jules' Wardrobe node backend for further information.
Create a .env file in the root folder and add your CLOUDINARY_KEY, CLOUDINARY_SECRET and WARDROBE_API as environmental variables.

Install node and watchman:

$ brew install node
$ brew install watchman

Install React Native command line interface:
```
$ npm install -g react-native-cli
```

iPhone Simulator

In order to run React Native applications on the iPhone simulator, you must first have Xcode installed (visit the The Apple website for installation instructions)
Once cloned, in terminal, navigate to the root folder and run:
```
$ yarn install
$ react-native run-ios
```
The app will then compile and open in the Xcode simulator

iPhone

Follow the instructions on the React Native documentation to run your app on your iPhone (support not guaranteed for Android)

In brief:

Install Xcode on your computer (as above)
Sign up for an Apple Developer account
Open the iOS Xcode file and add your developer account
Connect your phone to your computer with USB
Select your phone in Xcode and press play to compile the app and play on your phone.

Project Charter

Scope

To recreate the "Clueless app", as used by Cher in the movie Clueless. The app allows users to flick through photos of their own clothing items in order to visualise outfits without trying them on.

Requirements (MVP)

A user can add photos of their clothing to the app so they can see their own outfits
A user can assign categories to their clothing (tops, bottoms, shoes) so the app can display them in the correct place
A user can spin through the different categories so they can find the correct combination of clothes
A user can save outfits so they can access them again at a later date
A user can use the app on their phone so they can access their camera and/or camera roll

Potential Features

A user can log in so they can see only their clothes and other people can't see their clothes
A user can link the clothes they buy online to the app and import photos of recent purchase so they can keep their wardrobe updated
A user can have their photos resized so their data is wasted uploading unnecessarily large photos.
A user can request AI assistance to rate the style of their outfit
A user can share their outfits with friends

Deliverables

An iPhone app that meets the above 'Minimal app' requirements
Documentation on the installation and use of the app

Benefits

To Client

A cool app she's always wanted
A solution to the problem statement (outlined above)

To Developer

Learning React Native
Creating a front-end focussed application

Design

Initial mockup

Wireframes

User Journey

ERD

const itemSchema = new Schema({
  name: {
    type: String,
    trim: true,
  },
  category: {
    type: String,
    trim: true,
  },
  description: {
    type: String,
    trim: true,
  },
  imageUrl: {
    type: String,
    trim: true,
  },
  createdAt: {
    type: Date,
    default: Date.now,
  },
});

User Stories and Pricing

Trello was used for project management. The screenshots below show the tracking of user stories (MVP and additional features), deliverables, client interactions, requirements and pricing.

hannahcancode/CFA-wardrobefront