A stylish implementation of a product detail page; designed with accessibility, functionality, and interactivity as core principles.

Written in

Bundled with

Powered by

Tested with

Contributors

• boltonlin
• eriknewland
• jerrodvarney
• VesLan

Technical Description

Front-end implementation of a product detail page utilizing React. While this is a front-end focused application, a back-end implementation is included for preventing access to API keys. This application communicates with a remote database API in order to display detailed information about a featured product, its various styles, related items, ratings, reviews, questions, and answers.

Overview

Description

Product overview of a select product. Allows the user to add to cart, add to wishlist, view and inspect galleries of the featured item and its various styles.

Technical Features

• Synchronized carousel and gallery navigation
• Responsive pan & zoom on inspect

Ratings and Reviews

Description

A dashboard outlining various characteristics and ratings regarding the product as well as a list of detailed user accounts of the product and its various characteristics depending on the type of item selected.

Technical Features

• A suite of filters and sorting options that apply to the entire list of reviews without refresh
• Review submission form that accepts up to five photos via drag and drop

Related Items and Comparison

Description

A catalogue of items displayed in a carousel related to the selected product, as well as an outfit tracker which gives the user easy access to view their desired items side-by-side

Technical Features

• Carousels within carousels allows users to change the display of each related item to any of the photos within their galleries
• Outfit tracker persists between page loads without use of a database

Questions & Answers

Description

A list of questions and answers about the selected product.

Features

• Displayed in a reactive and compact accordion
• Updates on action (marking a question as helpful, reporting an answer, adding a question, etc.) without pageload
• Allows the user to search and filter the list of questions upon input

💻 Development

1. Create a .env file that emulates the contents of example.env. You will need to fill in the <> values with valid API keys

2. Install the packages via npm install

3. To launch the application, run the following commands via terminal within the root directory:

• npm run client-dev
• npm run server-dev