Team Coco

MECCA Demo

Quanjing, Tom, Josh, and Kevin

Navigation bar

• Nav-bar will appear as header disappears.

​

• You can navigate through the different components by just clicking them.

Overview - Quanjing

[modal, setModal] = useState(‘default’)

Overview - default view

Overview - expand & zoom view

Share to social media

Cart

warning without selecting a style and size

Link to review

Related Items & My Outfits (Tom)

Overview:

​

• Renders information about each product related to current item in product overview

​

• Navigation via carousel buttons

​

• Clicking a product card sets it as new overview

​

• Compare current item with individual product card

​

• Store personal favorites in “My Outfit Menagerie”

Navigation

• Arrow buttons navigate through product cards.

​

• Currently-selected product card is highlighted with thematic color.

​

• When at far-left or far-right edges of container, click will loop user back to beginning/end of carousel.

Comparison view & Card select

• Product card’s action button opens a modal populated with all review data, comparing current product card and current product overview item.

​

• Clicking a product card will load it to the product overview, repopulate carousel with items related to said product, and focus user attention on newly rendered overview.

My Outfit Menagerie

• Product displayed in product overview is added to my outfit menagerie upon clicking add current product.

​

• Same item cannot be added repeatedly, but differing styles of same item can be added.

​

• Items can be deleted on click of action button.

​

• Items in my outfit are stored in local browser storage for user-specific rendering.

Questions & Answers

• Search questions
• Ask questions
• Answer questions (add images)
• Report & Helpful

This can get replaced w/ vid

• Upon load of the page you can see up to 4 questions.

​

• You may also scroll through them and they fit in single view of the page.

​

• They are sorted in order by being helpful.

• You may also search of questions that has been asked.

​

• If you type more than 2 characters in search bar it will automatically filter as the input changes

• You may also click to view more answers.

​

• It will add 2 more questions if you click.

​

• The button will go away if there are no more questions to load

​

• They will still be in order.

• You may also click the button to load more answers.

​

• Answers will also be in order by helpfulness.

​

• This button will load all the answers and button will change to collapse answers back to 2 answers.

• When you press ask question you ask questions.

​

• A modal will pop up for you to fill out information.

​

• When you submit it will store those data in the database and will also re-render your question list.

​

• You may also click to add answers to question you have answers to.

​

• You can add images when you are filling out an answer via another form.

Ratings & Reviews: Kevin

Technical Challenge:

​

Making my code modular, reusable by my teammates and not hard-coding to the best of my ability.

​

- stars

- radio groups

Features:

- Filter reviews by star

- Sort reviews

- Add a review + upload image to a review

- Click on a existing review thumbnail -> expands image

Displays an average star rating from 1 - 5, along with the appropriate

number of stars

Display a product’s characteristics score,

ranked from 1 - 5

Display review rating distribution by star

Display 2 more reviews

at a time on user click

Click on a review thumbnail image to expand it

​

Filter reviews by star rating

Sort reviews by relevance, helpfulness, or by newest

User can write a product review

User can upload up to 5 images to a review

Form validation to prevent users from submitting faulty reviews

Group Challenge

Modularity of components

• First half of FEC
• Awesome, I’m coding and things are rendering!
• Second half of FEC
• Look at all these states/functions/components we are all using in different ways…

~ Questions ~

Thank you!