diff --git a/ecom-zustand/.gitignore b/ecom-zustand/.gitignore
new file mode 100644
index 00000000..a547bf36
--- /dev/null
+++ b/ecom-zustand/.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?
diff --git a/ecom-zustand/blobs/Screenshot from 2023-01-21 14-54-54.png b/ecom-zustand/blobs/Screenshot from 2023-01-21 14-54-54.png
new file mode 100644
index 00000000..a6d834a8
Binary files /dev/null and b/ecom-zustand/blobs/Screenshot from 2023-01-21 14-54-54.png differ
diff --git a/ecom-zustand/blobs/Screenshot from 2023-01-21 14-55-19.png b/ecom-zustand/blobs/Screenshot from 2023-01-21 14-55-19.png
new file mode 100644
index 00000000..5b10391e
Binary files /dev/null and b/ecom-zustand/blobs/Screenshot from 2023-01-21 14-55-19.png differ
diff --git a/ecom-zustand/blobs/Screenshot from 2023-01-21 14-55-31.png b/ecom-zustand/blobs/Screenshot from 2023-01-21 14-55-31.png
new file mode 100644
index 00000000..d2b20466
Binary files /dev/null and b/ecom-zustand/blobs/Screenshot from 2023-01-21 14-55-31.png differ
diff --git a/ecom-zustand/blobs/Screenshot from 2023-01-21 14-55-40.png b/ecom-zustand/blobs/Screenshot from 2023-01-21 14-55-40.png
new file mode 100644
index 00000000..ba948c9e
Binary files /dev/null and b/ecom-zustand/blobs/Screenshot from 2023-01-21 14-55-40.png differ
diff --git a/ecom-zustand/blobs/Screenshot from 2023-01-21 14-56-39.png b/ecom-zustand/blobs/Screenshot from 2023-01-21 14-56-39.png
new file mode 100644
index 00000000..a23a94f6
Binary files /dev/null and b/ecom-zustand/blobs/Screenshot from 2023-01-21 14-56-39.png differ
diff --git a/ecom-zustand/blobs/Screenshot from 2023-01-21 14-57-01.png b/ecom-zustand/blobs/Screenshot from 2023-01-21 14-57-01.png
new file mode 100644
index 00000000..d6f19a29
Binary files /dev/null and b/ecom-zustand/blobs/Screenshot from 2023-01-21 14-57-01.png differ
diff --git a/ecom-zustand/blobs/Screenshot from 2023-01-21 15-00-43.png b/ecom-zustand/blobs/Screenshot from 2023-01-21 15-00-43.png
new file mode 100644
index 00000000..4433e49e
Binary files /dev/null and b/ecom-zustand/blobs/Screenshot from 2023-01-21 15-00-43.png differ
diff --git a/ecom-zustand/index.html b/ecom-zustand/index.html
new file mode 100644
index 00000000..e003744f
--- /dev/null
+++ b/ecom-zustand/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+ Scommerce
+
+
+
+
+
+
diff --git a/ecom-zustand/package.json b/ecom-zustand/package.json
new file mode 100644
index 00000000..dcaaa169
--- /dev/null
+++ b/ecom-zustand/package.json
@@ -0,0 +1,34 @@
+{
+ "name": "ecom-zustand",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "@faker-js/faker": "^7.6.0",
+ "axios": "^1.2.2",
+ "localforage": "^1.10.0",
+ "lottie-web": "^5.10.1",
+ "match-sorter": "^6.3.1",
+ "react": "^18.2.0",
+ "react-dom": "^18.2.0",
+ "react-hot-toast": "^2.4.0",
+ "react-icons": "^4.7.1",
+ "react-router-dom": "^6.6.2",
+ "sort-by": "^1.2.0",
+ "zustand": "^4.3.2"
+ },
+ "devDependencies": {
+ "@types/react": "^18.0.26",
+ "@types/react-dom": "^18.0.9",
+ "@vitejs/plugin-react": "^3.0.0",
+ "autoprefixer": "^10.4.13",
+ "postcss": "^8.4.21",
+ "tailwindcss": "^3.2.4",
+ "vite": "^4.0.0"
+ }
+}
diff --git a/ecom-zustand/postcss.config.cjs b/ecom-zustand/postcss.config.cjs
new file mode 100644
index 00000000..33ad091d
--- /dev/null
+++ b/ecom-zustand/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}
diff --git a/ecom-zustand/public/vite.svg b/ecom-zustand/public/vite.svg
new file mode 100644
index 00000000..e7b8dfb1
--- /dev/null
+++ b/ecom-zustand/public/vite.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/ecom-zustand/readme.md b/ecom-zustand/readme.md
new file mode 100644
index 00000000..f308e1bb
--- /dev/null
+++ b/ecom-zustand/readme.md
@@ -0,0 +1,19 @@
+# Detail
+
+- 
+- 
+- 
+
+# About
+
+> This Project is purely made with ReactJs and tailwind css ,In this project we use zustand as state-management solution to handle cart addition and other stuffs
+
+# Demo Images
+
+- 
+- 
+- 
+- 
+- 
+- 
+- 
diff --git a/ecom-zustand/src/App.jsx b/ecom-zustand/src/App.jsx
new file mode 100644
index 00000000..683578fe
--- /dev/null
+++ b/ecom-zustand/src/App.jsx
@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from "react";
+import useDataStore from "./store/data_store";
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import HomeScreen from "./screens/HomeScreen";
+import LoadingScreen from "./screens/LoadingScreen";
+import Header from "./screens/component/HomeScreenComponent/Header";
+import ProductViewScreen from "./screens/ProductViewScreen";
+import CartScreen from "./screens/CartScreen";
+import data from "./fakeApiData/data";
+import ShowByCatergoryScreen from "./screens/ShowByCatergoryScreen";
+import { Toaster } from "react-hot-toast";
+const App = () => {
+ const setData = useDataStore((state) => state.setData);
+ const [isDataAvail, setisDataAvail] = useState("");
+ const data = useDataStore((s) => s.data);
+ useEffect(() => {
+ setData(data);
+ setisDataAvail(true);
+ }, []);
+
+ if (data == []) {
+ return (
+
+
+
+ Please Refresh page
+ Api Taking too much time for response
+
+
+
+
No item is present in cart
+
+ Cart
+
+
+ {/* Left-Start */}
+
+ {/* Cart-Start */}
+ {data.map((e) => (
+
+
+
+
+ Catergory:{" "}
+
+ {String(e.category).toUpperCase()}
+ {" "}
+
+
+ Title:{" "}
+
+ {String(e.title).slice(0, 50)}..
+ {" "}
+
+
+ Price:{" "}
+ ₹{e.price}{" "}
+
+
+
+
{
+ removeItemFromCart(e);
+ }}
+ />
+
+
+ ))}
+ {/* Cart-End */}
+
+ {/* Left-End */}
+ {/* Right-Start */}
+
+
+
+
Subtotal
+ ₹{totalPrice}
+
+
+
Estimated shipping
+ ₹0
+
+
+
Total
+ ₹{totalPrice}
+
+
+
+
Accepted payment method
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* Right-End */}
+
+
+
+ All you need in
the closet
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, rem
+ maxime! Odit quasi eos sint nemo, ex illum vel doloremque?
+
+
+
+
+
+
+
+ Categories
+
+ {/* Heading-ENd */}
+ {/* Product Section Start */}
+
+ {/* Category Data-start */}
+
+
{
+ nav("/category/jewelery");
+ }}
+ >
+ {/* Card Start */}
+
+
Jewelery
+
+ {/* Card End */}
+ {/* Card Start */}
+
+
{
+ nav("/category/electronics");
+ }}
+ >
+
+
Electronics
+
+ {/* Card End */}
+ {/* Card Start */}
+
+
{
+ nav("/category/mens_clothing");
+ }}
+ >
+
+
Men's Clothing
+
+ {/* Card End */}
+ {/* Card Start */}
+
+
{
+ nav("/category/womens_clothing");
+ }}
+ >
+
+
Women's clothing
+
+ {/* Card End */}
+ {/* Card Start */}
+
+
{
+ nav("/category/all");
+ }}
+ >
+
+
All products
+
+ {/* Card End */}
+
+ {/* Category Data-end */}
+
+ Product detail
+
+
+
+
+
+
+
+ Category:{" "}
+
+ {data.category}
+ {" "}
+
+
+ Product Name:{" "}
+ {data.title}{" "}
+
+
+ Description:{" "}
+
+ {String(data.description).slice(0, 150)}
+ {" "}
+
+
+ Rating:{" "}
+ {data.rating.rate}
+
+ ₹{data.price}
+
+
+ {isAddedToCart ? (
+ <>
+
+
+ ) : (
+ <>
+
+
+ )}
+
+
+ {String(category).toUpperCase()}
+
+
+ {electronics.map((e, i) => (
+
{
+ nav("/product", { state: { data: e } });
+ }}
+ >
+
+
+
+ {String(e.category).toUpperCase()}
+
+
{e.title}
+
+ Rating:{" "}
+
+ {e.rating.rate}
+
+
+
₹{e.price}
+
+ ))}
+
+ {String(category).toUpperCase()}
+
+
+ {jewelery.map((e, i) => (
+
{
+ nav("/product", { state: { data: e } });
+ }}
+ >
+
+
+
+ {String(e.category).toUpperCase()}
+
+
{e.title}
+
+ Rating:{" "}
+
+ {e.rating.rate}
+
+
+
₹{e.price}
+
+ ))}
+
+ {String(category).toUpperCase()}
+
+
+ {mens_clothing.map((e, i) => (
+
{
+ nav("/product", { state: { data: e } });
+ }}
+ >
+
+
+
+ {String(e.category).toUpperCase()}
+
+
{e.title}
+
+ Rating:{" "}
+
+ {e.rating.rate}
+
+
+
₹{e.price}
+
+ ))}
+
+ {String(category).toUpperCase()}
+
+
+ {jewelery.map((e, i) => (
+
{
+ nav("/product", { state: { data: e } });
+ }}
+ >
+
+
+
+ {String(e.category).toUpperCase()}
+
+
{e.title}
+
+ Rating:{" "}
+
+ {e.rating.rate}
+
+
+
₹{e.price}
+
+ ))}
+
+ {String(category).toUpperCase()}
+
+
+ {womens_clothing.map((e, i) => (
+
{
+ nav("/product", { state: { data: e } });
+ }}
+ >
+
+
+
+ {String(e.category).toUpperCase()}
+
+
{e.title}
+
+ Rating:{" "}
+
+ {e.rating.rate}
+
+
+
₹{e.price}
+
+ ))}
+
+ {String(category).toUpperCase()}
+
+
+ {data.map((e, i) => (
+
{
+ nav("/product", { state: { data: e } });
+ }}
+ >
+
+
+
+ {String(e.category).toUpperCase()}
+
+
{e.title}
+
+ Rating:{" "}
+
+ {e.rating.rate}
+
+
+
₹{e.price}
+
+ ))}
+
+
Invalid category
+
+ );
+};
+
+export default ShowByCatergoryScreen;
diff --git a/ecom-zustand/src/screens/component/HomeScreenComponent/Header.jsx b/ecom-zustand/src/screens/component/HomeScreenComponent/Header.jsx
new file mode 100644
index 00000000..a7803993
--- /dev/null
+++ b/ecom-zustand/src/screens/component/HomeScreenComponent/Header.jsx
@@ -0,0 +1,74 @@
+import React, { useState } from "react";
+import { AiOutlineShoppingCart, AiOutlineMenu } from "react-icons/ai";
+import { RxCross1 } from "react-icons/rx";
+import { useNavigate } from "react-router-dom";
+import useCartStore from "../../../store/cart_store";
+const Header = () => {
+ const [isMenuOpen, setisMenuOpen] = useState(false);
+ const [TranslateValue, setTranslateValue] = useState("translate-y-[-150px]");
+ const nav = useNavigate();
+ const cartItems = useCartStore((s) => s.cart);
+ return (
+
+
{
+ nav("/");
+ }}
+ >
+ store Logo
+
+ {isMenuOpen ? (
+
{
+ setisMenuOpen(!isMenuOpen);
+ setTranslateValue("translate-y-[-150px]");
+ }}
+ className="flex sm:hidden"
+ />
+ ) : (
+ {
+ setisMenuOpen(!isMenuOpen);
+ setTranslateValue("translate-y-0");
+ }}
+ className="flex sm:hidden"
+ />
+ )}
+
+
{
+ setTranslateValue("translate-y-[-150px]");
+ setisMenuOpen(!isMenuOpen);
+ nav("/cart");
+ }}
+ >
+ Cart
+
+
+
+ demo.user@scommerce.com
+
+
+ {cartItems.length}
+
+
nav("/cart")} />
+