added missing data points

Author: codeFather-x

frontend/ecommerce-fe/README.md

@@ -12,7 +12,7 @@ This project was bootstrapped with [Create React App](https://github.com/faceboo
 - Add the following filters *(selecting a filter resets sortOption to default)*:
     - Category
     - Brand
-- Add a search bar to search for Product. Leverage the search endpoint or enhance with your own logic. *(searching resets sortOption to default)*
+- Add a search bar to search for Product. Leverages the search [endpoint](https://dummyjson.com/products/search?q=Laptop). *(searching resets sortOption to default)*
 - Provide a detailed product page after clicking on a product.
 - Provide a main product image along with all the product detail information provided by the product endpoint.
 

frontend/ecommerce-fe/src/components/common/Footer/Footer.jsx

@@ -1,10 +1,12 @@
 import { Typography } from '@mui/material';
 import React from 'react';
+import styles from './Footer.module.css';
+
 
 const Footer = () => {
     return (
-        <footer>
-            <Typography>Ecommerce Pvt. Ltd.</Typography>
+        <footer className={styles.FooterCtn}>
+            <Typography>Ecommerce Pvt. Ltd. | Contact Us | About Us </Typography>
         </footer>
     );
 };

frontend/ecommerce-fe/src/components/common/Footer/Footer.module.css

@@ -0,0 +1,3 @@
+.FooterCtn {
+    margin-top: 50px; /* Adjust the value as needed */
+}

frontend/ecommerce-fe/src/components/layouts/ProductPage/ProductPage.jsx

@@ -45,10 +45,16 @@ const ProductPage = () => {
                                 rating={product.rating}
                             />
                             <Typography variant="h4" className={styles.ProductPriceTxt}>
-                                {"$"+product.price}
+                                {"$"+product.price+"("+product.discountPercentage+"% off)"}
+                            </Typography>
+                            <Typography variant="h5" >
+                                {product.category+" | "+product.brand}
+                            </Typography>
+                            <Typography variant="body2" >
+                                {"Product Description:  "+product.description}
                             </Typography>
                             <Typography variant="body2" >
-                                {product.description}
+                                {product.stock+" units left in stock"}
                             </Typography>
 
                         </Container>

frontend/ecommerce-fe/src/components/layouts/ProductPage/ProductPage.module.css

@@ -3,6 +3,10 @@
     min-height: 100%;
 }
 
+.ProductInfoCtn > * {
+    margin-bottom: 50px;
+}
+
 .swiper {
     width: 100%;
     height: 100%;

frontend/ecommerce-fe/src/components/pages/Listing/ProductCard/ProductCard.jsx

@@ -4,7 +4,7 @@ import styles from './ProductCard.module.css';
 import { ProductRating } from '../../../common/ProductRating/ProductRating';
 
 
-export const ProductCard = ({ id,imageUrl,title, description, price, rating }) => {
+export const ProductCard = ({ id,imageUrl,title, description, price, rating,category }) => {
 	return (
 		<Card className={styles.ProductCardCtn} >
 			<CardActionArea href={`/${id}`} >
@@ -24,6 +24,9 @@ export const ProductCard = ({ id,imageUrl,title, description, price, rating }) =
 					<Typography variant="body2" color="text.secondary">
 						{"$"+price}
 					</Typography>
+					<Typography variant="body2" color="text.secondary">
+						{category}
+					</Typography>
 					<Typography variant="body2" color="text.secondary">
 						{description}
 					</Typography>

frontend/ecommerce-fe/src/components/pages/Listing/ProductCatalog/ProductCatalog.jsx

@@ -23,6 +23,7 @@ const ProductCatalog = ({ catalogPage,totalPages,paginationHandler }) => {
                     title={product.title}
                     price={product.price}
                     rating={product.rating}
+                    category={product.category}
                 />
             );
         }