Merge branch 'master' of https://github.com/Kartify-Team/Kartify

README.md

@@ -13,40 +13,79 @@ _Need to add links_
 ## Description
 The Kartify product page contains many components of a modern e-commerce product page, with the following sections:
 * [Product Overview](#product-overview)
-* [Related Items](#related-items)
-* [Your Outfit](#your-outfits)
-* [Questions & Answers](#questions-and-answers)
+* [Related Products](#related-products)
+* [My Outfit](#my-outfit)
+* [Questions & Answers](#questions-&-answers)
 * [Reviews](#reviews)
 
 ![Kartify Product Page](https://user-images.githubusercontent.com/26628913/71313556-2a029b00-2432-11ea-8370-28f713f946b5.gif)
 
+Per business requirements, the [product page was styled](#styling) both in light and dark themes.
+
 ### Product Overview
 _Developed by [David Lam](https://github.com/davidlam296)_
 
+This Product Overview section renders product information based on data receieved from an external API server.
 
+Basic product information is displayed, including: product name, description, features, rating and product styles.
 
-### Related Items
-_Developed by [Sebastian Coronel](https://github.com/scoronelhamilton)_
+Dynamic producet information is displayed based on selected product style, including style name, price, size and quantity. Selecting a different style will dynamically render the changed data.
 
+The product's selected style 's default picture is displayed as the main image. A gallery interface will allow the user to view all other images of that style. The selected image is indicated with a bottom border. The main image can be selected by using the left and right buttons or by clicking on the thumbnail of the image gallery. An expanded view of the image can be seen by clicking on the main image.
 
+![image-gallery-demo](https://user-images.githubusercontent.com/52646652/72667572-f5740600-3a14-11ea-89fa-d6cb27c865f4.gif)
 
-### Your Outfit
+### Related Products
 _Developed by [Sebastian Coronel](https://github.com/scoronelhamilton)_
 
+![Related Products](https://user-images.githubusercontent.com/55328949/71314266-e7928b80-243c-11ea-8709-99085b36809d.gif)
+
+This section shows a lis of products related to the main product. The ids of the products to show are determined server-side, but additional HTTP requests are required to get the information, cover image, and price of each related product.
+
+The products are displayed in a finite carousel. If there are more than five related products, the user will be able to navigate the carousel by clicking the 'next' button. Once the last product in the carousel is diplayed, the arrow will disappear.
 
+Each chard has a 'compare' button in the top-right corner that will open a modal that displays the features of the main product and the clicked product. The common features are shown in the same line to make comparison easier.
+
+![Comparison Window](https://user-images.githubusercontent.com/55328949/71316076-09523980-2462-11ea-9080-121caf0b1ee5.gif)
+
+Clicking anywhere else in the product card will redirect the user to the main page of that product.
+
+### My Outfit
+_Developed by [Sebastian Coronel](https://github.com/scoronelhamilton)_
+
+![Save Outfit Local Storage](https://user-images.githubusercontent.com/55328949/71314017-4fdf6e00-2439-11ea-82dc-1c1a7abe6066.gif)
 
 ### Questions & Answers
 _Developed by [Elaine Wong](https://github.com/lainermeister)_
 ![Lazy Loading](https://user-images.githubusercontent.com/26628913/71314038-8f0dbf00-2439-11ea-8244-c0f798006154.gif)
 
 
 
+The Questions & Answers are rendered for specific products based on an external API GET request. 
 
+The first two questions & answers are displayed (sorted with Seller on top, then by helpfulness). Lazy loading functionality allows for "infinite scrolling" until a user gets to the end of the question list.
+
+Users can mark questions & answers as "helpful" as well as "reporting" answers, and all these actions send PUT requests to the API.
+
+Additionally, users can enter 3 or more characters to search for questions by keyword.
+
+![Questions & Answers GIF 1](https://user-images.githubusercontent.com/26628913/71314491-422de680-2441-11ea-8376-04eec6b345c1.gif)
+
+Users can add questions to specific product pages, and answers to specific questions, both which sends POST requests to the API. The "Add Question" and "Add Answer" forms conditionally render off the same components that validate upon submission.
+
+The "Add Answer" form allows for users to upload up to 5 images of the product. This sends images to the [Cloudinary](https://cloudinary.com) API, which returns a list of URLs that we send to the external API when storing answers.
+
+![Questions & Answers GIF 2](https://user-images.githubusercontent.com/26628913/71314476-f8dd9700-2440-11ea-93dd-8d6e6b7e6146.gif)
 
 ### Reviews
 _Developed by [Bryce Champaign](https://github.com/brycechampaign)_
 
+### Styling
+We built color swapping functionality to allow users to flip between light and dark themes. The theme is set by default to the user's preferred setting, but the user can toggle back and forth using the theme swapping toggle.
+
+![Kartify-Light-and-Dark](https://user-images.githubusercontent.com/26628913/71299541-b6a34f80-2385-11ea-915b-f23e98c78ffd.gif)
 
+We created a [gist](https://gist.github.com/lainermeister/041fb9530e8c5b0a5b025911e4125527) on how to add this functionality onto any React app.
 
 ## Running the Project
 The project is [deployed](http://ec2-18-223-99-176.us-east-2.compute.amazonaws.com/products/1) on a free-tier AWS server.

client/components/App.jsx

@@ -29,7 +29,7 @@ const App = ({
   useEffect(() => {
     if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
       document.documentElement.setAttribute("theme", "dark");
-      setDark(true)
+      setDark(true);
     }
   }, []);
 
@@ -39,7 +39,7 @@ const App = ({
     } else {
       document.documentElement.setAttribute("theme", "light");
     }
-  }, [dark])
+  }, [dark]);
 
   return (<>
     <div className="topnav">
@@ -63,4 +63,4 @@ const App = ({
   </>);
 };
 
-export default App;
+export default App;

client/components/OtherItems/ProductsCarousel.jsx

@@ -21,6 +21,7 @@ const ProductsCarousel = ({ products, handleClick, setActionButton }) => {
       <div className='sliderContainer'>
         {products.map((product, i) => {
           if (products.length < cardsToRender || (i < pointer + cardsToRender && i >= pointer)) {
+            console.log(product === null ? 'null' : product.id)
             return (
               <ProductCard 
                 key={product === null ? 0 : product.id} 

client/components/OtherItems/index.jsx

@@ -12,6 +12,6 @@ const OtherItems = () => {
       <MyOutfitContainer />
     </div>
   );
-}
+};
 
 export default OtherItems;

package.json

@@ -77,4 +77,4 @@
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10"
   }
-}
+}