api

package-lock.json

         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^1.7.9",
         "dotenv": "^16.4.7",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.7.9",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
+      "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
+      "license": "MIT",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
+      "license": "MIT"
+    },
     "node_modules/psl": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",

package.json

     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.7.9",
     "dotenv": "^16.4.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/components/BillingForm/BillingForm.jsx

 import CreditCardIcon from '@mui/icons-material/CreditCard';
 import AccountBalanceWalletIcon from '@mui/icons-material/AccountBalanceWallet';
 
-
 const BillingForm = () => {
 
   const rows = [

src/components/Navbar/Navbar.jsx

 import React, { useState, useEffect } from "react";
 import AppBar from "@mui/material/AppBar";
 import Toolbar from "@mui/material/Toolbar";
-import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
 import IconButton from "@mui/material/IconButton";
 import Box from "@mui/material/Box";
 import Header from "../Header";
-import InputBase from "@mui/material/InputBase";
 import SearchIcon from "@mui/icons-material/Search";
 import LocalMallIcon from '@mui/icons-material/LocalMall';
 import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 
   const [open, setOpen] = React.useState(false);
 
-  const toggleDrawer = (newOpen) => () => {
-    setOpen(newOpen);
-  };
-
   const navItem = [
     {
       title: "DISCOVER",

src/components/Navbar/components/MobileNav/MobileNav.jsx

 import React from "react";
-import { Drawer, Box, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Divider } from "@mui/material";
+import { Drawer, Box, List, ListItem, ListItemButton, ListItemText } from "@mui/material";
 import logoSrc from "../../../../assets/svg/logo.svg";
 
 const MobileNav = ({ open, onClose, menu = [] }) => {
           {menu.map(({title, link, icon}) => (
             <ListItem key={title} disablePadding>
               <ListItemButton
+                onClick={()=>{window.location.href = link }}
                 sx={{
                   color: "white",
                   "&:hover": {

src/pages/Home.jsx

 import ProductType from '../components/ProductType';
 import NewsLetter from '../components/NewsLetter';
 
+import ProductService from "../services/ProductService"
+
 const Home = () => {
 
+  React.useEffect(()=>{
+    ProductService.getProducts();
+  },[])
+
   return (
     <>
       <Carousel />

src/services/ProductService.js

+import axios from 'axios'
+import { createStorefrontApiClient } from '@shopify/storefront-api-client';
+import { API_URL, REACT_APP_API_KEY, REACT_APP_API_SECRET, REACT_APP_ACCESS_TOKEN, REACT_APP_SHOP_NAME } from '../utils/httpCommon'
+
+const shopUrl = REACT_APP_SHOP_NAME;
+const accessToken = REACT_APP_ACCESS_TOKEN;
+
+
+const getProducts = async () => {
+
+  console.log(shopUrl)
+  console.log(accessToken)
+  console.log(createStorefrontApiClient)
+
+  const client = createStorefrontApiClient({
+    storeDomain: `https://${shopUrl}/api/2024-10/graphql.json`,
+    apiVersion: '2024-10',
+    publicAccessToken: accessToken,
+  });
+
+  const productQuery = `
+    {
+      products(first: 99) {
+        nodes {
+          id
+          title
+          totalInventory
+        }
+      }
+    }
+  `;
+
+  const { data, errors, extensions } = await client.request(productQuery, {
+    variables: {
+      handle: 'sample-product',
+    },
+  });
+
+  console.log(data)
+
+  return
+
+}
+
+const ProductService = {
+  getProducts
+}
+
+export default ProductService

src/utils/httpCommon.js

+export const API_URL = process.env.REACT_APP_API_URL
+export const REACT_APP_API_KEY = process.env.REACT_APP_API_KEY
+export const REACT_APP_API_SECRET = process.env.REACT_APP_API_SECRET
+export const REACT_APP_ACCESS_TOKEN = process.env.REACT_APP_ACCESS_TOKEN
+export const REACT_APP_SHOP_NAME = process.env.REACT_APP_SHOP_NAME
+