jwd2a / bellelush Goto Github PK

Screen that allows a user to add products to a look.

Frontend:

• Image of look being created (photo taken in previous step)
• Stacked carousels for product categories. Should always display an add button to easily allow a user to add a product to the category.
• Added products should appear in carousel as they're added

Backend:

No backend integration. Client-side store. Save happens in subsequent step.

Screen allows a user to select a face profile type.

Frontend:

• Grid of faces
• Next button
• Title bar

Backend

Hard code face types into client-side app. JSON dict of types and images.

Modal/popup that is invoked when a user clicks "Save" on a look. This modal asks them to name it and add any other metadata.

Frontend:

• Modal/popup with title and form field for name
• Publish button

Backend:

[POST] /looks

Allow a user to signup for the app:

• Native login (email/password)
• Facebook login

Modal/popup used when adding a product. Allows a user to search products via Amazon.

Frontend:

• Modal/popup with form field for searching by name
• Autocomplete using response from Amazon
• List items in search should have image and title. May also need to display color.

Backend:

No backend integration. Store product ID in client-side JSON object for saving later.

Screen for viewing details of a single look. Allows a user to view the look, and see all products tagged on the look.

Frontend:

• Image showing look
• Stacked set of carousels for each category. Products are displayed and navigated with left/right swipe.
• Display user who submitted this look. Link to their profile page.

Backend:

[GET] /looks/:id - returns single JSON document with arrays of products and associated look metadata

Screen with a grid of colors for face tones.

Frontend:

• Grid of colors
• Next button
• Title bar

Backend:

• Hardcode array of colors into client-side

Screen that instructs a user to upload their natural photo, should come after face tone selection. We should include copy that explains why they're doing this.

Frontend:

• Button/graphic that prompts the user to upload or take a photo
• Confirm/Retake buttons after photo has been taken

Backend:

• API endpoint for creating user with all information selected through setup [POST] /users

Off-canvas menu for displaying options.

Menu items:

• Create look (button)
• Me - go to user profile
• My Looks - go to list of submitted looks for current user
• Feed - go to the feed

Screen that allows a user to view a single product. All product information sourced from Amazon.

Frontend:

• Display product image
• Product title
• Product description
• Product price (?)
• Buy button (link to product page on Amazon)
• Other looks list - grid of other looks that use this item (?)

Backend:

• On the backend, we'll just issue a request straight to Amazon for all this information.
• For related looks, we'll create an endpoint that allows searching looks by product

Screen for browsing the feed of looks in the app. Offers the user the ability to view a single look at a time, or a grid.

Frontend:

• View for single image browsing. Paging controls using swipe to left and right
• View for grid-based browsing. Scroll up/down to browse. Infinite scroll.
• Icons at the bottom of face indicating categories of products tagged.
• Control for toggling view type (grid/single)

Backend:

• [GET] /looks - return array of JSON objects for each look

Once a user decides to create a look, the first screen they'll see is one asking them to take a photo of their face with makeup on.

Frontend:

• Title/instructions about taking photo
• Button/image prompting user to take photo
• Accept/retake buttons after photo is taken

Backend:

No backend integration at this point. Photo should be stored client-side until look is saved in subsequent steps.

Screen for showing profile of a user. Displays their photo, username/name, list of looks they've created.

Frontend:

• Display image of user
• Username or full name
• List of looks (grid under profile information)

Backend:

[GET] /users/:id

Screen that lists all looks that a user has created. Display in a grid.

Frontend:

• Grid of looks (face images)
• Name/date on each look
• Clicking/tapping on look goes to look detail
• Sort by date

Backend:

[GET] /users/:id/looks (may not need to actually do this. We could just return looks on the user object as an array of IDs when calling /users)