Contributors

Rebekah Cruz
GitHub • LinkedIn

Maria Kim
GitHub • LinkedIn

Mattew Sewell
GitHub • LinkedIn

Rob Williams
GitHub • LinkedIn

Table of Contents

• About
• Installation
• Technologies
• Product Overview (Rebekah Cruz)
• Related Products & Outfit List (Maria Kim)
• Questions & Answers (Matthew Sewell)
• Ratings and Reviews (Rob Williams)

About

Project Overview

Given a set of business requirements, the team was tasked with re-designing a landing page for an online clothing store. We used the React framework with Material UI for our frontend build, and integrated it with an Express server to grab data from a provided API.

Installation

1. Download the repo using git

git clone https://github.com/Team-Gouda-FEC/gouda-catwalk.git

2. Install dependencies

npm install

3. Create a config.js file in the root directory

module.exports = {
  TOKEN: 'YOUR TOKEN HERE',
};

• Note, this file is ignored in .gitignore but is required in order to pull data from the API.

4. Run the Webpack compiler

npm run build

5. Run the App

npm start

Technologies

• NodeJS
• Express
• React
• Webpack
• Babel
• Axios
• Material UI

Product Overview (Rebekah Cruz)

Product Overview Section

• A carousel displays the current item, which can be maximized to full screen to get a larger view of the product's image, and navigated via the mouse or keyboard.
• Each selected item may have additional styles which, if avaialble, will be rendered on the right of the screen as thumbnails, with the current selected item having a check mark.
• Blurbs are visible below the carousel that displays various features associated to the current selected item
• To the right of the carousel, you can select a size and quantity, depending on the available inventory
• The item price dynamically renders according to whether or not the selected item is on sale

Related Products & Outfit Section (Maria Kim)

Related Products Section

• A React-Grid-Carousel component displays four products related to the featured product in the overview section
• Each product is represented in a Material UI Card component
• To change the featured product, the customer will click on a related product card
• The star icon located at the top of a product card when clicked will popup a modal comparing the featured products details with the related product details

Outfits Section

• A React-Grid-Carousel component displays at most three outfits that the customer has indicated they are interested in
• Customers can add or remove products from their Outfits Section by clicking on the star icon

Questions and Answers (Matthew Sewell)

Ratings and Reviews (Rob Williams)