codemistic · mfaizk · Feb 19, 2023
diff --git a/ecom-zustand/.gitignore 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
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
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
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
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
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
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
diff --git a/ecom-zustand/index.html b/ecom-zustand/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Scommerce</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/ecom-zustand/package.json 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
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/ecom-zustand/public/vite.svg b/ecom-zustand/public/vite.svg
diff --git a/ecom-zustand/readme.md b/ecom-zustand/readme.md
@@ -0,0 +1,19 @@
+# Detail
+
+- ![](https://img.shields.io/badge/Name-scommerce-%23B4161B)
+- ![](https://img.shields.io/badge/Tech-ReactJS-%23383CC1)
+- ![](https://img.shields.io/badge/Bundler-Vite-%233DBE29)
+
+# 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
+
+- ![](https://github.com/mfaizk/scommmerce/blob/master/blobs/Screenshot%20from%202023-01-21%2014-54-54.png)
+- ![](https://github.com/mfaizk/scommmerce/blob/master/blobs/Screenshot%20from%202023-01-21%2014-55-19.png)
+- ![](https://github.com/mfaizk/scommmerce/blob/master/blobs/Screenshot%20from%202023-01-21%2014-55-31.png)
+- ![](https://github.com/mfaizk/scommmerce/blob/master/blobs/Screenshot%20from%202023-01-21%2014-55-40.png)
+- ![](https://github.com/mfaizk/scommmerce/blob/master/blobs/Screenshot%20from%202023-01-21%2014-56-39.png)
+- ![](https://github.com/mfaizk/scommmerce/blob/master/blobs/Screenshot%20from%202023-01-21%2014-57-01.png)
+- ![](https://github.com/mfaizk/scommmerce/blob/master/blobs/Screenshot%20from%202023-01-21%2015-00-43.png)
diff --git a/ecom-zustand/src/App.jsx 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 (
+      <div className="container mx-auto h-[500px] w-[500px] flex items-center justify-center flex-col p-20">
+        <div id="ani" className="h-[500px]"></div>
+        <h1 className="text-2xl text-[#242B2E] text-center">
+          Please Refresh page <br />
+          Api Taking too much time for response
+        </h1>
+      </div>
+    );
+  }
+
+  return isDataAvail == "" ? (
+    <LoadingScreen />
+  ) : (
+    <BrowserRouter>
+      <Toaster />
+      <Header />
+      <Routes>
+        <Route element={<HomeScreen />} path="/" />
+        <Route element={<ProductViewScreen />} path="/product" />
+        <Route element={<CartScreen />} path="/cart" />
+        <Route element={<ShowByCatergoryScreen />} path="/category/:category" />
+      </Routes>
+    </BrowserRouter>
+  );
+};
+
+export default App;
diff --git a/ecom-zustand/src/assets/buy.svg b/ecom-zustand/src/assets/buy.svg