Component features:
-
- The overview will contain essential product details regarding price, category, name, and other style details.
-
- An image carousel is presented for users to scroll through various products offered. The image bar on the left presents users with additional photos to scroll through. Clicking the main image returns a magnified view of it.
-
- Available styles can be selected and will show the user an image of the current product with the new style attached to it. Users are able to select through the assortment provided.
-
- Users can add whichever products with whichever styles selected to the cart. If a product is available, they can select it and add it accordingly.
Component features:
-
- Displays a list of products that are related to the current product being viewed.
- Clicking a single product card returns the details of that product.
- Clicking the star opens a modal that compares the current product to the clicked product.
- Presented as a carousel to scroll through different product options.
-
- Displays a custom list of outfits that the user selects and adds to their outfit collection.
- Users can remove the product from their collection by clicking X on the card.
- Outfits are also presented as a carousel to sort through the different products that exist in their collection.
Component features:
-
- Questions are rendered out two at a time with user's able to load in two more at a time with each click of "Load more Questions". All questions are sorted by their helpfulness rating.
-
- Questions can be voted on their helpfulness or reported. Both interactions will be remembered through refresh and will allow the user to only interact with the question once.
-
- Answers can be voted on their helpfulness or reported. Both interactions will be remembered through refresh and will allow the user to only interact with the answer once.
- Answers contain images that will render with the answer, displaying them.
- Answers from the seller will be prioritized in terms of appearing on the list.
-
-
Answers and Questions can be added with their respective buttons ("Add Answer" and "Add A Question").
-
Each button opens up a modal form for the user to fill out and submit. All fields are validated and will not submit completely until all input fields are valid. Images can be added onto the Answer Modal, uploaded through Cloudinary API.
-
-
- Questions can be sorted through with the search bar to filter out responses that match the current query.
- The questions list will continue to filter through keystrokes and will reset once the amount of characters is less than three.
Component features:
-
- Reviews are displayed two at a time, according to the current sort method.
- More reviews can be displayed by clicking the "More Reviews" button and will display two more reviews
-
- Review list can be sorted by newest, helpfulness, and relevant, by choosing from a dropdown menu.
- Review list can also be filtered by the reviewer's star rating, by clicking the "# star".
-
- New reviews can be added by clicking on the "Add New Review" button, which opens up a modal form for the user to fill out. Each input field is validated before submission and will fail to submit if one of the input field is invalid.
- Images can also be uploaded and stored through the usage of Cloudinary Upload API.
-
- Star ratings are accurately displayed to show a rating that is rounded to the closest tenth value.
- The star rating visual is also updated to reflect the calculated rating.
- Product characteristics rated by users display the average. (Size, Width, Comfort, Quality, Length, Fit)
Listed from left to right
npm install
Runs development server:
npm run client-dev
npm run server-dev
yarn run client-dev
yarn run server-dev
The application will be running on http://localhost:3000. This script runs webpack and watches it, auto-refreshing on every new change that you save. You will require a Hackreactor API token inside of a config.js file and dotenv file as well as the port set to 3000.