project-catwalk

We were tasked with redesigning, from scratch, the products page for an eCommerce company. As a group we created an overview component, related product component, questions and answers component and a reviews and ratings component. React allowed us to implement the requirements quickly and to keep the code maintainable. We were able to use React hooks and context to allow all the components to interface and share the same data.

Product Overview

Provides a comprehensive look of the selected product. Displays a main image along with its accompanied selectable images to provide other views of the product. Details of the product include the review rating, category, name, price and the available styles. Selecting the styles will show variants along with with the images, sizes, and product availability.

Related Products

Related product widgets consist of two parts. One is the Related products which are related to the item displayed by overview component and it changes accordingly. Having carousel of cards let users navigate between the card. And, upon clicking on a star button a modal would pop up which compares the feature between the related card and the product item. Once a card clicked, it would change the overview item as well. The second part is the outfit section, which is unique to each user. It gives the user the ability to save the current product item and navigating through them.

Product Questions and Answers

The questions and answers widget provides the customer with a list of questions for a given product. On page load, the widget will request data from the API and dynamically render the correct questions in order of helpfulness rating. Additional functionality includes a search bar to filter the displayed questions, options to post questions and answers to the API and buttons to rate questions as helpful or report report them for internal review.

Product Ratings and Reviews

The ratings and reviews section provides access to user feedback for the current product. Reviews from other users can be read and new reviews can be created. Also there is a breakdown of the ratings given for all of reviews and the average score given for the characteristics of the current product.

Ratings and Review Component

Building and running on localhost

First install dependencies:

npm install

To run using nodemon:

npm start

To create a production build and watch for changes:

npm run build-prod

To create a development build:

npm run build-dev

Running

Open the file dist/index.html in your browser

Testing

To run unit tests:

npm test