Rebekah Cruz
GitHub • LinkedIn
Mattew Sewell
GitHub • LinkedIn
Rob Williams
GitHub • LinkedIn
- About
- Installation
- Technologies
- Product Overview (Rebekah Cruz)
- Related Products & Outfit List (Maria Kim)
- Questions & Answers (Matthew Sewell)
- Ratings and Reviews (Rob Williams)
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.
- Download the repo using git
git clone https://github.com/Team-Gouda-FEC/gouda-catwalk.git
- Install dependencies
npm install
- Create a
config.jsfile 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.
- Run the Webpack compiler
npm run build
- Run the App
npm start
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
- 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.