/TechStyles

HR Frontend Capstone Project

Primary LanguageJavaScript

Techstyles

A modernized e-commerce site built for an optimal user browsing experience.

Authors

Madeline King
Simon Buret de Longagne
Robert Hu
Mo Akbari

Built With

NodeJSReactExpressJSJavaScriptHTML5CSS3Styled-componentsReduxReact RouterAWS

Key Features

  • Light/dark mode toggle
  • Optimized performance using Redux

Overview

Features

  • Interactive image gallery with zoom-in features
  • Details page describing product attributes and pricing
  • Styles selector along with a user-friendly size guide

fec-overview-readme

Additional Features
  • Social media sharing ability
  • Checkout cart for product purchases

fec-cart-readme

Related Products & Your Outfit

Features

  • A carousel displaying related products
  • A modal comparing product features
  • A list of products saved by the user

fec-related-products readme

See Comparison Details

Screen Shot 2022-12-17 at 10 26 06 AM

Questions & Answers

Features

  • Search functionality to filter questions by title
  • Question and Answers lists with Load More functionality
  • Question and Answer modals for adding to the list

fec-qa-readme

See Q&A Forms

fec-qa-forms-readme

Ratings & Reviews

Features

  • Filter reviews by both rating and query
  • Visual represention of the breakdown of product ratings and characteristics
  • A custom form for adding reviews

fec-rr-readme

See R&R Form

fec-rr-form-readme

Getting Started

Installation

  • Clone the repository 
        git clone https://github.com/KFEC/TechStyles.git
  • Install the dependencies 
        npm install
  • Copy example.env file and rename to .env with the following within 
        PORT=3000

    HOST='localhost'

    API_TOKEN='Insert API token'

    WEBPACK_MODE='development'
  • Run the following script 
        npm run dev
    npm run start