2025-01-14 11:33:12 +00:00
22 changed files with 6564 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/eslint.config.js
+++ b/eslint.config.js
@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]
--- a/index.html
+++ b/index.html
@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="./src/assets/favicon.ico" />
+    <link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Assignment-5</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,31 @@
+{
+  "name": "my-project",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
+    "vite": "^6.0.5"
+  }
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/src/App.css
+++ b/src/App.css
--- a/src/App.jsx
+++ b/src/App.jsx
@ -0,0 +1,88 @@
+import Navbar from "./components/Navbar";
+import ProductCard from "./components/ProductCards";
+import Dropdown from "./components/dropdown/index";
+import { filterOperations } from "./components/filterOperations";
+
+const App = () => {
+  const { filteredProducts, loading, error, filters, handleFilterChange } =
+    filterOperations();
+
+  if (loading) {
+    return <div>Loading...</div>;
+  }
+
+  if (error) {
+    return <div>Error: {error?.message}</div>;
+  }
+
+  const categoryOptions = [
+    { value: "all", label: "All Categories" },
+    { value: "men's clothing", label: "Men's Clothing" },
+    { value: "women's clothing", label: "Women's Clothing" },
+    { value: "jewelery", label: "Jewelery" },
+    { value: "electronics", label: "Electronics" },
+  ];
+
+  const priceOptions = [
+    { value: "all", label: "All Prices" },
+    { value: "low", label: "Below $50" },
+    { value: "mid", label: "$50 - $100" },
+    { value: "high", label: "Above $100" },
+  ];
+
+  const ratingOptions = [
+    { value: "all", label: "All Ratings" },
+    { value: "4", label: "4 & Up" },
+    { value: "3", label: "3 & Up" },
+    { value: "2", label: "2 & Up" },
+  ];
+
+  return (
+    <div className="bg-gradient-to-r from-blue-500 via-blue-300 to-blue-100 min-h-screen flex flex-col items-center text-white">
+      <header className="w-full py-4 fixed top-0 bg-black bg-opacity-80 z-10">
+        <Navbar />
+      </header>
+      <div className="w-full max-w-screen-lg mt-20 p-4">
+        <div className="flex flex-wrap justify-between items-center mb-6 p-4">
+          <Dropdown
+            name="category"
+            value={filters?.category}
+            onChange={handleFilterChange}
+            options={categoryOptions}
+            className="bg-slate-800 text-white rounded p-2 cursor-pointer"
+          />
+
+          <Dropdown
+            name="price"
+            value={filters?.price}
+            onChange={handleFilterChange}
+            options={priceOptions}
+            className="bg-slate-800 text-white rounded p-2 ml-2 cursor-pointer"
+          />
+
+          <Dropdown
+            name="rating"
+            value={filters?.rating}
+            onChange={handleFilterChange}
+            options={ratingOptions}
+            className="bg-slate-800 text-white rounded p-2 cursor-pointer"
+          />
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 ">
+          {filteredProducts && filteredProducts?.length > 0 ? (
+            filteredProducts?.map((product) => (
+              <ProductCard key={product?.id} product={product} />
+            ))
+          ) : (
+            <p className="flex justify-center items-baseline w-max">
+              No products available as per the requirement
+            </p>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default App;
--- a/src/assets/SvgIcons/svgIcons.jsx
+++ b/src/assets/SvgIcons/svgIcons.jsx
@ -0,0 +1,81 @@
+/* eslint-disable react/no-unknown-property */
+const crossIcon = (
+  <svg
+    width="20px"
+    height="18px"
+    viewBox="0 0 128 128"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    ariaHidden="true"
+    role="img"
+    className="iconify iconify--noto"
+    preserveAspectRatio="xMidYMid meet"
+  >
+    <path
+      d="M58.9 78.6l-41.3 41.9c-1.5 1.5-3.2 2.5-5 3c4.1 1.2 8.6.2 11.8-3l38.2-38.1c.8-.8 2.1-.8 2.8 0l-3.7-3.8c-.7-.8-2-.8-2.8 0z"
+      fill="#c33"
+    ></path>
+
+    <path
+      d="M82.3 65.4c-.8-.8-.8-2 0-2.8l38.2-38.1c4.7-4.7 4.7-12.3 0-17s-12.2-4.7-16.9 0L65.4 45.6c-.8.8-2 .8-2.8 0L24.5 7.5c-4.7-4.7-12.3-4.7-17 0c-.4.4-.7.8-1 1.2c.2-.3.4-.5.6-.7c4.7-4.6 10.1-2.5 14.8 2.2l37.6 38.5c.8.8 2 .8 2.8 0l39.3-39.2c4.7-4.7 9.4-5.1 14.1-.4s3.9 9.6-.8 14.3L75.6 62.6c-.8.8-.8 2 0 2.8c0 0 38.1 38.2 38 38.2c4.7 4.7 6.5 10 1.8 14.7s-10.6 3.5-15.3-1.1l3.4 3.4c4.7 4.7 12.3 4.7 17 0s4.7-12.2 0-16.9c0-.1-38.2-38.3-38.2-38.3z"
+      fill="#c33"
+    ></path>
+
+    <path
+      d="M115.4 118.3c4.7-4.7 2.9-10-1.8-14.7c.1 0-38-38.2-38-38.2c-.8-.8-.8-2 0-2.8l39.3-39.2c4.7-4.7 5.5-9.6.8-14.3s-9.4-4.3-14.1.4L62.3 48.7c-.8.8-2 .8-2.8 0L21.9 10.2C17.2 5.5 11.8 3.4 7.1 8c-.2.2-.4.4-.6.7c-3.7 4.7-3.3 11.4 1 15.7l38.1 38.2c.8.8.8 2.1 0 2.8L7.5 103.5c-4.7 4.7-4.7 12.3 0 17c1.5 1.5 3.2 2.5 5 3c1.8-.6 3.6-1.6 5-3l41.3-41.9c.8-.8 2.1-.8 2.8 0l3.7 3.8l34.7 34.8c4.8 4.6 10.7 5.8 15.4 1.1z"
+      fill="#f44336"
+    ></path>
+
+    <g fill="#ffffff">
+      <path
+        d="M55 56.4c-1.1-1.6-32.3-33.1-32.3-33.1s-2.3-2.6-4.7-.8c-2.2 1.7-1.1 4.3.1 5.6s29 29.7 30.4 30.9c1.3 1.2 3.9 1.4 5.5.6s1.8-2.1 1-3.2z"
+        opacity=".2"
+      ></path>
+
+      <circle cx="12.2" cy="19" r="3.3" opacity=".2"></circle>
+    </g>
+
+    <path
+      d="M72.1 81.8c1.1 1.6 32.8 32.6 32.8 32.6s2.3 2.6 4.7.7c2.2-1.7 1-4.3-.2-5.6c-1.2-1.3-29.4-29.3-30.8-30.5c-1.3-1.2-3.9-1.3-5.5-.5s-1.8 2.2-1 3.3z"
+      opacity=".2"
+      fill="#ffffff"
+    ></path>
+  </svg>
+);
+
+const crossSecond = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 48 48"
+    width="20px"
+    height="20px"
+  >
+    <path
+      fill="#F44336"
+      d="M21.5 4.5H26.501V43.5H21.5z"
+      transform="rotate(45.001 24 24)"
+    />
+    <path
+      fill="#F44336"
+      d="M21.5 4.5H26.5V43.501H21.5z"
+      transform="rotate(135.008 24 24)"
+    />
+  </svg>
+);
+
+const starIcon = (
+  <svg
+    width="15px"
+    height="15px"
+    viewBox="0 -0.5 32 32"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M16.0005 0L21.4392 9.27275L32.0005 11.5439L24.8005 19.5459L25.889 30.2222L16.0005 25.895L6.11194 30.2222L7.20049 19.5459L0.000488281 11.5439L10.5618 9.27275L16.0005 0Z"
+      fill="#FFCB45"
+    />
+  </svg>
+);
+
+export { crossIcon, crossSecond, starIcon };
--- a/src/assets/favicon.ico
+++ b/src/assets/favicon.ico
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/components/Navbar/index.jsx
+++ b/src/components/Navbar/index.jsx
@ -0,0 +1,59 @@
+import { useContext, useState } from "react";
+import { CartContext } from "../cartContext";
+import Cart from "../cartProducts";
+import logo from "../../assets/logo.png";
+
+const Navbar = () => {
+  const reloadPage = () => {
+    window.location.reload(false);
+  };
+  const { cartItems } = useContext(CartContext);
+  const [showModal, setShowModal] = useState(false);
+
+  const toggle = () => {
+    setShowModal(!showModal);
+  };
+
+  return (
+    <div>
+      <nav className="flex justify-between items-center max-w-6xl mx-auto">
+        <div className="relative flex items-center h-12 w-48 left-8">
+        <img src={logo} alt="hello" />
+        </div>
+        <ul className="flex space-x-6 text-lg">
+          <li
+            className="hover:text-gray-300 transition duration-300 cursor-pointer"
+            onClick={reloadPage}
+          >
+            Home
+          </li>
+          <li
+            className="hover:text-gray-300 transition duration-300 cursor-pointer"
+            onClick={reloadPage}
+          >
+            Products
+          </li>
+          <li
+            className="hover:text-gray-300 transition duration-300 cursor-pointer"
+            onClick={reloadPage}
+          >
+            Checkout
+          </li>
+          <li>
+            {!showModal && (
+              <button
+                className="px-4 py-2 bg-white text-black text-xs font-bold uppercase rounded hover:bg-slate-300 focus:outline-none focus:bg-slate-300"
+                onClick={toggle}
+              >
+                Cart ({cartItems?.length})
+              </button>
+            )}
+          </li>
+        </ul>
+      </nav>
+      <Cart showModal={showModal} toggle={toggle} />
+    </div>
+  );
+};
+
+export default Navbar;
--- a/src/components/ProductCards/index.jsx
+++ b/src/components/ProductCards/index.jsx
@ -0,0 +1,53 @@
+/* eslint-disable react/prop-types */
+import { useContext } from "react";
+import { CartContext } from "../cartContext";
+import { starIcon } from "../../assets/SvgIcons/svgIcons";
+
+const ProductCard = ({ product }) => {
+  const { addToCart } = useContext(CartContext);
+
+  const textColorClass =
+    product?.rating?.count > 300 ? "text-green-500" : "text-red-500";
+
+  return (
+    <div className="max-w-xs rounded-lg border border-gray-200 bg-white shadow-md transform transition duration-700 hover:scale-105">
+      <img
+        src={product?.image}
+        alt={product?.title}
+        className="w-full h-48 object-fill rounded-t-lg mt-4 p-4"
+      />
+      <div className="p-4">
+        <h5 className="text-sm font-semibold text-gray-800 line-clamp-1">
+          {product?.title}
+        </h5>
+        <p className="text-gray-600 text-justify line-clamp-3 text-xs">
+          {product?.description}
+        </p>
+        <p className="mt-2 text-sm font-bold text-gray-900">
+          ${product?.price}
+        </p>
+        <p className="mt-2 text-sm text-gray-900">
+          Category: {product?.category}
+        </p>
+        <p className="mt-2 text-sm text-gray-900">
+          <span className="flex gap-1">
+            Ratings: <b>{product?.rating?.rate}</b>
+            <p className="mt-0.5">{starIcon}</p>
+          </span>{" "}
+        </p>
+        <p className="mt-2 text-sm text-gray-900">
+          Only <b className={`${textColorClass}`}>{product?.rating?.count}</b>{" "}
+          pieces left
+        </p>
+        <button
+          onClick={() => addToCart(product)}
+          className="flex px-4 py-2 items-center bg-gray-800 text-white text-xs font-bold uppercase rounded hover:bg-gray-700 focus:outline-none focus:bg-gray-700 mt-4"
+        >
+          Add to cart
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ProductCard;
--- a/src/components/api/api.jsx
+++ b/src/components/api/api.jsx
@ -0,0 +1,12 @@
+export const fetchProducts = async () => {
+  try {
+    const response = await fetch("https://fakestoreapi.com/products");
+    if (!response?.ok) {
+      throw new Error(`${response?.status} error occurred`);
+    }
+    return await response?.json();
+  } catch (error) {
+    console.log("An error occured:", error?.message || error);
+    throw error;
+  }
+};
--- a/src/components/cartContext/index.jsx
+++ b/src/components/cartContext/index.jsx
@ -0,0 +1,91 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react-refresh/only-export-components */
+import { createContext, useState, useEffect } from "react";
+
+export const CartContext = createContext();
+
+export const CartProvider = ({ children }) => {
+  const [cartItems, setCartItems] = useState(
+    localStorage?.getItem("cartItems")
+      ? JSON?.parse(localStorage?.getItem("cartItems"))
+      : []
+  );
+
+  const addToCart = (item) => {
+    const isItemInCart = cartItems?.find(
+      (cartItem) => cartItem?.id === item?.id
+    );
+
+    if (isItemInCart) {
+      setCartItems(
+        cartItems?.map((cartItem) =>
+          cartItem?.id === item?.id
+            ? { ...cartItem, quantity: cartItem?.quantity + 1 }
+            : cartItem
+        )
+      );
+    } else {
+      setCartItems([...cartItems, { ...item, quantity: 1 }]);
+    }
+  };
+
+  const removeFromCart = (item) => {
+    const isItemInCart = cartItems?.find(
+      (cartItem) => cartItem?.id === item?.id
+    );
+
+    if (isItemInCart?.quantity === 1) {
+      setCartItems(cartItems?.filter((cartItem) => cartItem?.id !== item?.id));
+    } else {
+      setCartItems(
+        cartItems?.map((cartItem) =>
+          cartItem?.id === item?.id
+            ? { ...cartItem, quantity: cartItem?.quantity - 1 }
+            : cartItem
+        )
+      );
+    }
+  };
+
+  const removeItem = (item) => {
+    setCartItems(cartItems?.filter((cartItem) => cartItem?.id !== item?.id));
+  };
+
+  const clearCart = () => {
+    setCartItems([]);
+  };
+
+  const getCartTotal = () => {
+    const total = cartItems?.reduce(
+      (sum, item) => sum + item?.price * item?.quantity,
+      0
+    );
+    return total?.toFixed(2);
+  };
+
+  useEffect(() => {
+    localStorage?.setItem("cartItems", JSON?.stringify(cartItems));
+  }, [cartItems]);
+
+  useEffect(() => {
+    const cartItems = localStorage?.getItem("cartItems");
+    if (cartItems) {
+      setCartItems(JSON?.parse(cartItems));
+    }
+  }, []);
+
+  return (
+    <CartContext.Provider
+      value={{
+        cartItems,
+        addToCart,
+        removeFromCart,
+        removeItem,
+        clearCart,
+        getCartTotal,
+      }}
+    >
+      {children}
+    </CartContext.Provider>
+  );
+};
--- a/src/components/cartProducts/index.jsx
+++ b/src/components/cartProducts/index.jsx
@ -0,0 +1,128 @@
+/* eslint-disable react/prop-types */
+import { useContext, useState } from "react";
+import { CartContext } from "../cartContext";
+import { crossIcon, crossSecond } from "../../assets/SvgIcons/svgIcons";
+
+export default function Cart({ showModal, toggle }) {
+  const {
+    cartItems,
+    addToCart,
+    removeFromCart,
+    removeItem,
+    clearCart,
+    getCartTotal,
+  } = useContext(CartContext);
+
+  const [checkout, setCheckout] = useState("");
+
+  const handleCheckOut = () => {
+    setCheckout("Your Order has been checked out");
+    setTimeout(() => {
+      setCheckout("");
+    }, 3000);
+  };
+
+  return (
+    showModal && (
+      <div className="fixed inset-0 left-1/4 bg-white dark:bg-slate-800 gap-8 p-10 text-black dark:text-white font-normal text-sm overflow-x-auto overflow-y-scroll no-scrollbar">
+        <div className="flex flex-col gap-y-2 items-start">
+          <h1 className="text-lg font-bold">Total: ${getCartTotal()}</h1>
+          <button
+            className="px-4 py-2 bg-gray-500 text-white text-xs font-bold rounded hover:bg-gray-600 focus:outline-none"
+            onClick={handleCheckOut}
+          >
+            Checkout
+          </button>
+          <div className="flex items-center justify-center w-full">
+            {cartItems?.length > 0 ? (
+              <div className="flex flex-col justify-between items-center">
+              </div>
+            ) : (
+              <h1 className="text-lg font-bold">Your cart is empty</h1>
+            )}
+          </div>
+          <h1 className="flex text-4xl font-bold items-center justify-center w-full h-full">
+            Cart Details
+          </h1>
+
+          <div className="flex flex-col absolute right-5 top-0 gap-y-20">
+            <div className="ml-5">
+              <button className="px-4 py-2 text-xl mt-4" onClick={toggle}>
+                {crossIcon}
+              </button>
+            </div>
+            <div className="mr-6">
+              <button
+                className="-mt-10 px-4 py-2 bg-gray-500 text-white text-xs font-bold rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-700 "
+                onClick={() => {
+                  clearCart();
+                }}
+              >
+                Clear cart
+              </button>
+            </div>
+          </div>
+          <div className="flex items-center justify-center w-full">
+            {cartItems?.length > 0 ? (
+              <div className="flex flex-col justify-between items-center">
+                {checkout && (
+                  <p className="mt-4 text-green-500 font-bold">{checkout}</p>
+                )}
+              </div>
+            ) : (
+              <h1 className="text-lg font-bold">Your cart is empty</h1>
+            )}
+          </div>
+          <div className="flex flex-col items-start gap-4 w-full mt-8">
+            {cartItems?.map((item) => (
+              <div
+                className="flex justify-between items-start rounded-lg border border-white p-4 min-w-full"
+                key={item?.id}
+              >
+                <div className="flex gap-4">
+                  <img
+                    src={item?.image}
+                    alt={item?.title}
+                    className="rounded-md h-24 w-24"
+                  />
+                  <div className="flex flex-col w-96">
+                    <h1 className="text-lg font-bold w-full">{item?.title}</h1>
+                    <p className="text-slate-300">${item?.price}</p>
+                  </div>
+                </div>
+                <div className="flex gap-4 items-center ml-8">
+                  <button
+                    className="px-3 py-1 bg-gray-500 text-white text-l font-bold rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-700"
+                    onClick={() => {
+                      removeFromCart(item);
+                    }}
+                  >
+                    -
+                  </button>
+                  <p>{item?.quantity}</p>
+                  <button
+                    className="px-3 py-1 bg-gray-500 text-white text-l font-bold rounded hover:bg-gray-600 focus:outline-none focus:bg-gray-700"
+                    onClick={() => {
+                      addToCart(item);
+                    }}
+                  >
+                    +
+                  </button>
+
+                  <button
+                    className="px-3 py-1 text-red-600"
+                    onClick={() => {
+                      removeItem(item);
+                    }}
+                  >
+                    {crossSecond}
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    )
+  );
+}
--- a/src/components/dropdown/index.jsx
+++ b/src/components/dropdown/index.jsx
@ -0,0 +1,14 @@
+/* eslint-disable react/prop-types */
+const Dropdown = ({ name, value, onChange, options, className }) => {
+  return (
+    <select name={name} value={value} onChange={onChange} className={className}>
+      {options?.map((option) => (
+        <option key={option?.value} value={option?.value}>
+          {option?.label}
+        </option>
+      ))}
+    </select>
+  );
+};
+
+export default Dropdown;
--- a/src/components/filterOperations/index.jsx
+++ b/src/components/filterOperations/index.jsx
@ -0,0 +1,72 @@
+/* eslint-disable no-unsafe-optional-chaining */
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useState, useEffect } from "react";
+import { fetchProducts } from "../api/api";
+
+export const filterOperations = () => {
+  const [products, setProducts] = useState([]);
+  const [filteredProducts, setFilteredProducts] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [filters, setFilters] = useState({
+    category: "all",
+    price: "all",
+    rating: "all",
+  });
+
+  useEffect(() => {
+    const getProducts = async () => {
+      try {
+        const data = await fetchProducts();
+        setProducts(data);
+        setFilteredProducts(data);
+      } catch (err) {
+        setError(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    getProducts();
+  }, []);
+
+  useEffect(() => {
+    const filterByCategory = (product) =>
+      filters?.category === "all" || product?.category === filters?.category;
+
+    const filterByPrice = (product) => {
+      if (filters?.price === "all") return true;
+      if (filters?.price === "low") return product?.price < 50;
+      if (filters?.price === "mid")
+        return product?.price >= 50 && product?.price <= 100;
+      if (filters?.price === "high") return product?.price > 100;
+    };
+
+    const filterByRating = (product) =>
+      filters?.rating === "all" ||
+      product?.rating?.rate >= parseFloat(filters?.rating);
+
+    const filtered = products?.filter(
+      (product) =>
+        filterByCategory(product) &&
+        filterByPrice(product) &&
+        filterByRating(product)
+    );
+
+    setFilteredProducts(filtered);
+  }, [filters, products]);
+
+  const handleFilterChange = (e) => {
+    const { name, value } = e?.target;
+    setFilters((prev) => ({ ...prev, [name]: value }));
+  };
+
+  return {
+    products,
+    filteredProducts,
+    loading,
+    error,
+    filters,
+    handleFilterChange,
+  };
+};
--- a/src/index.css
+++ b/src/index.css
@ -0,0 +1,14 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer utilities {
+    .no-scrollbar::-webkit-scrollbar {
+        display: none;
+    }
+
+    .no-scrollbar {
+        -ms-overflow-style: none;
+        scrollbar-width: none;
+    }
+}
--- a/src/main.jsx
+++ b/src/main.jsx
@ -0,0 +1,13 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.jsx";
+import { CartProvider } from "./components/cartContext/index.jsx";
+
+createRoot(document.getElementById("root")).render(
+  <StrictMode>
+    <CartProvider>
+      <App />
+    </CartProvider>
+  </StrictMode>
+);
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,16 @@
+/* eslint-disable no-undef */
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      fontFamily: {
+        'poppins': ['Poppins'],
+      }
+    },
+  },
+  plugins: [],
+}
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})