From 4abde8d8c220605075ed564070c9307995b17c25 Mon Sep 17 00:00:00 2001
From: ramineb <ramin.ebrahimi75@gmail.com>
Date: Mon, 25 Nov 2024 11:28:34 -0500
Subject: [PATCH 1/2] initial commit

---
 src/App.css         |   3 +-
 src/CartItem.jsx    |  47 ++++++++--
 src/CartSlice.jsx   |  29 +++++-
 src/ProductList.jsx | 215 ++++++++++++++++++++++++++++++++------------
 4 files changed, 225 insertions(+), 69 deletions(-)

diff --git a/src/App.css b/src/App.css
index 88bb5690e..3d7ee8908 100644
--- a/src/App.css
+++ b/src/App.css
@@ -38,7 +38,7 @@
 
 .landing_content {
  margin-top: 430px;
-  margin-left: 100px;
+  margin-left: 200px;
   transform: translate(-50%, -50%);
   z-index: 1;
   text-align: center;
@@ -83,6 +83,7 @@
   cursor: pointer;
   transition: background-color 0.3s ease;
   margin-top: 40px;
+  margin-left: 20px;
 }
 
 .get-started-button:hover {
diff --git a/src/CartItem.jsx b/src/CartItem.jsx
index e06317433..41d2fd5de 100644
--- a/src/CartItem.jsx
+++ b/src/CartItem.jsx
@@ -1,40 +1,73 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { removeItem, updateQuantity } from './CartSlice';
+
 import './CartItem.css';
 
 const CartItem = ({ onContinueShopping }) => {
+ 
   const cart = useSelector(state => state.cart.items);
+  const totalItems = useSelector(state => state.cart.totalItems)
+ 
   const dispatch = useDispatch();
 
+  const handleCheckoutShopping = (e) => {
+    alert('Functionality to be added for future reference');
+  };
+
   // Calculate total amount for all products in the cart
   const calculateTotalAmount = () => {
+    let total = 0;
+   
+    cart.forEach(item => {
+      const costInt = parseInt(item.cost.slice(1));
+      total += costInt * item.quantity;
+    
+    });
+    return total;
  
   };
+const totalAmount= calculateTotalAmount(cart);
 
-  const handleContinueShopping = (e) => {
+  const handleContinueShopping = () => {
    
+   onContinueShopping();
   };
-
-
-
+  
   const handleIncrement = (item) => {
+    dispatch(updateQuantity({ name: item.name, quantity: item.quantity + 1 }));
+  
+    console.log(totalItems);
   };
 
   const handleDecrement = (item) => {
+    if (item.quantity > 1) {
+      dispatch(updateQuantity({ name: item.name, quantity: item.quantity - 1 }));
+    
+      console.log(totalItems);
+    }  else {
+      dispatch(removeItem(item.name));
+    
+      console.log(totalItems);
+    }
    
   };
 
   const handleRemove = (item) => {
+    dispatch(removeItem({name: item.name}));
+    console.log(item.name);
   };
 
   // Calculate total cost based on quantity for an item
   const calculateTotalCost = (item) => {
+    const costInt = parseInt(item.cost.slice(1));
+    return costInt * item.quantity;
   };
 
   return (
     <div className="cart-container">
       <h2 style={{ color: 'black' }}>Total Cart Amount: ${calculateTotalAmount()}</h2>
+      <h2 style={{ color: 'black' }}>Total Items: {totalItems}</h2>
       <div>
         {cart.map(item => (
           <div className="cart-item" key={item.name}>
@@ -55,9 +88,9 @@ const CartItem = ({ onContinueShopping }) => {
       </div>
       <div style={{ marginTop: '20px', color: 'black' }} className='total_cart_amount'></div>
       <div className="continue_shopping_btn">
-        <button className="get-started-button" onClick={(e) => handleContinueShopping(e)}>Continue Shopping</button>
+        <button className="get-started-button" onClick={(e) => handleContinueShopping()}>Continue Shopping</button>
         <br />
-        <button className="get-started-button1">Checkout</button>
+        <button className="get-started-button1" onClick={(e)=>handleCheckoutShopping(e)}>Checkout</button>
       </div>
     </div>
   );
diff --git a/src/CartSlice.jsx b/src/CartSlice.jsx
index 32b8761ed..3d14270fd 100644
--- a/src/CartSlice.jsx
+++ b/src/CartSlice.jsx
@@ -4,16 +4,41 @@ export const CartSlice = createSlice({
   name: 'cart',
   initialState: {
     items: [], // Initialize items as an empty array
+    totalItems: 0
   },
   reducers: {
     addItem: (state, action) => {
+      const { name, image, cost } = action.payload;
+      const existingItem = state.items.find(item => item.name === name);
+      if(existingItem){
+       existingItem.quantity++;
+       state.totalItems = state.totalItems + 1;
+      }
+      else{
+        state.items.push({ name, image, cost, quantity: 1 });
+        state.totalItems = state.totalItems + 1;
+
+      }
     
     },
     removeItem: (state, action) => {
+      const { name } = action.payload;
+      const index = state.items.findIndex(item => item.name === name);
+      if(index > -1){
+        state.totalItems = state.totalItems - (state.items[index].quantity);
+        state.items.splice(index, 1);
+       
+      }
+
     },
     updateQuantity: (state, action) => {
-
-    
+      const { name, quantity } = action.payload;
+      const index = state.items.findIndex(item => item.name === name);
+      if (index > -1) {
+        const oldQuantity = state.items[index].quantity;
+        state.items[index].quantity = quantity;
+        state.totalItems = state.totalItems - oldQuantity + quantity; // Met à jour totalItems correctement
+      }
     },
   },
 });
diff --git a/src/ProductList.jsx b/src/ProductList.jsx
index 964b15d49..3824025a5 100644
--- a/src/ProductList.jsx
+++ b/src/ProductList.jsx
@@ -1,9 +1,14 @@
-import React, { useState,useEffect } from 'react';
-import './ProductList.css'
+import React, { useState, useEffect } from 'react';
+import './ProductList.css';
 import CartItem from './CartItem';
+import { useDispatch, useSelector } from 'react-redux';
+import { addItem } from './CartSlice';
+
 function ProductList() {
-    const [showCart, setShowCart] = useState(false); 
-    const [showPlants, setShowPlants] = useState(false); // State to control the visibility of the About Us page
+    const totalItems = useSelector((state) => state.cart.totalItems);
+    const [showCart, setShowCart] = useState(false);
+    const [addedToCard, setAddedToCard] = useState({});
+    const dispatch = useDispatch();
 
     const plantsArray = [
         {
@@ -212,69 +217,161 @@ function ProductList() {
             ]
         }
     ];
-   const styleObj={
-    backgroundColor: '#4CAF50',
-    color: '#fff!important',
-    padding: '15px',
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignIems: 'center',
-    fontSize: '20px',
-   }
-   const styleObjUl={
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    width: '1100px',
-   }
-   const styleA={
-    color: 'white',
-    fontSize: '30px',
-    textDecoration: 'none',
-   }
-   const handleCartClick = (e) => {
-    e.preventDefault();
-    setShowCart(true); // Set showCart to true when cart icon is clicked
-};
-const handlePlantsClick = (e) => {
-    e.preventDefault();
-    setShowPlants(true); // Set showAboutUs to true when "About Us" link is clicked
-    setShowCart(false); // Hide the cart when navigating to About Us
-};
+    const styleObj = {
+        backgroundColor: '#4CAF50',
+        color: '#fff!important',
+        padding: '15px',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        fontSize: '20px',
+    };
+    const styleObjUl = {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        width: '1100px',
+    };
+    const styleA = {
+        color: 'white',
+        fontSize: '30px',
+        textDecoration: 'none',
+    };
+    
+    const handleCartClick = (e) => {
+        e.preventDefault();
+        setShowCart(true);
+    };
+
+    const handlePlantsClick = (e) => {
+        e.preventDefault();
+        setShowCart(false);
+    };
+
+    const handleContinueShopping = () => {
+        setShowCart(false);
+    };
+
+    const handleAddToCart = (product) => {
+        dispatch(addItem(product));
+        setAddedToCard((prevState) => ({
+            ...prevState,
+            [product.name]: true,
+        }));
+    };
 
-   const handleContinueShopping = (e) => {
-    e.preventDefault();
-    setShowCart(false);
-  };
     return (
         <div>
-             <div className="navbar" style={styleObj}>
-            <div className="tag">
-               <div className="luxury">
-               <img src="https://cdn.pixabay.com/photo/2020/08/05/13/12/eco-5465432_1280.png" alt="" />
-               <a href="/" style={{textDecoration:'none'}}>
-                        <div>
-                    <h3 style={{color:'white'}}>Paradise Nursery</h3>
-                    <i style={{color:'white'}}>Where Green Meets Serenity</i>
+            <div className="navbar" style={styleObj}>
+            <div className="luxury">
+            <a href="/" style={{ display: 'flex', alignItems: 'center' }}>
+                <img 
+                src="https://cdn.pixabay.com/photo/2020/08/05/13/12/eco-5465432_1280.png" 
+                alt="Paradise Nursery Logo" 
+                style={{
+                    width: '50px',
+                    height: '50px',
+                    objectFit: 'contain',
+                    maxWidth: '50px',
+                    maxHeight: '50px'
+                }}
+                />
+                <div>
+                    <h3 style={{ color: 'white' }}>Paradise Nursery</h3>
+                    <i style={{ color: 'white' }}>Where Green Meets Serenity</i>
                     </div>
                     </a>
                 </div>
-              
-            </div>
-            <div style={styleObjUl}>
-                <div> <a href="#" onClick={(e)=>handlePlantsClick(e)} style={styleA}>Plants</a></div>
-                <div> <a href="#" onClick={(e) => handleCartClick(e)} style={styleA}><h1 className='cart'><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" id="IconChangeColor" height="68" width="68"><rect width="156" height="156" fill="none"></rect><circle cx="80" cy="216" r="12"></circle><circle cx="184" cy="216" r="12"></circle><path d="M42.3,72H221.7l-26.4,92.4A15.9,15.9,0,0,1,179.9,176H84.1a15.9,15.9,0,0,1-15.4-11.6L32.5,37.8A8,8,0,0,0,24.8,32H8" fill="none" stroke="#faf9f9" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" id="mainIconPathAttribute"></path></svg></h1></a></div>
-            </div>
-        </div>
-        {!showCart? (
-        <div className="product-grid">
-
+                <div style={styleObjUl}>
+                    <div>
+                        <a href="/product-list" onClick={handlePlantsClick} style={styleA}>Plants</a>
+                        </div>
+                <div style={{ position: 'relative',  }}>
+      <a href="#" onClick={(e) => handleCartClick(e)} style={styleA}>
+                            <h1 className="cart">
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    viewBox="0 0 256 256"
+                                    height="68"
+                                    width="68"
+                                >
+                                    <circle cx="80" cy="216" r="12"></circle>
+                                    <circle cx="184" cy="216" r="12"></circle>
+                                    <path
+                                        d="M42.3,72H221.7l-26.4,92.4A15.9,15.9,0,0,1,179.9,176H84.1a15.9,15.9,0,0,1-15.4-11.6L32.5,37.8A8,8,0,0,0,24.8,32H8"
+                                        fill="none"
+                                        stroke="#faf9f9"
+                                        strokeLinecap="round"
+                                        strokeLinejoin="round"
+                                        strokeWidth="2"
+                                    ></path>
+                                </svg>
+                                {totalItems > 0 && (
+                                    <span
+                                        style={{
+                                            position: 'absolute',
+                                            top: '25%',
+                                            right: '20%',
+                                            color: 'white',
+                                            padding: '2px 6px',
+                                            fontSize: '25px',
+                                            fontWeight: 'bold',
+                                        }}
+                                    >
+                                        {totalItems}
+                                    </span>
+                                )}
+                            </h1>
+                        </a>
+                    </div>
+                </div>
 
+            </div>
+            {!showCart ? (
+                <div className="product-grid">
+                    {plantsArray.map((category, index) => (
+                        <React.Fragment key={index}>
+                            <h1>{category.category}</h1>
+                            <div className="product-list">
+                                {category.plants.map((plant, idx) => (
+                                    <div className="product-card" key={idx}>
+                                        <h2 className="product-title">{plant.name}</h2>
+                                        <img
+                                            className="product-image"
+                                            src={plant.image}
+                                            alt={plant.name}
+                                        />
+                                        <p className="product-description">{plant.description}</p>
+                                        <p className="product-price">{plant.cost}</p>
+                                        <button
+                                            className={
+                                                addedToCard[plant.name]
+                                                    ? 'product-button btn-disabled'
+                                                    : 'product-button'
+                                            }
+                                            style={{
+                                                backgroundColor: addedToCard[plant.name]
+                                                    ? 'grey'
+                                                    : '#4CAF50',
+                                            }}
+                                            disabled={addedToCard[plant.name]}
+                                            onClick={() => handleAddToCart(plant)}
+                                        >
+                                            {addedToCard[plant.name]
+                                                ? 'Already in Cart'
+                                                : 'Add to Cart'}
+                                        </button>
+                                    </div>
+                                ))}
+                            </div>
+                        </React.Fragment>
+                    ))}
+                </div>
+            ) : (
+                <CartItem onContinueShopping={handleContinueShopping} />
+            )}
         </div>
- ) :  (
-    <CartItem onContinueShopping={handleContinueShopping}/>
-)}
-    </div>
+        
     );
 }
 

From 105f63fac28e71d4cc2f900a013d08b0b7894e12 Mon Sep 17 00:00:00 2001
From: ramineb <ramin.ebrahimi75@gmail.com>
Date: Wed, 27 Nov 2024 03:47:07 -0500
Subject: [PATCH 2/2] initial commit

---
 package-lock.json | 209 ++++++++++++++++++++++++++++++++++------------
 package.json      |   4 +-
 vite.config.js    |   2 +-
 3 files changed, 158 insertions(+), 57 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index af7843d84..753bb1c19 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
         "eslint-plugin-react": "^7.34.1",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-react-refresh": "^0.4.6",
-        "gh-pages": "^6.1.1",
+        "gh-pages": "^6.2.0",
         "vite": "^5.2.0"
       }
     },
@@ -1364,24 +1364,12 @@
       }
     },
     "node_modules/array-union": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
-      "integrity": "sha512-Dxr6QJj/RdU/hCaBjOfxW+q6lyuVE6JFWIrAUpuOOhoJJoQ99cUn3igRaHVB5P9WrgFVN0FfArM3x0cueOU8ng==",
-      "dev": true,
-      "dependencies": {
-        "array-uniq": "^1.0.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/array-uniq": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/array-uniq/-/array-uniq-1.0.3.tgz",
-      "integrity": "sha512-MNha4BWQ6JbwhFhj03YK552f7cb3AzoE8SzeljgChvL1dl3IcvggXVz1DilzySZkCja+CXuZbdW7yATchWn8/Q==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
+      "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
       "dev": true,
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=8"
       }
     },
     "node_modules/array.prototype.findlast": {
@@ -1524,6 +1512,18 @@
         "concat-map": "0.0.1"
       }
     },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dev": true,
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.23.0",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
@@ -1788,6 +1788,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/dir-glob": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
+      "integrity": "sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==",
+      "dev": true,
+      "dependencies": {
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -2336,6 +2348,34 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
+    "node_modules/fast-glob": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
+      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -2395,6 +2435,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dev": true,
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/find-cache-dir": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
@@ -2573,9 +2625,9 @@
       }
     },
     "node_modules/gh-pages": {
-      "version": "6.1.1",
-      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-6.1.1.tgz",
-      "integrity": "sha512-upnohfjBwN5hBP9w2dPE7HO5JJTHzSGMV1JrLrHvNuqmjoYHg6TBrCcnEoorjG/e0ejbuvnwyKMdTyM40PEByw==",
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-6.2.0.tgz",
+      "integrity": "sha512-HMXJ8th9u5wRXaZCnLcs/d3oVvCHiZkaP5KQExQljYGwJjQbSPyTdHe/Gc1IvYUR/rWiZLxNobIqfoMHKTKjHQ==",
       "dev": true,
       "dependencies": {
         "async": "^3.2.4",
@@ -2584,7 +2636,7 @@
         "filenamify": "^4.3.0",
         "find-cache-dir": "^3.3.1",
         "fs-extra": "^11.1.1",
-        "globby": "^6.1.0"
+        "globby": "^11.1.0"
       },
       "bin": {
         "gh-pages": "bin/gh-pages.js",
@@ -2651,19 +2703,23 @@
       }
     },
     "node_modules/globby": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
-      "integrity": "sha512-KVbFv2TQtbzCoxAnfD6JcHZTYCzyliEaaeM/gH8qQdkKr5s0OP9scEgvdcngyk7AVdY6YVW/TJHd+lQ/Df3Daw==",
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
       "dev": true,
       "dependencies": {
-        "array-union": "^1.0.1",
-        "glob": "^7.0.3",
-        "object-assign": "^4.0.1",
-        "pify": "^2.0.0",
-        "pinkie-promise": "^2.0.0"
+        "array-union": "^2.1.0",
+        "dir-glob": "^3.0.1",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
+        "slash": "^3.0.0"
       },
       "engines": {
-        "node": ">=0.10.0"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/gopd": {
@@ -3029,6 +3085,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/is-number-object": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
@@ -3370,6 +3435,28 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dev": true,
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -3639,40 +3726,31 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
       "dev": true
     },
-    "node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/pinkie": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
-      "integrity": "sha512-MnUuEycAemtSaeFSjXKW/aroV7akBbY+Sv+RkyqFjgAe73F+MR0TBWKBRDkmfWq/HiFmdavfZ1G7h4SPZXaCSg==",
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true,
       "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/pinkie-promise": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
-      "integrity": "sha512-0Gni6D4UcLTbv9c57DfxDGdr41XfgUjqWZu492f0cIGr16zDU06BWP/RAEvOuo7CQ0CNjHaLlM59YJJFm3NWlw==",
-      "dev": true,
-      "dependencies": {
-        "pinkie": "^2.0.0"
+        "node": ">=8.6"
       },
-      "engines": {
-        "node": ">=0.10.0"
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
     "node_modules/pkg-dir": {
@@ -4178,6 +4256,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/slash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz",
+      "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
@@ -4337,6 +4424,18 @@
         "node": ">=4"
       }
     },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
     "node_modules/trim-repeated": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
diff --git a/package.json b/package.json
index b7d4c1d1d..aa98c0230 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,8 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
+    "predeploy": "npm run build",
+    "deploy": "gh-pages -d dist",
     "build": "vite build",
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite build; vite preview --host"
@@ -23,7 +25,7 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.6",
-    "gh-pages": "^6.1.1",
+    "gh-pages": "^6.2.0",
     "vite": "^5.2.0"
   }
 }
diff --git a/vite.config.js b/vite.config.js
index 4d190ae43..beeaed5cd 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -3,6 +3,6 @@ import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  base: "/shoppingreact",
+  base: "/e-plantShopping",
   plugins: [react()],
 })