From a9576a449febf0c818b46dbbc283f219a415a2f5 Mon Sep 17 00:00:00 2001 From: scoronelhamilton <55328949+scoronelhamilton@users.noreply.github.com> Date: Sat, 21 Dec 2019 16:32:55 -0500 Subject: [PATCH 01/13] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index de09519..13c7029 100644 --- a/README.md +++ b/README.md @@ -33,7 +33,7 @@ _Developed by [Sebastian Coronel](https://github.com/scoronelhamilton)_ ### Your 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)_ From cc93bd6b4d8688438ded27f2f3e2cc5fe46d641f Mon Sep 17 00:00:00 2001 From: Elaine Date: Sat, 21 Dec 2019 16:36:51 -0500 Subject: [PATCH 02/13] q-and-a readme --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 13c7029..ce26d48 100644 --- a/README.md +++ b/README.md @@ -37,6 +37,7 @@ _Developed by [Sebastian Coronel](https://github.com/scoronelhamilton)_ ### Questions & Answers _Developed by [Elaine Wong](https://github.com/lainermeister)_ +![IXSn1CMjlF (1)](https://user-images.githubusercontent.com/26628913/71314038-8f0dbf00-2439-11ea-8244-c0f798006154.gif) From 3f077cafcb9d194ea6e3b68f240ad1c46584eb97 Mon Sep 17 00:00:00 2001 From: scoronelhamilton <55328949+scoronelhamilton@users.noreply.github.com> Date: Sat, 21 Dec 2019 16:58:16 -0500 Subject: [PATCH 03/13] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 13c7029..45c602a 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ _Developed by [David Lam](https://github.com/davidlam296)_ ### Related Items _Developed by [Sebastian Coronel](https://github.com/scoronelhamilton)_ - +![Related Products](https://user-images.githubusercontent.com/55328949/71314266-e7928b80-243c-11ea-8709-99085b36809d.gif) ### Your Outfit _Developed by [Sebastian Coronel](https://github.com/scoronelhamilton)_ From 41452d20d455ebd7c4e877cdd6e2f5fc3993b1a2 Mon Sep 17 00:00:00 2001 From: Elaine Date: Sat, 21 Dec 2019 17:27:07 -0500 Subject: [PATCH 04/13] q and a readme --- README.md | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index ce26d48..53cbd07 100644 --- a/README.md +++ b/README.md @@ -37,8 +37,22 @@ _Developed by [Sebastian Coronel](https://github.com/scoronelhamilton)_ ### Questions & Answers _Developed by [Elaine Wong](https://github.com/lainermeister)_ -![IXSn1CMjlF (1)](https://user-images.githubusercontent.com/26628913/71314038-8f0dbf00-2439-11ea-8244-c0f798006154.gif) +Thw 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/71314408-9cc64300-243f-11ea-9f85-771009701ef0.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 From 4daf70bdfede0eb7f007769f4fd878171e39bd29 Mon Sep 17 00:00:00 2001 From: Elaine Date: Sat, 21 Dec 2019 17:29:35 -0500 Subject: [PATCH 05/13] readme gif --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 53cbd07..b6efa2b 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,7 @@ Users can mark questions & answers as "helpful" as well as "reporting" answers, Additionally, users can enter 3 or more characters to search for questions by keyword. -![Questions & Answers GIF 1](https://user-images.githubusercontent.com/26628913/71314408-9cc64300-243f-11ea-9f85-771009701ef0.gif) +![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. From 1cedd421382e26cfd93d278a6812bd3fac34e395 Mon Sep 17 00:00:00 2001 From: scoronelhamilton <55328949+scoronelhamilton@users.noreply.github.com> Date: Sat, 21 Dec 2019 17:31:53 -0500 Subject: [PATCH 06/13] Update README.md --- README.md | 29 ++++++++++++----------------- 1 file changed, 12 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index 0fa86f6..d6234d5 100644 --- a/README.md +++ b/README.md @@ -25,34 +25,29 @@ _Developed by [David Lam](https://github.com/davidlam296)_ -### Related Items +### 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) -### Your 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)_ +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. -Thw Questions & Answers are rendered for specific products based on an external API GET request. +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. -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. +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. -Users can mark questions & answers as "helpful" as well as "reporting" answers, and all these actions send PUT requests to the API. + ADD MODAL GIF!!!!!!!!!!!!!!!!!!!!!! -Additionally, users can enter 3 or more characters to search for questions by keyword. +Clicking anywhere else in the product card will redirect the user to the main page of that product. -![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. +### 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) -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 +_Developed by [Elaine Wong](https://github.com/lainermeister)_ -![Questions & Answers GIF 2](https://user-images.githubusercontent.com/26628913/71314476-f8dd9700-2440-11ea-93dd-8d6e6b7e6146.gif) ### Reviews From f364eb4450341b3612008bd18b5e80bf31cf9ba3 Mon Sep 17 00:00:00 2001 From: Elaine Date: Sat, 21 Dec 2019 17:32:44 -0500 Subject: [PATCH 07/13] merged changes --- README.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/README.md b/README.md index d6234d5..bd15a1e 100644 --- a/README.md +++ b/README.md @@ -48,7 +48,21 @@ _Developed by [Sebastian Coronel](https://github.com/scoronelhamilton)_ ### Questions & Answers _Developed by [Elaine Wong](https://github.com/lainermeister)_ +Thw 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)_ From 2c52c9551ce23b587a889ec79677841cff3045cc Mon Sep 17 00:00:00 2001 From: Elaine Date: Sat, 21 Dec 2019 17:35:39 -0500 Subject: [PATCH 08/13] added styling --- README.md | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index bd15a1e..3db3199 100644 --- a/README.md +++ b/README.md @@ -20,11 +20,11 @@ The Kartify product page contains many components of a modern e-commerce product ![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)_ - - ### Related Products _Developed by [Sebastian Coronel](https://github.com/scoronelhamilton)_ @@ -67,7 +67,12 @@ The "Add Answer" form allows for users to upload up to 5 images of the product. ### 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 on an e-commerce page. 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. From 04c0fb7176eb03371774f84a76c5266bc3779200 Mon Sep 17 00:00:00 2001 From: Elaine Date: Sat, 21 Dec 2019 17:37:03 -0500 Subject: [PATCH 09/13] minor text change --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3db3199..d6f4032 100644 --- a/README.md +++ b/README.md @@ -68,7 +68,7 @@ The "Add Answer" form allows for users to upload up to 5 images of the product. _Developed by [Bryce Champaign](https://github.com/brycechampaign)_ ### Styling -We built color swapping functionality to allow users to flip between light and dark themes on an e-commerce page. 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. +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) From 8034633570ec8b617a362ffdd03548577cfe2eb2 Mon Sep 17 00:00:00 2001 From: Sebastian Coronel Date: Sat, 21 Dec 2019 21:24:23 -0500 Subject: [PATCH 10/13] Minfor style fixes --- client/components/App.jsx | 6 +++--- client/components/OtherItems/ProductsCarousel.jsx | 1 + client/components/OtherItems/index.jsx | 2 +- package.json | 2 +- 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/client/components/App.jsx b/client/components/App.jsx index f1d2aa5..40bed1b 100644 --- a/client/components/App.jsx +++ b/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 (<>
@@ -63,4 +63,4 @@ const App = ({ ); }; -export default App; +export default App; \ No newline at end of file diff --git a/client/components/OtherItems/ProductsCarousel.jsx b/client/components/OtherItems/ProductsCarousel.jsx index 5fe575a..1e6b013 100644 --- a/client/components/OtherItems/ProductsCarousel.jsx +++ b/client/components/OtherItems/ProductsCarousel.jsx @@ -21,6 +21,7 @@ const ProductsCarousel = ({ products, handleClick, setActionButton }) => {
{products.map((product, i) => { if (products.length < cardsToRender || (i < pointer + cardsToRender && i >= pointer)) { + console.log(product === null ? 'null' : product.id) return ( {
); -} +}; export default OtherItems; \ No newline at end of file diff --git a/package.json b/package.json index 252f035..65ebfb5 100644 --- a/package.json +++ b/package.json @@ -76,4 +76,4 @@ "webpack": "^4.41.2", "webpack-cli": "^3.3.10" } -} \ No newline at end of file +} From f1f5d17ba40227c207eac009693fc8508658f2b4 Mon Sep 17 00:00:00 2001 From: Sebastian Coronel Date: Sat, 21 Dec 2019 21:26:24 -0500 Subject: [PATCH 11/13] Add modal gif to README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3db3199..07e0b0a 100644 --- a/README.md +++ b/README.md @@ -36,7 +36,7 @@ The products are displayed in a finite carousel. If there are more than five rel 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. - ADD MODAL GIF!!!!!!!!!!!!!!!!!!!!!! +![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. From 6013119a8bf78a16f7d27cefd91b0dca44204bbc Mon Sep 17 00:00:00 2001 From: Elaine Date: Mon, 23 Dec 2019 08:41:04 -0500 Subject: [PATCH 12/13] fixed links --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index ec3c7dc..e2bd568 100644 --- a/README.md +++ b/README.md @@ -13,9 +13,9 @@ _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) From 155d8d2ee9b71dcaf109efc6007749039bc45658 Mon Sep 17 00:00:00 2001 From: davidlam296 <52646652+davidlam296@users.noreply.github.com> Date: Sat, 18 Jan 2020 12:31:25 -0500 Subject: [PATCH 13/13] Update README.md --- README.md | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index e2bd568..70839d8 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,16 @@ Per business requirements, the [product page was styled](#styling) both in light ### 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. + +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) + ### Related Products _Developed by [Sebastian Coronel](https://github.com/scoronelhamilton)_ @@ -48,7 +58,7 @@ _Developed by [Sebastian Coronel](https://github.com/scoronelhamilton)_ ### Questions & Answers _Developed by [Elaine Wong](https://github.com/lainermeister)_ -Thw Questions & Answers are rendered for specific products based on an external API GET request. +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.