Project created with React

Project Kloth

Table of Contents

• Getting Started
  • 1. Installing Dependencies
  • 2. Running the Project
• Project Details
• Contributers

Getting Started

Kloth is a single page e-commerce web application created utilizing React and Node/Express. This project was created by a team of four engineers.

Built With

1. How to Install Dependencies

npm install

2. Running the Project

Runs development server:

npm run build:dev
npm run start:dev
# or
yarn build:dev
yarn start:dev

The application will be running on http://localhost:3000. This script will also run webpack and auto refresh the page whenever you make changes.

Project Details

Overview

• Product Information

  The top right will have essential product information such as category, name, price, and average star ratings (if reviews exist).

• Image Gallery

  Shoppers can see in the image gallery the photos of the current product and its default style. There is a bar to the left of the image gallery that contains more photos for the shopper to look through. Clicking on the main image will also generate a closable popup of that image.

• Style Selector

  Each product can have multiple styles, and they will appear as bubbles users can select between. Selecting a new style will also change the image gallery to reflect a new set of photos.

• Add to Cart

  If a style is in stock, the size and quantity dropdowns will allow selection and shoppers can add to cart.

• Share to Facebook, Twitter, and Pinterest

Related Items & Comparison

• Related Products List

1. Displays a list of products related to the product currently being viewed.

2. Clicking on a single product card will navigate to the detail page for that product

3. Clicking on the star displays a comparison modal comparing the details of the product of the current page to those of the product that was selected from this list.

• Related Products Carousel Behavior

  Related products are listed as cards in a carousel fashion scrolling horizontally

• Your Outfit List

1. Displays a custom list of products created by the user which the user has selected to group together as an outfit.

2. Clicking on a single product card will navigate to the detail page for that product

3. Clicking on the X removes the product card from the outfit list

• Outfit Carousel Behavior

1. Outfit is listed as cards in a carousel fashion scrolling horizontally

2. Clicking on the ‘+’ icon adds the currently viewed product to the outfit list

Ratings and Reviews

• See list of reviews for current product 2 at a time

• Write new review

• Filter list of reviews by star count, helpfulness, and most recent

Questions & Answers

• Questions List

  Displays a list of up to 4 questions about an item. By clicking additional questions, you can render the rest of the questions. All questions are sorted by their helpful rating.

• Individual Question

  Each question can be marked as helpful or reported to be removed. Each question will also show up to 2 corresponding answers where more can be generated by clicking more answers. Answers from the seller will be prioritized to the top of the list.

• Search Questions

  You can search for specific questions in the search bar that will filter the list to only those that match the search.

• Add a Question

  Modal pop out that will allow the user to add a question for a given product.

• Add an Answer Modal

  Modal pop out that will allow the user to add an answer for a given question.

Contributors

• Alex Hu
• Rockwell Allen
• Sarah Ma
• Matthew Tanaka

Learn More

To learn more about React.js, take a look at the following resources:

• React Documentation - learn about React.js features and API.
• Learn React.js - an interactive React.js tutorial.
• You can check out the React.js GitHub repository