Product app has been done

package.json

@@ -8,7 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^2.1.3",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -17,12 +17,6 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -34,15 +28,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "eslint": "^8.22.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.0",
-    "prettier": "^2.7.1"
-  },
-  "lint": "eslint .",
-  "lint:fix": "eslint --fix",
-  "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
+  }
 }

public/index.html

@@ -42,5 +42,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script src="../src/index.js" type="text/jsx"></script>
   </body>
 </html>

src/App.js

@@ -1,7 +1,7 @@
 import React from 'react';
-
 import Products from './components/Products';
 
+
 const products = [
   {
     id: 1,
@@ -84,12 +84,10 @@ const products = [
 ];
 
 const App = () => {
-  return (
-    <div>
+  return <div>
       <h1 className="title">BD Store</h1>
-      <Products  />
+      <Products products={products}/>
     </div>
-  );
 };
 
 export default App;

src/components/Product.js

@@ -1,19 +1,19 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
 
-const Product = () => {
-  return (
-      <article className="product">
-      <img src="" alt="" />
-      <div className="product__details">
-        <h4 className="product__title">product title</h4>
-        <p>Price: $ product price</p>
-        <p>Rating: product rating rate/5</p>
-        <p className="product__desc">Description: product.description</p>
-        <button className="product__btn btn">Add to cart</button>
-      </div>
-    </article>
-  );
-};
+const Product = (prop) => {
+  const {title, images, rating, count, price, description,  category} = prop;
+  return (<div className='product'>
+            <img src={images} alt={title} />
+            <div className="product__details">
+              <h4 className="product__title">{category} - {title}</h4>
+              <p className='product__price'>Price: $ {price}</p>
+              <p className='product__rating'>Rating:{rating} {count} rate/5</p>
+              <p className="product__desc">Description: {description}</p>
+              <button className="product__btn btn">Add to cart</button>
+            </div>
+          </div>
+        );
+      };
 
 export default Product;

src/components/Products.js

@@ -1 +1,18 @@
+import React from "react";
 /* eslint-disable react/prop-types */
+import Product from './Product';
+
+
+const Products = (prop) => {
+
+     const {products} = prop;
+     return (
+          <article className="article-products">
+               <div className="products">
+               { products.map((product, index)=> <Product key={index} count={product.rating.count} rating={product.rating.rate} title={product.title} price={product.price} description={product.description} category={product.category} images={product.image} />)}
+               </div>
+          </article>
+     );
+}
+
+export default Products;