Skip to content
/ Mecca Public

A redesigned shopping experience with React-based tools for browsing, interacting, and learning about our client's products.

Notifications You must be signed in to change notification settings

RFP-Coco/Mecca

Repository files navigation


Mecca

"A place that is regarded as the center of an activity or interest"

A redesigned shopping experience with React-based tools for browsing, interacting, and learning about our client's products.


technologies used

setup & configuration

NPM Babel Webpack

frontend

React JavaScript HTML5 CSS3

backend

NodeJS Express.js AWS


See how it works

View the demo slides here


Product Overview

Features
  • Renders general information about the product
  • Styles displayed as thumbnails, user can toggle between them
  • Dropdowns for size and quantity selection
  • Photo gallery shows product images specific to selected style.
  • Gallery updates with new style, allows zooming and browsing

product overview sample

Image Gallery

Image Gallery detail
  • Default image gallery view: main image with thumbnail list on the side.
  • Expanded image gallery overlays item detail page, similar functionality as default view.
  • Clicking image opens expanded view, clicking main image zooms 2.5 times in expanded view.
  • User can scroll forward/backward through thumbnail images.

product overview sample

Style Selector

Style Selector detail
  • User can toggle between product styles displayed as thumbnails.
  • Current selection indicated by checkmark overlay on corresponding thumbnail.
  • product overview sample

Add To Cart

Cart detail
  • First dropdown lists available sizes for selected style.
  • Second dropdown selects quantity of selected style/size.
  • product overview sample

Product Information

Product Information detail
  • General information about the product will be displayed at the top of the Overview
  • Link for "Read all [#] reviews" next to star rating, clicking scrolls to Ratings & Reviews.
  • Buttons allow sharing on Facebook, Twitter, and Pinterest.
  • product overview sample

Related Items & My Outfit Menagerie

Features
  • 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”

related products sample

Related Items

Navigation detail
  • 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 and Card Select detail
  • Product card’s action button opens a modal populated with all review data,
    comparing current product card and current product overview item
  • comparison modal sample
  • Clicking a product card will:
    • load it to the product overview
    • repopulate carousel with items related to said product
    • focus user attention on newly rendered overview

My Outfit Menagerie

Outfit management detail
  • 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

my outfit sample


Ratings and Reviews

Key Features

Displays review rating distribution by star

ratings dashboard

Allows users to additively filter reviews by star rating & sort them by relevance, helpfulness, and by newest

filter and sort reviews

Allows users to add a review with a modal

add a review

Allows users to upload images to a review using Cloudinary API

add a review

Questions and Answers

Summary
  • Loads questions and answers related to the current product.
  • Able to search questions.
  • Ask any questions related to current product.
  • Answer to any questions.
  • Upload images with your answer.

my outfit sample

Adding Questions Modal
  • With the click of the ask question button the modal will appear.
  • Able to fill the form and clicking the submit button will send the data to the server.
  • You may also add up to 5 images.
Searching Questions
  • By filling out the search bar you can filter questions.
  • With 3 more characters it will automatically filter at every change you make on your input.
  • The list will stay in sorted order even after filtering happens.
my outfit sample
Interaction Buttons
  • The helpful button will increase the number of helpfulness.
  • On click of the button it will send request to the server to increment the value
  • The report button will allow user to report the answer for internal review.
  • If the item is reported it will not be rendered anymore.
  • There are options to see more questions and answers.
  • This gives better user experience to see data.

About

A redesigned shopping experience with React-based tools for browsing, interacting, and learning about our client's products.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •