Skip to content

Latest commit

 

History

History
104 lines (78 loc) · 4.23 KB

README.md

File metadata and controls

104 lines (78 loc) · 4.23 KB
Raw

Contributors

@bexter89

Rebekah Cruz
GitHub • LinkedIn

@mariaykim

Maria Kim
GitHub • LinkedIn

@robwilliams-it

Mattew Sewell
GitHub • LinkedIn

@robwilliams-it

Rob Williams
GitHub • LinkedIn

Table of Contents

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
  1. Install dependencies
npm install
  1. 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.
  1. Run the Webpack compiler
npm run build
  1. Run the App
npm start

Technologies

Product Overview (Rebekah Cruz)

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)

  • Material UI Grid components segment the product rating from the reviews

Ratings Section

  • Ratings are rendered based on the meta data recieved from the server via Axios requests
  • Each product has different "characteristics" which are displayed below the star rating

Reviews Section

  • Each review is displayeed in a card component with review body, and other data positioned using grid and flex display
  • Reviews are conditionally rendered based on a stateful counter which increments in intervals of 2 when "more reviews" is clicked on
  • "Add A Review" will display a form which will capture any inputs within state
  • When clicking the "submit" button, the form will validate that the input criteria matches the requirements for the field prior to submitting a post request for the associated product.