/black-clover-FEC

The frontend of an e-commerce product details page

Primary LanguageJavaScript

Overview: black-clover-FEC

Table of Contents

  1. Description
  2. Authors
  3. Modules
  4. Installation

Description

An aesthetic and responsive e-commerce product page for retailers.

Tech Stack

Built With

JavaScriptReactReact RouterExpress.jsStyled ComponentsHTML5CSS3

Authors

Modules

Product Index - DRI: Johnathan Simeroth

Key Features

  • Provides basic navigation to all products in the catalog
  • This module was not in the original project scope, but was added to improve overall dev-user experience

product index demo

Product Overview Module - DRI: Yale Yang

Key Features

  • Boasts a gallery of style-specific product images in a carousel
  • Responsive style, size, and quantity selection

product overview demo

Related Products Module - DRI: Brandon Woods

Key Features

  • Displays a list of related products in a custom carousel
  • Comparison of related products feature-by-feature
  • Persistent memory of user-saved products in their "outfit"

related products demo

Ratings and Reviews Module - DRI: Johnathan Simeroth

Key Features

  • Lists product-specific reviews
  • Displays product review meta-data
  • Enables users to sort reviews and stack multiple filters
  • Modal form allows users to add their own reviews
  • Integration with Imgur API enables user photo uploads (as a stopgap until the client's backend adds support for image storage)

Filter and sort demo:
reviews filter and sort demo

Add review, vote helpful, and report reviews demo:
reviews add vote and report demo

Q&A Module - DRI: Noah Clouthier

Key Features

  • Lists product-specific questions and answers
  • Enables users to add their own questions and answers

Installation

To get started with the dev version of this repo, follow these steps:

  1. Fork / Clone the repo
  2. Replace config.example.js in the env folder with a config.js file, filling out the required tokens and keys.
  3. npm install
  4. npm run serve
  5. npm run build
  6. Navigate to localhost:8080 and start shopping!