A front-end web application built to interact with modern e-commerce APIs.
This application consists of three main widgets: product overview and styles, related and saved products, and ratings & reviews.
The Gallery section handles displaying a product/style combination to the user.
-
The user can cycle through images with the carousel controls or thumbnail interaction:
-
The user can go into a widescreen view and zoom on the image:
The Product Details section displays various information about the product to the user and includes the checkout interaction.
-
The product details. This includes the average rating and the product's name and category
-
The style selection. Here a user can select between the available styles. This changes the gallery display and the price if a style is discounted.
-
The checkout interaction. Here the user can select their desired size and quantity of the product. Once those fields are selected, the add to cart button will become interactive.
The product description section displays the product's description, features, and links to share the product on social media.
The Related Products section displays all similar products relating to the currently viewed Overview item.
-
The ability to scroll through the list of related products specific to the currently viewed Overview item. An action button is available on all cards which reveals a dynamic trait-comparison modal on click:
The Outfit section allows a user to add an Overview item to their collection which persists through their shopping experience.
- The ability to add a favored product to a collection for later reference while shopping.
- Each product card contains a "remove" button to remove products from the collection as needed.
- As the collection expands, a carousel will automatically become available while the Add Item button will remain in place.
- The Outfit collection will persist through page changes.
The Metadata section shows the average rating of every review for the selected product.
- Filtering options for the review list. Upon clicking on any of the rating options (e.g. 5 Star), the review list will update to show reviews of that selected rating.
- The filter is also additive, so it is possible to apply multiple filters at once.
- Once any number of filters are applied, a "Remove All Filters" link appears and will return the review list to its original state upon being clicked. Selecting every rating will also reset the filter.
The Reviews section displays a list of reviews.
- A sorting options dropdown menu. A user may sort the review list based on Relevance, Newest and Helpful.
- A link that marks a review as "Helpful". This increments the "Helpful" count by 1.
- A link that "Reports" a review. This will remove the review from the review list.
- A "More Reviews" button that loads two more reviews every single time it is clicked.
- An "Add A Review" button that opens up a review modal where users can leave their own review on the product.
The Review Modal allows users to rate and review the selected product.
- A star rating system that allows users to rate a review from a score of 1 to 5. Hovering over a star will fill in every star up to the selected star. Clicking on a star will save its position.
- Fields that allow users to include a summary, review body, name, email address. If any required fields are not filled out, an error message will be sent indicating which fields are missing.
- Radio buttons that allow users to select whether or not they recommend the selected product.
- Radio buttons that allow users to rate each characteristic of the selected product (size, width, comfort, quality, etc.).
- A discard button and a clickable backdrop that exits the modal and returns users to the product page.
