diff --git a/client/package-lock.json b/client/package-lock.json
index b85b50a6..c4be3052 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -18,6 +18,57 @@
         "@jridgewell/trace-mapping": "^0.3.9"
       }
     },
+    "@ant-design/colors": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-7.0.0.tgz",
+      "integrity": "sha512-iVm/9PfGCbC0dSMBrz7oiEXZaaGH7ceU40OJEfKmyuzR9R5CRimJYPlRiFtMQGQcbNMea/ePcoIebi4ASGYXtg==",
+      "requires": {
+        "@ctrl/tinycolor": "^3.4.0"
+      }
+    },
+    "@ant-design/cssinjs": {
+      "version": "1.5.6",
+      "resolved": "https://registry.npmjs.org/@ant-design/cssinjs/-/cssinjs-1.5.6.tgz",
+      "integrity": "sha512-1S7LUPC9BMyQ/CUYgzfePJJwEfsbVHJe3Tpd9zhujTxRM/6LYpN9N4FTaPHVqpnPazm0S2vG0WBkh2T5Erwuug==",
+      "requires": {
+        "@babel/runtime": "^7.11.1",
+        "@emotion/hash": "^0.8.0",
+        "@emotion/unitless": "^0.7.5",
+        "classnames": "^2.3.1",
+        "csstype": "^3.0.10",
+        "rc-util": "^5.27.0",
+        "stylis": "^4.0.13"
+      }
+    },
+    "@ant-design/icons": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-5.0.1.tgz",
+      "integrity": "sha512-ZyF4ksXCcdtwA/1PLlnFLcF/q8/MhwxXhKHh4oCHDA4Ip+ZzAHoICtyp4wZWfiCVDP0yuz3HsjyvuldHFb3wjA==",
+      "requires": {
+        "@ant-design/colors": "^7.0.0",
+        "@ant-design/icons-svg": "^4.2.1",
+        "@babel/runtime": "^7.11.2",
+        "classnames": "^2.2.6",
+        "rc-util": "^5.9.4"
+      }
+    },
+    "@ant-design/icons-svg": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.2.1.tgz",
+      "integrity": "sha512-EB0iwlKDGpG93hW8f85CTJTs4SvMX7tt5ceupvhALp1IF44SeUFOMhKUOYqpsoYWQKAOuTRDMqn75rEaKDp0Xw=="
+    },
+    "@ant-design/react-slick": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@ant-design/react-slick/-/react-slick-1.0.0.tgz",
+      "integrity": "sha512-OKxZsn8TAf8fYxP79rDXgLs9zvKMTslK6dJ4iLhDXOujUqC5zJPBRszyrcEHXcMPOm1Sgk40JgyF3yiL/Swd7w==",
+      "requires": {
+        "@babel/runtime": "^7.10.4",
+        "classnames": "^2.2.5",
+        "json2mq": "^0.2.0",
+        "resize-observer-polyfill": "^1.5.1",
+        "throttle-debounce": "^5.0.0"
+      }
+    },
     "@apideck/better-ajv-errors": {
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/@apideck/better-ajv-errors/-/better-ajv-errors-0.3.6.tgz",
@@ -1374,6 +1425,21 @@
       "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.1.0.tgz",
       "integrity": "sha512-zJ6hb3FDgBbO8d2e83vg6zq7tNvDqSq9RwdwfzJ8tdm9JHNvANq2fqwyRn6mlpUb7CwTs5ILdUrGwi9Gk4vY5w=="
     },
+    "@ctrl/tinycolor": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.5.0.tgz",
+      "integrity": "sha512-tlJpwF40DEQcfR/QF+wNMVyGMaO9FQp6Z1Wahj4Gk3CJQYHwA2xVG7iKDFdW6zuxZY9XWOpGcfNCTsX4McOsOg=="
+    },
+    "@emotion/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
     "@eslint/eslintrc": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.4.1.tgz",
@@ -2062,6 +2128,55 @@
         "source-map": "^0.7.3"
       }
     },
+    "@rc-component/context": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@rc-component/context/-/context-1.3.0.tgz",
+      "integrity": "sha512-6QdaCJ7Wn5UZLJs15IEfqy4Ru3OaL5ctqpQYWd5rlfV9wwzrzdt6+kgAQZV/qdB0MUPN4nhyBfRembQCIvBf+w==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "rc-util": "^5.27.0"
+      }
+    },
+    "@rc-component/mini-decimal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rc-component/mini-decimal/-/mini-decimal-1.0.1.tgz",
+      "integrity": "sha512-9N8nRk0oKj1qJzANKl+n9eNSMUGsZtjwNuDCiZ/KA+dt1fE3zq5x2XxclRcAbOIXnZcJ53ozP2Pa60gyELXagA==",
+      "requires": {
+        "@babel/runtime": "^7.18.0"
+      }
+    },
+    "@rc-component/mutate-observer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@rc-component/mutate-observer/-/mutate-observer-1.0.0.tgz",
+      "integrity": "sha512-okqRJSfNisXdI6CUeOLZC5ukBW/8kir2Ii4PJiKpUt+3+uS7dxwJUMxsUZquxA1rQuL8YcEmKVp/TCnR+yUdZA==",
+      "requires": {
+        "@babel/runtime": "^7.18.0",
+        "classnames": "^2.3.2",
+        "rc-util": "^5.24.4"
+      }
+    },
+    "@rc-component/portal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@rc-component/portal/-/portal-1.1.0.tgz",
+      "integrity": "sha512-tbXM9SB1r5FOuZjRCljERFByFiEUcMmCWMXLog/NmgCzlAzreXyf23Vei3ZpSMxSMavzPnhCovfZjZdmxS3d1w==",
+      "requires": {
+        "@babel/runtime": "^7.18.0",
+        "classnames": "^2.3.2",
+        "rc-util": "^5.24.4"
+      }
+    },
+    "@rc-component/tour": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@rc-component/tour/-/tour-1.1.0.tgz",
+      "integrity": "sha512-Cy45VnNEDq6DLF5eKonIflObDfofbPq7AJpSf18qLN+j9+wW+sNlRv3JnCMDUsCdhSlnM4+yJ1RMokKp9GCpOQ==",
+      "requires": {
+        "@babel/runtime": "^7.18.0",
+        "@rc-component/portal": "^1.0.0-9",
+        "classnames": "^2.3.2",
+        "rc-trigger": "^5.3.4",
+        "rc-util": "^5.24.4"
+      }
+    },
     "@remix-run/router": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.0.tgz",
@@ -3329,6 +3444,60 @@
         "color-convert": "^1.9.0"
       }
     },
+    "antd": {
+      "version": "5.1.7",
+      "resolved": "https://registry.npmjs.org/antd/-/antd-5.1.7.tgz",
+      "integrity": "sha512-rz7wrUPWfE1WAt7o8vlTmjfxVmbV0Vyh00PEO8F837Gq0wugvOiWVPJ4BI/piIxUIpKXASYmCYWOczoHCkwBMQ==",
+      "requires": {
+        "@ant-design/colors": "^7.0.0",
+        "@ant-design/cssinjs": "^1.5.6",
+        "@ant-design/icons": "^5.0.0",
+        "@ant-design/react-slick": "~1.0.0",
+        "@babel/runtime": "^7.18.3",
+        "@ctrl/tinycolor": "^3.4.0",
+        "@rc-component/mutate-observer": "^1.0.0",
+        "@rc-component/tour": "~1.1.0",
+        "classnames": "^2.2.6",
+        "copy-to-clipboard": "^3.2.0",
+        "dayjs": "^1.11.1",
+        "qrcode.react": "^3.1.0",
+        "rc-cascader": "~3.8.0",
+        "rc-checkbox": "~2.3.0",
+        "rc-collapse": "~3.4.2",
+        "rc-dialog": "~9.0.2",
+        "rc-drawer": "~6.1.1",
+        "rc-dropdown": "~4.0.0",
+        "rc-field-form": "~1.27.0",
+        "rc-image": "~5.13.0",
+        "rc-input": "~0.1.4",
+        "rc-input-number": "~7.4.0",
+        "rc-mentions": "~1.13.1",
+        "rc-menu": "~9.8.2",
+        "rc-motion": "^2.6.1",
+        "rc-notification": "~5.0.0",
+        "rc-pagination": "~3.2.0",
+        "rc-picker": "~3.1.1",
+        "rc-progress": "~3.4.1",
+        "rc-rate": "~2.9.0",
+        "rc-resize-observer": "^1.2.0",
+        "rc-segmented": "~2.1.0",
+        "rc-select": "~14.2.0",
+        "rc-slider": "~10.0.0",
+        "rc-steps": "~6.0.0",
+        "rc-switch": "~4.0.0",
+        "rc-table": "~7.30.2",
+        "rc-tabs": "~12.5.1",
+        "rc-textarea": "~0.4.5",
+        "rc-tooltip": "~5.2.0",
+        "rc-tree": "~5.7.0",
+        "rc-tree-select": "~5.6.0",
+        "rc-trigger": "^5.3.4",
+        "rc-upload": "~4.3.0",
+        "rc-util": "^5.27.0",
+        "scroll-into-view-if-needed": "^3.0.3",
+        "throttle-debounce": "^5.0.0"
+      }
+    },
     "anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -3376,6 +3545,11 @@
         "is-string": "^1.0.7"
       }
     },
+    "array-tree-filter": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/array-tree-filter/-/array-tree-filter-2.1.0.tgz",
+      "integrity": "sha512-4ROwICNlNw/Hqa9v+rk5h22KjmzB1JGTMVKP2AKJBOCgb0yL0ASf0+YvCcLNNwquOHNX48jkeZIJ3a+oOQqKcw=="
+    },
     "array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -3442,6 +3616,11 @@
       "resolved": "https://registry.npmjs.org/async/-/async-3.2.4.tgz",
       "integrity": "sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ=="
     },
+    "async-validator": {
+      "version": "4.2.5",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz",
+      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
+    },
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
@@ -3475,6 +3654,28 @@
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.6.3.tgz",
       "integrity": "sha512-/BQzOX780JhsxDnPpH4ZiyrJAzcd8AfzFPkv+89veFSr1rcMjuq2JDCwypKaPeB6ljHp9KjXhPpjgCvQlWYuqg=="
     },
+    "axios": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.2.5.tgz",
+      "integrity": "sha512-9pU/8mmjSSOb4CXVsvGIevN+MlO/t9OWtKadTaLuN85Gge3HGorUckgp8A/2FH4V4hJ7JuQ3LIeI7KAV9ITZrQ==",
+      "requires": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "axobject-query": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.1.1.tgz",
@@ -3962,6 +4163,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "clean-css": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
@@ -3987,6 +4193,11 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -4100,6 +4311,11 @@
         }
       }
     },
+    "compute-scroll-into-view": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-2.0.4.tgz",
+      "integrity": "sha512-y/ZA3BGnxoM/QHHQ2Uy49CLtnWPbt4tTPpEEZiEmmiWBFKjej7nEyH8Ryz54jH0MLXflUYA3Er2zUxPSJu5R+g=="
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -4143,6 +4359,14 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
     },
+    "copy-to-clipboard": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.3.tgz",
+      "integrity": "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==",
+      "requires": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "core-js": {
       "version": "3.27.2",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.27.2.tgz",
@@ -4461,6 +4685,11 @@
         "whatwg-url": "^8.0.0"
       }
     },
+    "dayjs": {
+      "version": "1.11.7",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.7.tgz",
+      "integrity": "sha512-+Yw9U6YO5TQohxLcIkrXBeY73WP3ejHWVvx8XCk3gxvQDCTEmS48ZrSZCKciI7Bhl/uCMyxYtE9UqRILmFphkQ=="
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -4648,6 +4877,11 @@
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg=="
     },
+    "dom-align": {
+      "version": "1.12.4",
+      "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.12.4.tgz",
+      "integrity": "sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw=="
+    },
     "dom-converter": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
@@ -6050,6 +6284,11 @@
         "slash": "^3.0.0"
       }
     },
+    "goober": {
+      "version": "2.1.11",
+      "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.11.tgz",
+      "integrity": "sha512-5SS2lmxbhqH0u9ABEWq7WPU69a4i2pYcHeCxqaNq6Cw3mnrF0ghWNM4tEGid4dKy8XNIAUbuThuozDHHKJVh3A=="
+    },
     "gopd": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
@@ -8272,6 +8511,14 @@
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="
     },
+    "json2mq": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
+      "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==",
+      "requires": {
+        "string-convert": "^0.2.0"
+      }
+    },
     "json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -9880,6 +10127,11 @@
         }
       }
     },
+    "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=="
+    },
     "psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -9895,6 +10147,11 @@
       "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
       "integrity": "sha512-kV/CThkXo6xyFEZUugw/+pIOywXcDbFYgSct5cT3gqlbkBE1SJdwy6UQoZvodiWF/ckQLZyDE/Bu1M6gVu5lVw=="
     },
+    "qrcode.react": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-3.1.0.tgz",
+      "integrity": "sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q=="
+    },
     "qs": {
       "version": "6.11.0",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
@@ -9957,6 +10214,411 @@
         }
       }
     },
+    "rc-align": {
+      "version": "4.0.15",
+      "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-4.0.15.tgz",
+      "integrity": "sha512-wqJtVH60pka/nOX7/IspElA8gjPNQKIx/ZqJ6heATCkXpe1Zg4cPVrMD2vC96wjsFFL8WsmhPbx9tdMo1qqlIA==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "dom-align": "^1.7.0",
+        "rc-util": "^5.26.0",
+        "resize-observer-polyfill": "^1.5.1"
+      }
+    },
+    "rc-cascader": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/rc-cascader/-/rc-cascader-3.8.0.tgz",
+      "integrity": "sha512-zCz/NzsNRQ1TIfiR3rQNxjeRvgRHEkNdo0FjHQZ6Ay6n4tdCmMrM7+81ThNaf21JLQ1gS2AUG2t5uikGV78obA==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "array-tree-filter": "^2.1.0",
+        "classnames": "^2.3.1",
+        "rc-select": "~14.2.0",
+        "rc-tree": "~5.7.0",
+        "rc-util": "^5.6.1"
+      }
+    },
+    "rc-checkbox": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/rc-checkbox/-/rc-checkbox-2.3.2.tgz",
+      "integrity": "sha512-afVi1FYiGv1U0JlpNH/UaEXdh6WUJjcWokj/nUN2TgG80bfG+MDdbfHKlLcNNba94mbjy2/SXJ1HDgrOkXGAjg==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.1"
+      }
+    },
+    "rc-collapse": {
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/rc-collapse/-/rc-collapse-3.4.2.tgz",
+      "integrity": "sha512-jpTwLgJzkhAgp2Wpi3xmbTbbYExg6fkptL67Uu5LCRVEj6wqmy0DHTjjeynsjOLsppHGHu41t1ELntZ0lEvS/Q==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "rc-motion": "^2.3.4",
+        "rc-util": "^5.2.1",
+        "shallowequal": "^1.1.0"
+      }
+    },
+    "rc-dialog": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/rc-dialog/-/rc-dialog-9.0.2.tgz",
+      "integrity": "sha512-s3U+24xWUuB6Bn2Lk/Qt6rufy+uT+QvWkiFhNBcO9APLxcFFczWamaq7x9h8SCuhfc1nHcW4y8NbMsnAjNnWyg==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/portal": "^1.0.0-8",
+        "classnames": "^2.2.6",
+        "rc-motion": "^2.3.0",
+        "rc-util": "^5.21.0"
+      }
+    },
+    "rc-drawer": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/rc-drawer/-/rc-drawer-6.1.2.tgz",
+      "integrity": "sha512-mYsTVT8Amy0LRrpVEv7gI1hOjtfMSO/qHAaCDzFx9QBLnms3cAQLJkaxRWM+Eq99oyLhU/JkgoqTg13bc4ogOQ==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/portal": "^1.0.0-6",
+        "classnames": "^2.2.6",
+        "rc-motion": "^2.6.1",
+        "rc-util": "^5.21.2"
+      }
+    },
+    "rc-dropdown": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/rc-dropdown/-/rc-dropdown-4.0.1.tgz",
+      "integrity": "sha512-OdpXuOcme1rm45cR0Jzgfl1otzmU4vuBVb+etXM8vcaULGokAKVpKlw8p6xzspG7jGd/XxShvq+N3VNEfk/l5g==",
+      "requires": {
+        "@babel/runtime": "^7.18.3",
+        "classnames": "^2.2.6",
+        "rc-trigger": "^5.3.1",
+        "rc-util": "^5.17.0"
+      }
+    },
+    "rc-field-form": {
+      "version": "1.27.3",
+      "resolved": "https://registry.npmjs.org/rc-field-form/-/rc-field-form-1.27.3.tgz",
+      "integrity": "sha512-HGqxHnmGQgkPApEcikV4qTg3BLPC82uB/cwBDftDt1pYaqitJfSl5TFTTUMKVEJVT5RqJ2Zi68ME1HmIMX2HAw==",
+      "requires": {
+        "@babel/runtime": "^7.18.0",
+        "async-validator": "^4.1.0",
+        "rc-util": "^5.8.0"
+      }
+    },
+    "rc-image": {
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/rc-image/-/rc-image-5.13.0.tgz",
+      "integrity": "sha512-iZTOmw5eWo2+gcrJMMcnd7SsxVHl3w5xlyCgsULUdJhJbnuI8i/AL0tVOsE7aLn9VfOh1qgDT3mC2G75/c7mqg==",
+      "requires": {
+        "@babel/runtime": "^7.11.2",
+        "@rc-component/portal": "^1.0.2",
+        "classnames": "^2.2.6",
+        "rc-dialog": "~9.0.0",
+        "rc-motion": "^2.6.2",
+        "rc-util": "^5.0.6"
+      }
+    },
+    "rc-input": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/rc-input/-/rc-input-0.1.4.tgz",
+      "integrity": "sha512-FqDdNz+fV2dKNgfXzcSLKvC+jEs1709t7nD+WdfjrdSaOcefpgc7BUJYadc3usaING+b7ediMTfKxuJBsEFbXA==",
+      "requires": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.18.1"
+      }
+    },
+    "rc-input-number": {
+      "version": "7.4.0",
+      "resolved": "https://registry.npmjs.org/rc-input-number/-/rc-input-number-7.4.0.tgz",
+      "integrity": "sha512-r/Oub/sPYbzqLNUOHnnc9sbCu78a81KX+RCbRwmpvB4W6nptUySbdWS5KHV4Hak5CAE1LAd+wWm5JjvZizG1FA==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/mini-decimal": "^1.0.1",
+        "classnames": "^2.2.5",
+        "rc-util": "^5.23.0"
+      }
+    },
+    "rc-mentions": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/rc-mentions/-/rc-mentions-1.13.1.tgz",
+      "integrity": "sha512-FCkaWw6JQygtOz0+Vxz/M/NWqrWHB9LwqlY2RtcuFqWJNFK9njijOOzTSsBGANliGufVUzx/xuPHmZPBV0+Hgw==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.6",
+        "rc-menu": "~9.8.0",
+        "rc-textarea": "^0.4.0",
+        "rc-trigger": "^5.0.4",
+        "rc-util": "^5.22.5"
+      }
+    },
+    "rc-menu": {
+      "version": "9.8.2",
+      "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-9.8.2.tgz",
+      "integrity": "sha512-EahOJVjLuEnJsThoPN+mGnVm431RzVzDLZWHRS/YnXTQULa7OsgdJa/Y7qXxc3Z5sz8mgT6xYtgpmBXLxrZFaQ==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "rc-motion": "^2.4.3",
+        "rc-overflow": "^1.2.8",
+        "rc-trigger": "^5.1.2",
+        "rc-util": "^5.27.0"
+      }
+    },
+    "rc-motion": {
+      "version": "2.6.3",
+      "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.6.3.tgz",
+      "integrity": "sha512-xFLkes3/7VL/J+ah9jJruEW/Akbx5F6jVa2wG5o/ApGKQKSOd5FR3rseHLL9+xtJg4PmCwo6/1tqhDO/T+jFHA==",
+      "requires": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.21.0"
+      }
+    },
+    "rc-notification": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/rc-notification/-/rc-notification-5.0.2.tgz",
+      "integrity": "sha512-74wUFiLlyr6lRGEY1m1BaTiDp+0lIT4FRAblMnh9FApyK2JGdsSLbrQ/1rgM7d2N/IX5UIr8kLLW3TdXxFt/jQ==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "rc-motion": "^2.6.0",
+        "rc-util": "^5.20.1"
+      }
+    },
+    "rc-overflow": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc-overflow/-/rc-overflow-1.2.8.tgz",
+      "integrity": "sha512-QJ0UItckWPQ37ZL1dMEBAdY1dhfTXFL9k6oTTcyydVwoUNMnMqCGqnRNA98axSr/OeDKqR6DVFyi8eA5RQI/uQ==",
+      "requires": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-resize-observer": "^1.0.0",
+        "rc-util": "^5.19.2"
+      }
+    },
+    "rc-pagination": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/rc-pagination/-/rc-pagination-3.2.0.tgz",
+      "integrity": "sha512-5tIXjB670WwwcAJzAqp2J+cOBS9W3cH/WU1EiYwXljuZ4vtZXKlY2Idq8FZrnYBz8KhN3vwPo9CoV/SJS6SL1w==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.1"
+      }
+    },
+    "rc-picker": {
+      "version": "3.1.4",
+      "resolved": "https://registry.npmjs.org/rc-picker/-/rc-picker-3.1.4.tgz",
+      "integrity": "sha512-4qANXNc3C02YENNQvun329zf9VLvSQ2W8RkKQRu8k1P+EtSGqe3klcAKCfz/1TuCiDvgRjJlzRmyZAkwvsbI8w==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.1",
+        "rc-trigger": "^5.0.4",
+        "rc-util": "^5.4.0",
+        "shallowequal": "^1.1.0"
+      }
+    },
+    "rc-progress": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/rc-progress/-/rc-progress-3.4.1.tgz",
+      "integrity": "sha512-eAFDHXlk8aWpoXl0llrenPMt9qKHQXphxcVsnKs0FHC6eCSk1ebJtyaVjJUzKe0233ogiLDeEFK1Uihz3s67hw==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.6",
+        "rc-util": "^5.16.1"
+      }
+    },
+    "rc-rate": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/rc-rate/-/rc-rate-2.9.2.tgz",
+      "integrity": "sha512-SaiZFyN8pe0Fgphv8t3+kidlej+cq/EALkAJAc3A0w0XcPaH2L1aggM8bhe1u6GAGuQNAoFvTLjw4qLPGRKV5g==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.5",
+        "rc-util": "^5.0.1"
+      }
+    },
+    "rc-resize-observer": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/rc-resize-observer/-/rc-resize-observer-1.3.0.tgz",
+      "integrity": "sha512-w6cgP6rKnOqsvVQii2iEPsVq96HqvKMTQk+Hi5MJJSMd6/z4BuCUqwuZuL9fcRcPUcnF7AMM+G/VOFcIirZexg==",
+      "requires": {
+        "@babel/runtime": "^7.20.7",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.27.0",
+        "resize-observer-polyfill": "^1.5.1"
+      }
+    },
+    "rc-segmented": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/rc-segmented/-/rc-segmented-2.1.0.tgz",
+      "integrity": "sha512-hUlonro+pYoZcwrH6Vm56B2ftLfQh046hrwif/VwLIw1j3zGt52p5mREBwmeVzXnSwgnagpOpfafspzs1asjGw==",
+      "requires": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-motion": "^2.4.4",
+        "rc-util": "^5.17.0"
+      }
+    },
+    "rc-select": {
+      "version": "14.2.0",
+      "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-14.2.0.tgz",
+      "integrity": "sha512-tvxHmbAA0EIhBkB7dyaRhcBUIWHocQbUFY/fBlezj2jg5p65a5VQ/UhBg2I9TA1wjpsr5CCx0ruZPkYcUMjDoQ==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "rc-motion": "^2.0.1",
+        "rc-overflow": "^1.0.0",
+        "rc-trigger": "^5.0.4",
+        "rc-util": "^5.16.1",
+        "rc-virtual-list": "^3.4.13"
+      }
+    },
+    "rc-slider": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-10.0.1.tgz",
+      "integrity": "sha512-igTKF3zBet7oS/3yNiIlmU8KnZ45npmrmHlUUio8PNbIhzMcsh+oE/r2UD42Y6YD2D/s+kzCQkzQrPD6RY435Q==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.5",
+        "rc-util": "^5.18.1",
+        "shallowequal": "^1.1.0"
+      }
+    },
+    "rc-steps": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/rc-steps/-/rc-steps-6.0.0.tgz",
+      "integrity": "sha512-+KfMZIty40mYCQSDvYbZ1jwnuObLauTiIskT1hL4FFOBHP6ZOr8LK0m143yD3kEN5XKHSEX1DIwCj3AYZpoeNQ==",
+      "requires": {
+        "@babel/runtime": "^7.16.7",
+        "classnames": "^2.2.3",
+        "rc-util": "^5.16.1"
+      }
+    },
+    "rc-switch": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/rc-switch/-/rc-switch-4.0.0.tgz",
+      "integrity": "sha512-IfrYC99vN0gKaTyjQdqYuADU0eH00SAFHg3jOp8HrmUpJruhV1SohJzrCbPqPraZeX/6X/QKkdLfkdnUub05WA==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.0.1"
+      }
+    },
+    "rc-table": {
+      "version": "7.30.3",
+      "resolved": "https://registry.npmjs.org/rc-table/-/rc-table-7.30.3.tgz",
+      "integrity": "sha512-PHe+lZKwPo3qui5j79m54vKu8b4hebk04x+4Hy65NvwUU3+NNFGS5FZpylXQMkueMnE8hgh22ZuScQDkCtzQFQ==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "@rc-component/context": "^1.3.0",
+        "classnames": "^2.2.5",
+        "rc-resize-observer": "^1.1.0",
+        "rc-util": "^5.27.1"
+      }
+    },
+    "rc-tabs": {
+      "version": "12.5.6",
+      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-12.5.6.tgz",
+      "integrity": "sha512-aArXHzxK7YICxe+622CZ8FlO5coMi8P7E6tXpseCPKm1gdTjUt0LrQK1/AxcrRXZXG3K4QqhlKmET0+cX5DQaQ==",
+      "requires": {
+        "@babel/runtime": "^7.11.2",
+        "classnames": "2.x",
+        "rc-dropdown": "~4.0.0",
+        "rc-menu": "~9.8.0",
+        "rc-motion": "^2.6.2",
+        "rc-resize-observer": "^1.0.0",
+        "rc-util": "^5.16.0"
+      }
+    },
+    "rc-textarea": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/rc-textarea/-/rc-textarea-0.4.7.tgz",
+      "integrity": "sha512-IQPd1CDI3mnMlkFyzt2O4gQ2lxUsnBAeJEoZGJnkkXgORNqyM9qovdrCj9NzcRfpHgLdzaEbU3AmobNFGUznwQ==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.1",
+        "rc-resize-observer": "^1.0.0",
+        "rc-util": "^5.24.4",
+        "shallowequal": "^1.1.0"
+      }
+    },
+    "rc-tooltip": {
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-5.2.2.tgz",
+      "integrity": "sha512-jtQzU/18S6EI3lhSGoDYhPqNpWajMtS5VV/ld1LwyfrDByQpYmw/LW6U7oFXXLukjfDHQ7Ju705A82PRNFWYhg==",
+      "requires": {
+        "@babel/runtime": "^7.11.2",
+        "classnames": "^2.3.1",
+        "rc-trigger": "^5.0.0"
+      }
+    },
+    "rc-tree": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/rc-tree/-/rc-tree-5.7.2.tgz",
+      "integrity": "sha512-nmnL6qLnfwVckO5zoqKL2I9UhwDqzyCtjITQCkwhimyz1zfuFkG5ZPIXpzD/Guzso94qQA/QrMsvzic5W6QDjg==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "rc-motion": "^2.0.1",
+        "rc-util": "^5.16.1",
+        "rc-virtual-list": "^3.4.8"
+      }
+    },
+    "rc-tree-select": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/rc-tree-select/-/rc-tree-select-5.6.0.tgz",
+      "integrity": "sha512-XG6pu0a9l6+mzhQqUYfR2VIONbe/3LjVc3wKt28k6uBMZsI1j+SSxRyt/7jWRq8Kok8jHJBQASlDg6ehr9Sp0w==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "rc-select": "~14.2.0",
+        "rc-tree": "~5.7.0",
+        "rc-util": "^5.16.1"
+      }
+    },
+    "rc-trigger": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-5.3.4.tgz",
+      "integrity": "sha512-mQv+vas0TwKcjAO2izNPkqR4j86OemLRmvL2nOzdP9OWNWA1ivoTt5hzFqYNW9zACwmTezRiN8bttrC7cZzYSw==",
+      "requires": {
+        "@babel/runtime": "^7.18.3",
+        "classnames": "^2.2.6",
+        "rc-align": "^4.0.0",
+        "rc-motion": "^2.0.0",
+        "rc-util": "^5.19.2"
+      }
+    },
+    "rc-upload": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/rc-upload/-/rc-upload-4.3.4.tgz",
+      "integrity": "sha512-uVbtHFGNjHG/RyAfm9fluXB6pvArAGyAx8z7XzXXyorEgVIWj6mOlriuDm0XowDHYz4ycNK0nE0oP3cbFnzxiQ==",
+      "requires": {
+        "@babel/runtime": "^7.18.3",
+        "classnames": "^2.2.5",
+        "rc-util": "^5.2.0"
+      }
+    },
+    "rc-util": {
+      "version": "5.27.2",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.27.2.tgz",
+      "integrity": "sha512-8XHRbeJOWlTR2Hk1K2xLaPOf7lZu+3taskAGuqOPccA676vB3ygrz3ZgdrA3wml40CzR9RlIEHDWwI7FZT3wBQ==",
+      "requires": {
+        "@babel/runtime": "^7.18.3",
+        "react-is": "^16.12.0"
+      }
+    },
+    "rc-virtual-list": {
+      "version": "3.4.13",
+      "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.4.13.tgz",
+      "integrity": "sha512-cPOVDmcNM7rH6ANotanMDilW/55XnFPw0Jh/GQYtrzZSy3AmWvCnqVNyNC/pgg3lfVmX2994dlzAhuUrd4jG7w==",
+      "requires": {
+        "@babel/runtime": "^7.20.0",
+        "classnames": "^2.2.6",
+        "rc-resize-observer": "^1.0.0",
+        "rc-util": "^5.15.0"
+      }
+    },
     "react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -10078,6 +10740,30 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
+    "react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      }
+    },
+    "react-hot-toast": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.0.tgz",
+      "integrity": "sha512-qnnVbXropKuwUpriVVosgo8QrB+IaPJCpL8oBI6Ov84uvHZ5QQcTp2qg6ku2wNfgJl6rlQXJIQU5q+5lmPOutA==",
+      "requires": {
+        "goober": "^2.1.10"
+      }
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -10160,6 +10846,19 @@
         "workbox-webpack-plugin": "^6.4.1"
       }
     },
+    "react-side-effect": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
+      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw=="
+    },
+    "react-toastify": {
+      "version": "9.1.1",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.1.tgz",
+      "integrity": "sha512-pkFCla1z3ve045qvjEmn2xOJOy4ZciwRXm1oMPULVkELi5aJdHCN/FHnuqXq8IwGDLB7PPk2/J6uP9D8ejuiRw==",
+      "requires": {
+        "clsx": "^1.1.1"
+      }
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -10366,6 +11065,11 @@
       "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ=="
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
@@ -10577,6 +11281,14 @@
         "ajv-keywords": "^3.5.2"
       }
     },
+    "scroll-into-view-if-needed": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/scroll-into-view-if-needed/-/scroll-into-view-if-needed-3.0.4.tgz",
+      "integrity": "sha512-s+/F50jwTOUt+u5oEIAzum9MN2lUQNvWBe/zfEsVQcbaERjGkKLq1s+2wCHkahMLC8nMLbzMVKivx9JhunXaZg==",
+      "requires": {
+        "compute-scroll-into-view": "^2.0.4"
+      }
+    },
     "select-hose": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@@ -10739,6 +11451,11 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -10916,6 +11633,11 @@
         "internal-slot": "^1.0.4"
       }
     },
+    "string-convert": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
+      "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A=="
+    },
     "string-length": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz",
@@ -11057,6 +11779,11 @@
         "postcss-selector-parser": "^6.0.4"
       }
     },
+    "stylis": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.1.3.tgz",
+      "integrity": "sha512-GP6WDNWf+o403jrEp9c5jibKavrtLW+/qYGhFxFrG8maXhwTBI7gLLhiBb0o7uFccWN+EOS9aMO6cGHWAO07OA=="
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -11248,6 +11975,11 @@
       "resolved": "https://registry.npmjs.org/throat/-/throat-6.0.2.tgz",
       "integrity": "sha512-WKexMoJj3vEuK0yFEapj8y64V0A6xcuPuK9Gt1d0R+dzCSJc0lHqQytAbSB4cDAK0dWh4T0E2ETkoLE2WZ41OQ=="
     },
+    "throttle-debounce": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.0.tgz",
+      "integrity": "sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg=="
+    },
     "thunky": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
@@ -11271,6 +12003,11 @@
         "is-number": "^7.0.0"
       }
     },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="
+    },
     "toidentifier": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
diff --git a/client/package.json b/client/package.json
index 7f973d87..ad45c312 100644
--- a/client/package.json
+++ b/client/package.json
@@ -1,15 +1,21 @@
 {
   "name": "client",
+  "proxy": "http://localhost:8080",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "antd": "^5.1.7",
+    "axios": "^1.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
+    "react-hot-toast": "^2.4.0",
     "react-router-dom": "^6.7.0",
     "react-scripts": "5.0.1",
+    "react-toastify": "^9.1.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/client/src/App.js b/client/src/App.js
index f945c1d4..5468f154 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -4,11 +4,51 @@ import About from "./pages/About";
 import Contact from "./pages/Contact";
 import Policy from "./pages/Policy";
 import Pagenotfound from "./pages/Pagenotfound";
+import Register from "./pages/Auth/Register";
+import Login from "./pages/Auth/Login";
+import Dashboard from "./pages/user/Dashboard";
+import PrivateRoute from "./components/Routes/Private";
+import ForgotPasssword from "./pages/Auth/ForgotPasssword";
+import AdminRoute from "./components/Routes/AdminRoute";
+import AdminDashboard from "./pages/Admin/AdminDashboard";
+import CreateCategory from "./pages/Admin/CreateCategory";
+import CreateProduct from "./pages/Admin/CreateProduct";
+import Users from "./pages/Admin/Users";
+import Orders from "./pages/user/Orders";
+import Profile from "./pages/user/Profile";
+import Products from "./pages/Admin/Products";
+import UpdateProduct from "./pages/Admin/UpdateProduct";
+import Search from "./pages/Search";
+import ProductDetails from "./pages/ProductDetails";
+import Categories from "./pages/Categories";
+import CategoryProduct from "./pages/CategoryProduct";
+import CartPage from "./pages/CartPage";
 function App() {
   return (
     <>
       <Routes>
         <Route path="/" element={<HomePage />} />
+        <Route path="/product/:slug" element={<ProductDetails />} />
+        <Route path="/categories" element={<Categories />} />
+        <Route path="/cart" element={<CartPage />} />
+        <Route path="/category/:slug" element={<CategoryProduct />} />
+        <Route path="/search" element={<Search />} />
+        <Route path="/dashboard" element={<PrivateRoute />}>
+          <Route path="user" element={<Dashboard />} />
+          <Route path="user/orders" element={<Orders />} />
+          <Route path="user/profile" element={<Profile />} />
+        </Route>
+        <Route path="/dashboard" element={<AdminRoute />}>
+          <Route path="admin" element={<AdminDashboard />} />
+          <Route path="admin/create-category" element={<CreateCategory />} />
+          <Route path="admin/create-product" element={<CreateProduct />} />
+          <Route path="admin/product/:slug" element={<UpdateProduct />} />
+          <Route path="admin/products" element={<Products />} />
+          <Route path="admin/users" element={<Users />} />
+        </Route>
+        <Route path="/register" element={<Register />} />
+        <Route path="/forgot-password" element={<ForgotPasssword />} />
+        <Route path="/login" element={<Login />} />
         <Route path="/about" element={<About />} />
         <Route path="/contact" element={<Contact />} />
         <Route path="/policy" element={<Policy />} />
diff --git a/client/src/components/Form/CategoryForm.js b/client/src/components/Form/CategoryForm.js
new file mode 100644
index 00000000..29609323
--- /dev/null
+++ b/client/src/components/Form/CategoryForm.js
@@ -0,0 +1,25 @@
+import React from "react";
+
+const CategoryForm = ({ handleSubmit, value, setValue }) => {
+  return (
+    <>
+      <form onSubmit={handleSubmit}>
+        <div className="mb-3">
+          <input
+            type="text"
+            className="form-control"
+            placeholder="Enter new category"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+          />
+        </div>
+
+        <button type="submit" className="btn btn-primary">
+          Submit
+        </button>
+      </form>
+    </>
+  );
+};
+
+export default CategoryForm;
diff --git a/client/src/components/Form/SearchInput.js b/client/src/components/Form/SearchInput.js
new file mode 100644
index 00000000..05fd1d56
--- /dev/null
+++ b/client/src/components/Form/SearchInput.js
@@ -0,0 +1,40 @@
+import React from "react";
+import { useSearch } from "../../context/search";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+const SearchInput = () => {
+  const [values, setValues] = useSearch();
+  const navigate = useNavigate();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const { data } = await axios.get(
+        `/api/v1/product/search/${values.keyword}`
+      );
+      setValues({ ...values, results: data });
+      navigate("/search");
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  return (
+    <div>
+      <form className="d-flex" role="search" onSubmit={handleSubmit}>
+        <input
+          className="form-control me-2"
+          type="search"
+          placeholder="Search"
+          aria-label="Search"
+          value={values.keyword}
+          onChange={(e) => setValues({ ...values, keyword: e.target.value })}
+        />
+        <button className="btn btn-outline-success" type="submit">
+          Search
+        </button>
+      </form>
+    </div>
+  );
+};
+
+export default SearchInput;
diff --git a/client/src/components/Layout/AdminMenu.js b/client/src/components/Layout/AdminMenu.js
new file mode 100644
index 00000000..9dc01653
--- /dev/null
+++ b/client/src/components/Layout/AdminMenu.js
@@ -0,0 +1,39 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+const AdminMenu = () => {
+  return (
+    <>
+      <div className="text-center">
+        <div className="list-group">
+          <h4>Admin Panel</h4>
+          <NavLink
+            to="/dashboard/admin/create-category"
+            className="list-group-item list-group-item-action"
+          >
+            Create Category
+          </NavLink>
+          <NavLink
+            to="/dashboard/admin/create-product"
+            className="list-group-item list-group-item-action"
+          >
+            Create Product
+          </NavLink>
+          <NavLink
+            to="/dashboard/admin/products"
+            className="list-group-item list-group-item-action"
+          >
+            Products
+          </NavLink>
+          <NavLink
+            to="/dashboard/admin/users"
+            className="list-group-item list-group-item-action"
+          >
+            Users
+          </NavLink>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default AdminMenu;
diff --git a/client/src/components/Layout/Header.js b/client/src/components/Layout/Header.js
index a5e86b16..37bee594 100644
--- a/client/src/components/Layout/Header.js
+++ b/client/src/components/Layout/Header.js
@@ -1,8 +1,25 @@
 import React from "react";
 import { NavLink, Link } from "react-router-dom";
-import { GiShoppingBag } from "react-icons/gi";
+import { useAuth } from "../../context/auth";
+import toast from "react-hot-toast";
+import SearchInput from "../Form/SearchInput";
+import useCategory from "../../hooks/useCategory";
+import { useCart } from "../../context/cart";
+import { Badge } from "antd";
 
 const Header = () => {
+  const [auth, setAuth] = useAuth();
+  const [cart] = useCart();
+  const categories = useCategory();
+  const handleLogout = () => {
+    setAuth({
+      ...auth,
+      user: null,
+      token: "",
+    });
+    localStorage.removeItem("auth");
+    toast.success("Logout Successfully");
+  };
   return (
     <>
       <nav className="navbar navbar-expand-lg bg-body-tertiary">
@@ -23,30 +40,94 @@ const Header = () => {
               🛒 Ecommerce App
             </Link>
             <ul className="navbar-nav ms-auto mb-2 mb-lg-0">
+              <SearchInput />
               <li className="nav-item">
                 <NavLink to="/" className="nav-link ">
                   Home
                 </NavLink>
               </li>
-              <li className="nav-item">
-                <NavLink to="/category" className="nav-link ">
-                  Category
-                </NavLink>
-              </li>
-              <li className="nav-item">
-                <NavLink to="/register" className="nav-link">
-                  Register
-                </NavLink>
-              </li>
-              <li className="nav-item">
-                <NavLink to="/login" className="nav-link">
-                  Login
-                </NavLink>
+              <li className="nav-item dropdown">
+                <Link
+                  className="nav-link dropdown-toggle"
+                  to={"/categories"}
+                  data-bs-toggle="dropdown"
+                >
+                  Categories
+                </Link>
+                <ul className="dropdown-menu">
+                  <li>
+                    <Link className="dropdown-item" to={"/categories"}>
+                      All Categories
+                    </Link>
+                  </li>
+                  {categories?.map((c) => (
+                    <li>
+                      <Link
+                        className="dropdown-item"
+                        to={`/category/${c.slug}`}
+                      >
+                        {c.name}
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
               </li>
+
+              {!auth?.user ? (
+                <>
+                  <li className="nav-item">
+                    <NavLink to="/register" className="nav-link">
+                      Register
+                    </NavLink>
+                  </li>
+                  <li className="nav-item">
+                    <NavLink to="/login" className="nav-link">
+                      Login
+                    </NavLink>
+                  </li>
+                </>
+              ) : (
+                <>
+                  <li className="nav-item dropdown">
+                    <NavLink
+                      className="nav-link dropdown-toggle"
+                      href="#"
+                      role="button"
+                      data-bs-toggle="dropdown"
+                      style={{ border: "none" }}
+                    >
+                      {auth?.user?.name}
+                    </NavLink>
+                    <ul className="dropdown-menu">
+                      <li>
+                        <NavLink
+                          to={`/dashboard/${
+                            auth?.user?.role === 1 ? "admin" : "user"
+                          }`}
+                          className="dropdown-item"
+                        >
+                          Dashboard
+                        </NavLink>
+                      </li>
+                      <li>
+                        <NavLink
+                          onClick={handleLogout}
+                          to="/login"
+                          className="dropdown-item"
+                        >
+                          Logout
+                        </NavLink>
+                      </li>
+                    </ul>
+                  </li>
+                </>
+              )}
               <li className="nav-item">
-                <NavLink to="/cart" className="nav-link">
-                  Cart (0)
-                </NavLink>
+                <Badge count={cart?.length} showZero>
+                  <NavLink to="/cart" className="nav-link">
+                    Cart
+                  </NavLink>
+                </Badge>
               </li>
             </ul>
           </div>
diff --git a/client/src/components/Layout/Layout.js b/client/src/components/Layout/Layout.js
index 199cd8c6..db87816f 100644
--- a/client/src/components/Layout/Layout.js
+++ b/client/src/components/Layout/Layout.js
@@ -1,15 +1,34 @@
 import React from "react";
 import Footer from "./Footer";
 import Header from "./Header";
-
-const Layout = ({ children }) => {
+import { Helmet } from "react-helmet";
+import { Toaster } from "react-hot-toast";
+const Layout = ({ children, title, description, keywords, author }) => {
   return (
     <div>
+      <Helmet>
+        <meta charSet="utf-8" />
+        <meta name="description" content={description} />
+        <meta name="keywords" content={keywords} />
+        <meta name="author" content={author} />
+        <title>{title}</title>
+      </Helmet>
       <Header />
-      <main style={{ minHeight: "70vh" }}>{children}</main>
+      <main style={{ minHeight: "70vh" }}>
+        <Toaster />
+
+        {children}
+      </main>
       <Footer />
     </div>
   );
 };
 
+Layout.defaultProps = {
+  title: "Ecommerce app - shop now",
+  description: "mern stack project",
+  keywords: "mern,react,node,mongodb",
+  author: "Techinfoyt",
+};
+
 export default Layout;
diff --git a/client/src/components/Layout/UserMenu.js b/client/src/components/Layout/UserMenu.js
new file mode 100644
index 00000000..4b8ea885
--- /dev/null
+++ b/client/src/components/Layout/UserMenu.js
@@ -0,0 +1,27 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+const UserMenu = () => {
+  return (
+    <div>
+      <div className="text-center">
+        <div className="list-group">
+          <h4>Dashboard</h4>
+          <NavLink
+            to="/dashboard/user/profile"
+            className="list-group-item list-group-item-action"
+          >
+            Profile
+          </NavLink>
+          <NavLink
+            to="/dashboard/user/orders"
+            className="list-group-item list-group-item-action"
+          >
+            Orders
+          </NavLink>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UserMenu;
diff --git a/client/src/components/Prices.js b/client/src/components/Prices.js
new file mode 100644
index 00000000..5ecfa098
--- /dev/null
+++ b/client/src/components/Prices.js
@@ -0,0 +1,32 @@
+export const Prices = [
+  {
+    _id: 0,
+    name: "$0 to 19",
+    array: [0, 19],
+  },
+  {
+    _id: 1,
+    name: "$20 to 39",
+    array: [20, 39],
+  },
+  {
+    _id: 2,
+    name: "$40 to 59",
+    array: [40, 59],
+  },
+  {
+    _id: 3,
+    name: "$60 to 79",
+    array: [60, 79],
+  },
+  {
+    _id: 4,
+    name: "$80 to 99",
+    array: [80, 99],
+  },
+  {
+    _id: 4,
+    name: "$100 or more",
+    array: [100, 9999],
+  },
+];
diff --git a/client/src/components/Routes/AdminRoute.js b/client/src/components/Routes/AdminRoute.js
new file mode 100644
index 00000000..a39dfd81
--- /dev/null
+++ b/client/src/components/Routes/AdminRoute.js
@@ -0,0 +1,24 @@
+import { useState, useEffect } from "react";
+import { useAuth } from "../../context/auth";
+import { Outlet } from "react-router-dom";
+import axios from "axios";
+import Spinner from "../Spinner";
+
+export default function PrivateRoute() {
+  const [ok, setOk] = useState(false);
+  const [auth, setAuth] = useAuth();
+
+  useEffect(() => {
+    const authCheck = async () => {
+      const res = await axios.get("/api/v1/auth/admin-auth");
+      if (res.data.ok) {
+        setOk(true);
+      } else {
+        setOk(false);
+      }
+    };
+    if (auth?.token) authCheck();
+  }, [auth?.token]);
+
+  return ok ? <Outlet /> : <Spinner path="" />;
+}
diff --git a/client/src/components/Routes/Private.js b/client/src/components/Routes/Private.js
new file mode 100644
index 00000000..c5df41a0
--- /dev/null
+++ b/client/src/components/Routes/Private.js
@@ -0,0 +1,24 @@
+import { useState, useEffect } from "react";
+import { useAuth } from "../../context/auth";
+import { Outlet } from "react-router-dom";
+import axios from "axios";
+import Spinner from "../Spinner";
+
+export default function PrivateRoute() {
+  const [ok, setOk] = useState(false);
+  const [auth, setAuth] = useAuth();
+
+  useEffect(() => {
+    const authCheck = async () => {
+      const res = await axios.get("/api/v1/auth/user-auth");
+      if (res.data.ok) {
+        setOk(true);
+      } else {
+        setOk(false);
+      }
+    };
+    if (auth?.token) authCheck();
+  }, [auth?.token]);
+
+  return ok ? <Outlet /> : <Spinner />;
+}
diff --git a/client/src/components/Spinner.js b/client/src/components/Spinner.js
new file mode 100644
index 00000000..60e743bb
--- /dev/null
+++ b/client/src/components/Spinner.js
@@ -0,0 +1,33 @@
+import React, { useState, useEffect } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+const Spinner = ({ path = "login" }) => {
+  const [count, setCount] = useState(3);
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCount((prevValue) => --prevValue);
+    }, 1000);
+    count === 0 &&
+      navigate(`/${path}`, {
+        state: location.pathname,
+      });
+    return () => clearInterval(interval);
+  }, [count, navigate, location, path]);
+  return (
+    <>
+      <div
+        className="d-flex flex-column justify-content-center align-items-center"
+        style={{ height: "100vh" }}
+      >
+        <h1 className="Text-center">redirecting to you in {count} second </h1>
+        <div className="spinner-border" role="status">
+          <span className="visually-hidden">Loading...</span>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Spinner;
diff --git a/client/src/context/auth.js b/client/src/context/auth.js
new file mode 100644
index 00000000..a0df59b2
--- /dev/null
+++ b/client/src/context/auth.js
@@ -0,0 +1,36 @@
+import { useState, useEffect, useContext, createContext } from "react";
+import axios from "axios";
+
+const AuthContext = createContext();
+const AuthProvider = ({ children }) => {
+  const [auth, setAuth] = useState({
+    user: null,
+    token: "",
+  });
+
+  //default axios
+  axios.defaults.headers.common["Authorization"] = auth?.token;
+
+  useEffect(() => {
+    const data = localStorage.getItem("auth");
+    if (data) {
+      const parseData = JSON.parse(data);
+      setAuth({
+        ...auth,
+        user: parseData.user,
+        token: parseData.token,
+      });
+    }
+    //eslint-disable-next-line
+  }, []);
+  return (
+    <AuthContext.Provider value={[auth, setAuth]}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+// custom hook
+const useAuth = () => useContext(AuthContext);
+
+export { useAuth, AuthProvider };
diff --git a/client/src/context/cart.js b/client/src/context/cart.js
new file mode 100644
index 00000000..ad446097
--- /dev/null
+++ b/client/src/context/cart.js
@@ -0,0 +1,22 @@
+import { useState, useContext, createContext, useEffect } from "react";
+
+const CartContext = createContext();
+const CartProvider = ({ children }) => {
+  const [cart, setCart] = useState([]);
+
+  useEffect(() => {
+    let existingCartItem = localStorage.getItem("cart");
+    if (existingCartItem) setCart(JSON.parse(existingCartItem));
+  }, []);
+
+  return (
+    <CartContext.Provider value={[cart, setCart]}>
+      {children}
+    </CartContext.Provider>
+  );
+};
+
+// custom hook
+const useCart = () => useContext(CartContext);
+
+export { useCart, CartProvider };
diff --git a/client/src/context/search.js b/client/src/context/search.js
new file mode 100644
index 00000000..0d55ace8
--- /dev/null
+++ b/client/src/context/search.js
@@ -0,0 +1,20 @@
+import { useState, useContext, createContext } from "react";
+
+const SearchContext = createContext();
+const SearchProvider = ({ children }) => {
+  const [auth, setAuth] = useState({
+    keyword: "",
+    results: [],
+  });
+
+  return (
+    <SearchContext.Provider value={[auth, setAuth]}>
+      {children}
+    </SearchContext.Provider>
+  );
+};
+
+// custom hook
+const useSearch = () => useContext(SearchContext);
+
+export { useSearch, SearchProvider };
diff --git a/client/src/hooks/useCategory.js b/client/src/hooks/useCategory.js
new file mode 100644
index 00000000..c3375fbc
--- /dev/null
+++ b/client/src/hooks/useCategory.js
@@ -0,0 +1,22 @@
+import { useState, useEffect } from "react";
+import axios from "axios";
+
+export default function useCategory() {
+  const [categories, setCategories] = useState([]);
+
+  //get cat
+  const getCategories = async () => {
+    try {
+      const { data } = await axios.get("/api/v1/category/get-category");
+      setCategories(data?.category);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  useEffect(() => {
+    getCategories();
+  }, []);
+
+  return categories;
+}
diff --git a/client/src/index.css b/client/src/index.css
index 4953368a..afde46db 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -98,3 +98,9 @@
   align-items: center;
   justify-content: center;
 }
+
+/* ==================== */
+.product-link {
+  text-decoration: none !important;
+  color: black !important;
+}
diff --git a/client/src/index.js b/client/src/index.js
index 072ed53f..fd2c31fa 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -4,14 +4,22 @@ import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import { BrowserRouter } from "react-router-dom";
+import { AuthProvider } from "./context/auth";
+import { SearchProvider } from "./context/search";
+import { CartProvider } from "./context/cart";
+import "antd/dist/reset.css";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
-  <BrowserRouter>
-    <React.StrictMode>
-      <App />
-    </React.StrictMode>
-  </BrowserRouter>
+  <AuthProvider>
+    <SearchProvider>
+      <CartProvider>
+        <BrowserRouter>
+          <App />
+        </BrowserRouter>
+      </CartProvider>
+    </SearchProvider>
+  </AuthProvider>
 );
 
 // If you want to start measuring performance in your app, pass a function
diff --git a/client/src/pages/About.js b/client/src/pages/About.js
index 735fe1ad..b3fd8b2c 100644
--- a/client/src/pages/About.js
+++ b/client/src/pages/About.js
@@ -3,7 +3,7 @@ import Layout from "./../components/Layout/Layout";
 
 const About = () => {
   return (
-    <Layout>
+    <Layout title={"About us - Ecommer app"}>
       <div className="row contactus ">
         <div className="col-md-6 ">
           <img
diff --git a/client/src/pages/Admin/AdminDashboard.js b/client/src/pages/Admin/AdminDashboard.js
new file mode 100644
index 00000000..7b3d337b
--- /dev/null
+++ b/client/src/pages/Admin/AdminDashboard.js
@@ -0,0 +1,27 @@
+import React from "react";
+import AdminMenu from "../../components/Layout/AdminMenu";
+import Layout from "./../../components/Layout/Layout";
+import { useAuth } from "../../context/auth";
+const AdminDashboard = () => {
+  const [auth] = useAuth();
+  return (
+    <Layout>
+      <div className="container-fluid m-3 p-3">
+        <div className="row">
+          <div className="col-md-3">
+            <AdminMenu />
+          </div>
+          <div className="col-md-9">
+            <div className="card w-75 p-3">
+              <h3> Admin Name : {auth?.user?.name}</h3>
+              <h3> Admin Email : {auth?.user?.email}</h3>
+              <h3> Admin Contact : {auth?.user?.phone}</h3>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default AdminDashboard;
diff --git a/client/src/pages/Admin/CreateCategory.js b/client/src/pages/Admin/CreateCategory.js
new file mode 100644
index 00000000..10222b88
--- /dev/null
+++ b/client/src/pages/Admin/CreateCategory.js
@@ -0,0 +1,161 @@
+import React, { useEffect, useState } from "react";
+import Layout from "./../../components/Layout/Layout";
+import AdminMenu from "./../../components/Layout/AdminMenu";
+import toast from "react-hot-toast";
+import axios from "axios";
+import CategoryForm from "../../components/Form/CategoryForm";
+import { Modal } from "antd";
+const CreateCategory = () => {
+  const [categories, setCategories] = useState([]);
+  const [name, setName] = useState("");
+  const [visible, setVisible] = useState(false);
+  const [selected, setSelected] = useState(null);
+  const [updatedName, setUpdatedName] = useState("");
+  //handle Form
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const { data } = await axios.post("/api/v1/category/create-category", {
+        name,
+      });
+      if (data?.success) {
+        toast.success(`${name} is created`);
+        getAllCategory();
+      } else {
+        toast.error(data.message);
+      }
+    } catch (error) {
+      console.log(error);
+      toast.error("somthing went wrong in input form");
+    }
+  };
+
+  //get all cat
+  const getAllCategory = async () => {
+    try {
+      const { data } = await axios.get("/api/v1/category/get-category");
+      if (data?.success) {
+        setCategories(data?.category);
+      }
+    } catch (error) {
+      console.log(error);
+      toast.error("Something wwent wrong in getting catgeory");
+    }
+  };
+
+  useEffect(() => {
+    getAllCategory();
+  }, []);
+
+  //update category
+  const handleUpdate = async (e) => {
+    e.preventDefault();
+    try {
+      const { data } = await axios.put(
+        `/api/v1/category/update-category/${selected._id}`,
+        { name: updatedName }
+      );
+      if (data.success) {
+        toast.success(`${updatedName} is updated`);
+        setSelected(null);
+        setUpdatedName("");
+        setVisible(false);
+        getAllCategory();
+      } else {
+        toast.error(data.message);
+      }
+    } catch (error) {
+      toast.error("Somtihing went wrong");
+    }
+  };
+  //delete category
+  const handleDelete = async (pId) => {
+    try {
+      const { data } = await axios.delete(
+        `/api/v1/category/delete-category/${pId}`
+      );
+      if (data.success) {
+        toast.success(`category is deleted`);
+
+        getAllCategory();
+      } else {
+        toast.error(data.message);
+      }
+    } catch (error) {
+      toast.error("Somtihing went wrong");
+    }
+  };
+  return (
+    <Layout title={"Dashboard - Create Category"}>
+      <div className="container-fluid m-3 p-3">
+        <div className="row">
+          <div className="col-md-3">
+            <AdminMenu />
+          </div>
+          <div className="col-md-9">
+            <h1>Manage Category</h1>
+            <div className="p-3 w-50">
+              <CategoryForm
+                handleSubmit={handleSubmit}
+                value={name}
+                setValue={setName}
+              />
+            </div>
+            <div className="w-75">
+              <table className="table">
+                <thead>
+                  <tr>
+                    <th scope="col">Name</th>
+                    <th scope="col">Actions</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {categories?.map((c) => (
+                    <>
+                      <tr>
+                        <td key={c._id}>{c.name}</td>
+                        <td>
+                          <button
+                            className="btn btn-primary ms-2"
+                            onClick={() => {
+                              setVisible(true);
+                              setUpdatedName(c.name);
+                              setSelected(c);
+                            }}
+                          >
+                            Edit
+                          </button>
+                          <button
+                            className="btn btn-danger ms-2"
+                            onClick={() => {
+                              handleDelete(c._id);
+                            }}
+                          >
+                            Delete
+                          </button>
+                        </td>
+                      </tr>
+                    </>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+            <Modal
+              onCancel={() => setVisible(false)}
+              footer={null}
+              visible={visible}
+            >
+              <CategoryForm
+                value={updatedName}
+                setValue={setUpdatedName}
+                handleSubmit={handleUpdate}
+              />
+            </Modal>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default CreateCategory;
diff --git a/client/src/pages/Admin/CreateProduct.js b/client/src/pages/Admin/CreateProduct.js
new file mode 100644
index 00000000..8eb90800
--- /dev/null
+++ b/client/src/pages/Admin/CreateProduct.js
@@ -0,0 +1,180 @@
+import React, { useState, useEffect } from "react";
+import Layout from "./../../components/Layout/Layout";
+import AdminMenu from "./../../components/Layout/AdminMenu";
+import toast from "react-hot-toast";
+import axios from "axios";
+import { Select } from "antd";
+import { useNavigate } from "react-router-dom";
+const { Option } = Select;
+
+const CreateProduct = () => {
+  const navigate = useNavigate();
+  const [categories, setCategories] = useState([]);
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [price, setPrice] = useState("");
+  const [category, setCategory] = useState("");
+  const [quantity, setQuantity] = useState("");
+  const [shipping, setShipping] = useState("");
+  const [photo, setPhoto] = useState("");
+
+  //get all category
+  const getAllCategory = async () => {
+    try {
+      const { data } = await axios.get("/api/v1/category/get-category");
+      if (data?.success) {
+        setCategories(data?.category);
+      }
+    } catch (error) {
+      console.log(error);
+      toast.error("Something wwent wrong in getting catgeory");
+    }
+  };
+
+  useEffect(() => {
+    getAllCategory();
+  }, []);
+
+  //create product function
+  const handleCreate = async (e) => {
+    e.preventDefault();
+    try {
+      const productData = new FormData();
+      productData.append("name", name);
+      productData.append("description", description);
+      productData.append("price", price);
+      productData.append("quantity", quantity);
+      productData.append("photo", photo);
+      productData.append("category", category);
+      const { data } = axios.post(
+        "/api/v1/product/create-product",
+        productData
+      );
+      if (data?.success) {
+        toast.error(data?.message);
+      } else {
+        toast.success("Product Created Successfully");
+        navigate("/dashboard/admin/products");
+      }
+    } catch (error) {
+      console.log(error);
+      toast.error("something went wrong");
+    }
+  };
+
+  return (
+    <Layout title={"Dashboard - Create Product"}>
+      <div className="container-fluid m-3 p-3">
+        <div className="row">
+          <div className="col-md-3">
+            <AdminMenu />
+          </div>
+          <div className="col-md-9">
+            <h1>Create Product</h1>
+            <div className="m-1 w-75">
+              <Select
+                bordered={false}
+                placeholder="Select a category"
+                size="large"
+                showSearch
+                className="form-select mb-3"
+                onChange={(value) => {
+                  setCategory(value);
+                }}
+              >
+                {categories?.map((c) => (
+                  <Option key={c._id} value={c._id}>
+                    {c.name}
+                  </Option>
+                ))}
+              </Select>
+              <div className="mb-3">
+                <label className="btn btn-outline-secondary col-md-12">
+                  {photo ? photo.name : "Upload Photo"}
+                  <input
+                    type="file"
+                    name="photo"
+                    accept="image/*"
+                    onChange={(e) => setPhoto(e.target.files[0])}
+                    hidden
+                  />
+                </label>
+              </div>
+              <div className="mb-3">
+                {photo && (
+                  <div className="text-center">
+                    <img
+                      src={URL.createObjectURL(photo)}
+                      alt="product_photo"
+                      height={"200px"}
+                      className="img img-responsive"
+                    />
+                  </div>
+                )}
+              </div>
+              <div className="mb-3">
+                <input
+                  type="text"
+                  value={name}
+                  placeholder="write a name"
+                  className="form-control"
+                  onChange={(e) => setName(e.target.value)}
+                />
+              </div>
+              <div className="mb-3">
+                <textarea
+                  type="text"
+                  value={description}
+                  placeholder="write a description"
+                  className="form-control"
+                  onChange={(e) => setDescription(e.target.value)}
+                />
+              </div>
+
+              <div className="mb-3">
+                <input
+                  type="number"
+                  value={price}
+                  placeholder="write a Price"
+                  className="form-control"
+                  onChange={(e) => setPrice(e.target.value)}
+                />
+              </div>
+              <div className="mb-3">
+                <input
+                  type="number"
+                  value={quantity}
+                  placeholder="write a quantity"
+                  className="form-control"
+                  onChange={(e) => setQuantity(e.target.value)}
+                />
+              </div>
+              <div className="mb-3">
+                <Select
+                  bordered={false}
+                  placeholder="Select Shipping "
+                  size="large"
+                  showSearch
+                  className="form-select mb-3"
+                  onChange={(value) => {
+                    setShipping(value);
+                  }}
+                >
+                  <Option value="0">No</Option>
+                  <Option value="1">Yes</Option>
+                </Select>
+              </div>
+              <div className="mb-3">
+                <button className="btn btn-primary" onClick={handleCreate}>
+                  CREATE PRODUCT
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default CreateProduct;
diff --git a/client/src/pages/Admin/Products.js b/client/src/pages/Admin/Products.js
new file mode 100644
index 00000000..765e5b5c
--- /dev/null
+++ b/client/src/pages/Admin/Products.js
@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from "react";
+import AdminMenu from "../../components/Layout/AdminMenu";
+import Layout from "./../../components/Layout/Layout";
+import axios from "axios";
+import toast from "react-hot-toast";
+import { Link } from "react-router-dom";
+const Products = () => {
+  const [products, setProducts] = useState([]);
+
+  //getall products
+  const getAllProducts = async () => {
+    try {
+      const { data } = await axios.get("/api/v1/product/get-product");
+      setProducts(data.products);
+    } catch (error) {
+      console.log(error);
+      toast.error("Someething Went Wrong");
+    }
+  };
+
+  //lifecycle method
+  useEffect(() => {
+    getAllProducts();
+  }, []);
+  return (
+    <Layout>
+      <div className="row">
+        <div className="col-md-3">
+          <AdminMenu />
+        </div>
+        <div className="col-md-9 ">
+          <h1 className="text-center">All Products List</h1>
+          <div className="d-flex flex-wrap">
+            {products?.map((p) => (
+              <Link
+                key={p._id}
+                to={`/dashboard/admin/product/${p.slug}`}
+                className="product-link"
+              >
+                <div className="card m-2" style={{ width: "18rem" }}>
+                  <img
+                    src={`/api/v1/product/product-photo/${p._id}`}
+                    className="card-img-top"
+                    alt={p.name}
+                  />
+                  <div className="card-body">
+                    <h5 className="card-title">{p.name}</h5>
+                    <p className="card-text">{p.description}</p>
+                  </div>
+                </div>
+              </Link>
+            ))}
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default Products;
diff --git a/client/src/pages/Admin/UpdateProduct.js b/client/src/pages/Admin/UpdateProduct.js
new file mode 100644
index 00000000..9bc83fa1
--- /dev/null
+++ b/client/src/pages/Admin/UpdateProduct.js
@@ -0,0 +1,235 @@
+import React, { useState, useEffect } from "react";
+import Layout from "./../../components/Layout/Layout";
+import AdminMenu from "./../../components/Layout/AdminMenu";
+import toast from "react-hot-toast";
+import axios from "axios";
+import { Select } from "antd";
+import { useNavigate, useParams } from "react-router-dom";
+const { Option } = Select;
+
+const UpdateProduct = () => {
+  const navigate = useNavigate();
+  const params = useParams();
+  const [categories, setCategories] = useState([]);
+  const [name, setName] = useState("");
+  const [description, setDescription] = useState("");
+  const [price, setPrice] = useState("");
+  const [category, setCategory] = useState("");
+  const [quantity, setQuantity] = useState("");
+  const [shipping, setShipping] = useState("");
+  const [photo, setPhoto] = useState("");
+  const [id, setId] = useState("");
+
+  //get single product
+  const getSingleProduct = async () => {
+    try {
+      const { data } = await axios.get(
+        `/api/v1/product/get-product/${params.slug}`
+      );
+      setName(data.product.name);
+      setId(data.product._id);
+      setDescription(data.product.description);
+      setPrice(data.product.price);
+      setPrice(data.product.price);
+      setQuantity(data.product.quantity);
+      setShipping(data.product.shipping);
+      setCategory(data.product.category._id);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  useEffect(() => {
+    getSingleProduct();
+    //eslint-disable-next-line
+  }, []);
+  //get all category
+  const getAllCategory = async () => {
+    try {
+      const { data } = await axios.get("/api/v1/category/get-category");
+      if (data?.success) {
+        setCategories(data?.category);
+      }
+    } catch (error) {
+      console.log(error);
+      toast.error("Something wwent wrong in getting catgeory");
+    }
+  };
+
+  useEffect(() => {
+    getAllCategory();
+  }, []);
+
+  //create product function
+  const handleUpdate = async (e) => {
+    e.preventDefault();
+    try {
+      const productData = new FormData();
+      productData.append("name", name);
+      productData.append("description", description);
+      productData.append("price", price);
+      productData.append("quantity", quantity);
+      photo && productData.append("photo", photo);
+      productData.append("category", category);
+      const { data } = axios.put(
+        `/api/v1/product/update-product/${id}`,
+        productData
+      );
+      if (data?.success) {
+        toast.error(data?.message);
+      } else {
+        toast.success("Product Updated Successfully");
+        navigate("/dashboard/admin/products");
+      }
+    } catch (error) {
+      console.log(error);
+      toast.error("something went wrong");
+    }
+  };
+
+  //delete a product
+  const handleDelete = async () => {
+    try {
+      let answer = window.prompt("Are You Sure want to delete this product ? ");
+      if (!answer) return;
+      const { data } = await axios.delete(
+        `/api/v1/product/delete-product/${id}`
+      );
+      toast.success("Product DEleted Succfully");
+      navigate("/dashboard/admin/products");
+    } catch (error) {
+      console.log(error);
+      toast.error("Something went wrong");
+    }
+  };
+  return (
+    <Layout title={"Dashboard - Create Product"}>
+      <div className="container-fluid m-3 p-3">
+        <div className="row">
+          <div className="col-md-3">
+            <AdminMenu />
+          </div>
+          <div className="col-md-9">
+            <h1>Update Product</h1>
+            <div className="m-1 w-75">
+              <Select
+                bordered={false}
+                placeholder="Select a category"
+                size="large"
+                showSearch
+                className="form-select mb-3"
+                onChange={(value) => {
+                  setCategory(value);
+                }}
+                value={category}
+              >
+                {categories?.map((c) => (
+                  <Option key={c._id} value={c._id}>
+                    {c.name}
+                  </Option>
+                ))}
+              </Select>
+              <div className="mb-3">
+                <label className="btn btn-outline-secondary col-md-12">
+                  {photo ? photo.name : "Upload Photo"}
+                  <input
+                    type="file"
+                    name="photo"
+                    accept="image/*"
+                    onChange={(e) => setPhoto(e.target.files[0])}
+                    hidden
+                  />
+                </label>
+              </div>
+              <div className="mb-3">
+                {photo ? (
+                  <div className="text-center">
+                    <img
+                      src={URL.createObjectURL(photo)}
+                      alt="product_photo"
+                      height={"200px"}
+                      className="img img-responsive"
+                    />
+                  </div>
+                ) : (
+                  <div className="text-center">
+                    <img
+                      src={`/api/v1/product/product-photo/${id}`}
+                      alt="product_photo"
+                      height={"200px"}
+                      className="img img-responsive"
+                    />
+                  </div>
+                )}
+              </div>
+              <div className="mb-3">
+                <input
+                  type="text"
+                  value={name}
+                  placeholder="write a name"
+                  className="form-control"
+                  onChange={(e) => setName(e.target.value)}
+                />
+              </div>
+              <div className="mb-3">
+                <textarea
+                  type="text"
+                  value={description}
+                  placeholder="write a description"
+                  className="form-control"
+                  onChange={(e) => setDescription(e.target.value)}
+                />
+              </div>
+
+              <div className="mb-3">
+                <input
+                  type="number"
+                  value={price}
+                  placeholder="write a Price"
+                  className="form-control"
+                  onChange={(e) => setPrice(e.target.value)}
+                />
+              </div>
+              <div className="mb-3">
+                <input
+                  type="number"
+                  value={quantity}
+                  placeholder="write a quantity"
+                  className="form-control"
+                  onChange={(e) => setQuantity(e.target.value)}
+                />
+              </div>
+              <div className="mb-3">
+                <Select
+                  bordered={false}
+                  placeholder="Select Shipping "
+                  size="large"
+                  showSearch
+                  className="form-select mb-3"
+                  onChange={(value) => {
+                    setShipping(value);
+                  }}
+                  value={shipping ? "yes" : "No"}
+                >
+                  <Option value="0">No</Option>
+                  <Option value="1">Yes</Option>
+                </Select>
+              </div>
+              <div className="mb-3">
+                <button className="btn btn-primary" onClick={handleUpdate}>
+                  UPDATE PRODUCT
+                </button>
+              </div>
+              <div className="mb-3">
+                <button className="btn btn-danger" onClick={handleDelete}>
+                  DELETE PRODUCT
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default UpdateProduct;
diff --git a/client/src/pages/Admin/Users.js b/client/src/pages/Admin/Users.js
new file mode 100644
index 00000000..e5dfb681
--- /dev/null
+++ b/client/src/pages/Admin/Users.js
@@ -0,0 +1,22 @@
+import React from "react";
+import AdminMenu from "../../components/Layout/AdminMenu";
+import Layout from "./../../components/Layout/Layout";
+
+const Users = () => {
+  return (
+    <Layout title={"Dashboard - All Users"}>
+      <div className="container-fluid m-3 p-3">
+        <div className="row">
+          <div className="col-md-3">
+            <AdminMenu />
+          </div>
+          <div className="col-md-9">
+            <h1>All Users</h1>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default Users;
diff --git a/client/src/pages/Auth/ForgotPasssword.js b/client/src/pages/Auth/ForgotPasssword.js
new file mode 100644
index 00000000..3bbff059
--- /dev/null
+++ b/client/src/pages/Auth/ForgotPasssword.js
@@ -0,0 +1,85 @@
+import React, { useState } from "react";
+import Layout from "./../../components/Layout/Layout";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+import toast from "react-hot-toast";
+import "../../styles/AuthStyles.css";
+
+const ForgotPasssword = () => {
+  const [email, setEmail] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [answer, setAnswer] = useState("");
+
+  const navigate = useNavigate();
+
+  // form function
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const res = await axios.post("/api/v1/auth/forgot-password", {
+        email,
+        newPassword,
+        answer,
+      });
+      if (res && res.data.success) {
+        toast.success(res.data && res.data.message);
+
+        navigate("/login");
+      } else {
+        toast.error(res.data.message);
+      }
+    } catch (error) {
+      console.log(error);
+      toast.error("Something went wrong");
+    }
+  };
+  return (
+    <Layout title={"Forgot Password - Ecommerce APP"}>
+      <div className="form-container ">
+        <form onSubmit={handleSubmit}>
+          <h4 className="title">RESET PASSWORD</h4>
+
+          <div className="mb-3">
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="form-control"
+              id="exampleInputEmail1"
+              placeholder="Enter Your Email "
+              required
+            />
+          </div>
+          <div className="mb-3">
+            <input
+              type="text"
+              value={answer}
+              onChange={(e) => setAnswer(e.target.value)}
+              className="form-control"
+              id="exampleInputEmail1"
+              placeholder="Enter Your favorite Sport Name "
+              required
+            />
+          </div>
+          <div className="mb-3">
+            <input
+              type="password"
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+              className="form-control"
+              id="exampleInputPassword1"
+              placeholder="Enter Your Password"
+              required
+            />
+          </div>
+
+          <button type="submit" className="btn btn-primary">
+            RESET
+          </button>
+        </form>
+      </div>
+    </Layout>
+  );
+};
+
+export default ForgotPasssword;
diff --git a/client/src/pages/Auth/Login.js b/client/src/pages/Auth/Login.js
new file mode 100644
index 00000000..082c2df9
--- /dev/null
+++ b/client/src/pages/Auth/Login.js
@@ -0,0 +1,90 @@
+import React, { useState } from "react";
+import Layout from "./../../components/Layout/Layout";
+import axios from "axios";
+import { useNavigate, useLocation } from "react-router-dom";
+import toast from "react-hot-toast";
+import "../../styles/AuthStyles.css";
+import { useAuth } from "../../context/auth";
+const Login = () => {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [auth, setAuth] = useAuth();
+
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  // form function
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const res = await axios.post("/api/v1/auth/login", {
+        email,
+        password,
+      });
+      if (res && res.data.success) {
+        toast.success(res.data && res.data.message);
+        setAuth({
+          ...auth,
+          user: res.data.user,
+          token: res.data.token,
+        });
+        localStorage.setItem("auth", JSON.stringify(res.data));
+        navigate(location.state || "/");
+      } else {
+        toast.error(res.data.message);
+      }
+    } catch (error) {
+      console.log(error);
+      toast.error("Something went wrong");
+    }
+  };
+  return (
+    <Layout title="Register - Ecommer App">
+      <div className="form-container ">
+        <form onSubmit={handleSubmit}>
+          <h4 className="title">LOGIN FORM</h4>
+
+          <div className="mb-3">
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="form-control"
+              id="exampleInputEmail1"
+              placeholder="Enter Your Email "
+              required
+            />
+          </div>
+          <div className="mb-3">
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="form-control"
+              id="exampleInputPassword1"
+              placeholder="Enter Your Password"
+              required
+            />
+          </div>
+          <div className="mb-3">
+            <button
+              type="button"
+              className="btn btn-primary"
+              onClick={() => {
+                navigate("/forgot-password");
+              }}
+            >
+              Forgot Password
+            </button>
+          </div>
+
+          <button type="submit" className="btn btn-primary">
+            LOGIN
+          </button>
+        </form>
+      </div>
+    </Layout>
+  );
+};
+
+export default Login;
diff --git a/client/src/pages/Auth/Register.js b/client/src/pages/Auth/Register.js
new file mode 100644
index 00000000..2b0be2a6
--- /dev/null
+++ b/client/src/pages/Auth/Register.js
@@ -0,0 +1,121 @@
+import React, { useState } from "react";
+import Layout from "./../../components/Layout/Layout";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+import toast from "react-hot-toast";
+import "../../styles/AuthStyles.css";
+const Register = () => {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [phone, setPhone] = useState("");
+  const [address, setAddress] = useState("");
+  const [answer, setAnswer] = useState("");
+  const navigate = useNavigate();
+
+  // form function
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const res = await axios.post("/api/v1/auth/register", {
+        name,
+        email,
+        password,
+        phone,
+        address,
+        answer,
+      });
+      if (res && res.data.success) {
+        toast.success(res.data && res.data.message);
+        navigate("/login");
+      } else {
+        toast.error(res.data.message);
+      }
+    } catch (error) {
+      console.log(error);
+      toast.error("Something went wrong");
+    }
+  };
+
+  return (
+    <Layout title="Register - Ecommer App">
+      <div className="form-container ">
+        <form onSubmit={handleSubmit}>
+          <h4 className="title">REGISTER FORM</h4>
+          <div className="mb-3">
+            <input
+              type="text"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              className="form-control"
+              id="exampleInputEmail1"
+              placeholder="Enter Your Name"
+              required
+              autoFocus
+            />
+          </div>
+          <div className="mb-3">
+            <input
+              type="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="form-control"
+              id="exampleInputEmail1"
+              placeholder="Enter Your Email "
+              required
+            />
+          </div>
+          <div className="mb-3">
+            <input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              className="form-control"
+              id="exampleInputPassword1"
+              placeholder="Enter Your Password"
+              required
+            />
+          </div>
+          <div className="mb-3">
+            <input
+              type="text"
+              value={phone}
+              onChange={(e) => setPhone(e.target.value)}
+              className="form-control"
+              id="exampleInputEmail1"
+              placeholder="Enter Your Phone"
+              required
+            />
+          </div>
+          <div className="mb-3">
+            <input
+              type="text"
+              value={address}
+              onChange={(e) => setAddress(e.target.value)}
+              className="form-control"
+              id="exampleInputEmail1"
+              placeholder="Enter Your Address"
+              required
+            />
+          </div>
+          <div className="mb-3">
+            <input
+              type="text"
+              value={answer}
+              onChange={(e) => setAnswer(e.target.value)}
+              className="form-control"
+              id="exampleInputEmail1"
+              placeholder="What is Your Favorite sports"
+              required
+            />
+          </div>
+          <button type="submit" className="btn btn-primary">
+            REGISTER
+          </button>
+        </form>
+      </div>
+    </Layout>
+  );
+};
+
+export default Register;
diff --git a/client/src/pages/CartPage.js b/client/src/pages/CartPage.js
new file mode 100644
index 00000000..29b5496c
--- /dev/null
+++ b/client/src/pages/CartPage.js
@@ -0,0 +1,130 @@
+import React from "react";
+import Layout from "./../components/Layout/Layout";
+import { useCart } from "../context/cart";
+import { useAuth } from "../context/auth";
+import { useNavigate } from "react-router-dom";
+const CartPage = () => {
+  const [auth, setAuth] = useAuth();
+  const [cart, setCart] = useCart();
+  const navigate = useNavigate();
+
+  //total price
+  const totalPrice = () => {
+    try {
+      let total = 0;
+      cart?.map((item) => {
+        total = total + item.price;
+      });
+      return total.toLocaleString("en-US", {
+        style: "currency",
+        currency: "USD",
+      });
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  //detele item
+  const removeCartItem = (pid) => {
+    try {
+      let myCart = [...cart];
+      let index = myCart.findIndex((item) => item._id === pid);
+      myCart.splice(index, 1);
+      setCart(myCart);
+      localStorage.setItem("cart", JSON.stringify(myCart));
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  return (
+    <Layout>
+      <div className="container">
+        <div className="row">
+          <div className="col-md-12">
+            <h1 className="text-center bg-light p-2 mb-1">
+              {`Hello ${auth?.token && auth?.user?.name}`}
+            </h1>
+            <h4 className="text-center">
+              {cart?.length
+                ? `You Have ${cart.length} items in your cart ${
+                    auth?.token ? "" : "please login to checkout"
+                  }`
+                : " Your Cart Is Empty"}
+            </h4>
+          </div>
+        </div>
+        <div className="row">
+          <div className="col-md-8">
+            {cart?.map((p) => (
+              <div className="row mb-2 p-3 card flex-row">
+                <div className="col-md-4">
+                  <img
+                    src={`/api/v1/product/product-photo/${p._id}`}
+                    className="card-img-top"
+                    alt={p.name}
+                    width="100px"
+                    height={"100px"}
+                  />
+                </div>
+                <div className="col-md-8">
+                  <p>{p.name}</p>
+                  <p>{p.description.substring(0, 30)}</p>
+                  <p>Price : {p.price}</p>
+                  <button
+                    className="btn btn-danger"
+                    onClick={() => removeCartItem(p._id)}
+                  >
+                    Remove
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="col-md-4 text-center">
+            <h2>Cart Summary</h2>
+            <p>Total | Checkout | Payment</p>
+            <hr />
+            <h4>Total : {totalPrice()} </h4>
+            {auth?.user?.address ? (
+              <>
+                <div className="mb-3">
+                  <h4>Current Address</h4>
+                  <h5>{auth?.user?.address}</h5>
+                  <button
+                    className="btn btn-outline-warning"
+                    onClick={() => navigate("/dashboard/user/profile")}
+                  >
+                    Update Address
+                  </button>
+                </div>
+              </>
+            ) : (
+              <div className="mb-3">
+                {auth?.token ? (
+                  <button
+                    className="btn btn-outline-warning"
+                    onClick={() => navigate("/dashboard/user/profile")}
+                  >
+                    Update Address
+                  </button>
+                ) : (
+                  <button
+                    className="btn btn-outline-warning"
+                    onClick={() =>
+                      navigate("/login", {
+                        state: "/cart",
+                      })
+                    }
+                  >
+                    Plase Login to checkout
+                  </button>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default CartPage;
diff --git a/client/src/pages/Categories.js b/client/src/pages/Categories.js
new file mode 100644
index 00000000..0e106dee
--- /dev/null
+++ b/client/src/pages/Categories.js
@@ -0,0 +1,24 @@
+import React, { useState, useEffect } from "react";
+import { Link } from "react-router-dom";
+import useCategory from "../hooks/useCategory";
+import Layout from "../components/Layout/Layout";
+const Categories = () => {
+  const categories = useCategory();
+  return (
+    <Layout title={"All Categories"}>
+      <div className="container">
+        <div className="row">
+          {categories.map((c) => (
+            <div className="col-md-6 mt-5 mb-3 gx-3 gy-3" key={c._id}>
+              <Link to={`/category/${c.slug}`} className="btn btn-primary">
+                {c.name}
+              </Link>
+            </div>
+          ))}
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default Categories;
diff --git a/client/src/pages/CategoryProduct.js b/client/src/pages/CategoryProduct.js
new file mode 100644
index 00000000..2f7ea876
--- /dev/null
+++ b/client/src/pages/CategoryProduct.js
@@ -0,0 +1,84 @@
+import React, { useState, useEffect } from "react";
+import Layout from "../components/Layout/Layout";
+import { useParams, useNavigate } from "react-router-dom";
+import axios from "axios";
+const CategoryProduct = () => {
+  const params = useParams();
+  const navigate = useNavigate();
+  const [products, setProducts] = useState([]);
+  const [category, setCategory] = useState([]);
+
+  useEffect(() => {
+    if (params?.slug) getPrductsByCat();
+  }, [params?.slug]);
+  const getPrductsByCat = async () => {
+    try {
+      const { data } = await axios.get(
+        `/api/v1/product/product-category/${params.slug}`
+      );
+      setProducts(data?.products);
+      setCategory(data?.category);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  return (
+    <Layout>
+      <div className="container mt-3">
+        <h4 className="text-center">Category - {category?.name}</h4>
+        <h6 className="text-center">{products?.length} result found </h6>
+        <div className="row">
+          <div className="col-md-9 offset-1">
+            <div className="d-flex flex-wrap">
+              {products?.map((p) => (
+                <div
+                  className="card m-2"
+                  style={{ width: "18rem" }}
+                  key={p._id}
+                >
+                  <img
+                    src={`/api/v1/product/product-photo/${p._id}`}
+                    className="card-img-top"
+                    alt={p.name}
+                  />
+                  <div className="card-body">
+                    <h5 className="card-title">{p.name}</h5>
+                    <p className="card-text">
+                      {p.description.substring(0, 30)}...
+                    </p>
+                    <p className="card-text"> $ {p.price}</p>
+                    <button
+                      className="btn btn-primary ms-1"
+                      onClick={() => navigate(`/product/${p.slug}`)}
+                    >
+                      More Details
+                    </button>
+                    <button className="btn btn-secondary ms-1">
+                      ADD TO CART
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+            {/* <div className="m-2 p-3">
+            {products && products.length < total && (
+              <button
+                className="btn btn-warning"
+                onClick={(e) => {
+                  e.preventDefault();
+                  setPage(page + 1);
+                }}
+              >
+                {loading ? "Loading ..." : "Loadmore"}
+              </button>
+            )}
+          </div> */}
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default CategoryProduct;
diff --git a/client/src/pages/Contact.js b/client/src/pages/Contact.js
index bf457f77..3757a398 100644
--- a/client/src/pages/Contact.js
+++ b/client/src/pages/Contact.js
@@ -3,7 +3,7 @@ import Layout from "./../components/Layout/Layout";
 import { BiMailSend, BiPhoneCall, BiSupport } from "react-icons/bi";
 const Contact = () => {
   return (
-    <Layout>
+    <Layout title={"Contact us"}>
       <div className="row contactus ">
         <div className="col-md-6 ">
           <img
diff --git a/client/src/pages/HomePage.js b/client/src/pages/HomePage.js
index 787b8dd6..f2263faf 100644
--- a/client/src/pages/HomePage.js
+++ b/client/src/pages/HomePage.js
@@ -1,10 +1,197 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Layout from "./../components/Layout/Layout";
-
+import { useNavigate } from "react-router-dom";
+import axios from "axios";
+import { Checkbox, Radio } from "antd";
+import { Prices } from "../components/Prices";
+import { useCart } from "../context/cart";
+import toast from "react-hot-toast";
 const HomePage = () => {
+  const navigate = useNavigate();
+  const [cart, setCart] = useCart();
+  const [products, setProducts] = useState([]);
+  const [categories, setCategories] = useState([]);
+  const [checked, setChecked] = useState([]);
+  const [radio, setRadio] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [loading, setLoading] = useState(false);
+
+  //get all cat
+  const getAllCategory = async () => {
+    try {
+      const { data } = await axios.get("/api/v1/category/get-category");
+      if (data?.success) {
+        setCategories(data?.category);
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  useEffect(() => {
+    getAllCategory();
+    getTotal();
+  }, []);
+  //get products
+  const getAllProducts = async () => {
+    try {
+      setLoading(true);
+      const { data } = await axios.get(`/api/v1/product/product-list/${page}`);
+      setLoading(false);
+      setProducts(data.products);
+    } catch (error) {
+      setLoading(false);
+      console.log(error);
+    }
+  };
+
+  //getTOtal COunt
+  const getTotal = async () => {
+    try {
+      const { data } = await axios.get("/api/v1/product/product-count");
+      setTotal(data?.total);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  useEffect(() => {
+    if (page === 1) return;
+    loadMore();
+  }, [page]);
+  //load more
+  const loadMore = async () => {
+    try {
+      setLoading(true);
+      const { data } = await axios.get(`/api/v1/product/product-list/${page}`);
+      setLoading(false);
+      setProducts([...products, ...data?.products]);
+    } catch (error) {
+      console.log(error);
+      setLoading(false);
+    }
+  };
+
+  // filter by cat
+  const handleFilter = (value, id) => {
+    let all = [...checked];
+    if (value) {
+      all.push(id);
+    } else {
+      all = all.filter((c) => c !== id);
+    }
+    setChecked(all);
+  };
+  useEffect(() => {
+    if (!checked.length || !radio.length) getAllProducts();
+  }, [checked.length, radio.length]);
+
+  useEffect(() => {
+    if (checked.length || radio.length) filterProduct();
+  }, [checked, radio]);
+
+  //get filterd product
+  const filterProduct = async () => {
+    try {
+      const { data } = await axios.post("/api/v1/product/product-filters", {
+        checked,
+        radio,
+      });
+      setProducts(data?.products);
+    } catch (error) {
+      console.log(error);
+    }
+  };
   return (
-    <Layout>
-      <h1>HomePage</h1>
+    <Layout title={"ALl Products - Best offers "}>
+      <div className="container-fluid row mt-3">
+        <div className="col-md-2">
+          <h4 className="text-center">Filter By Category</h4>
+          <div className="d-flex flex-column">
+            {categories?.map((c) => (
+              <Checkbox
+                key={c._id}
+                onChange={(e) => handleFilter(e.target.checked, c._id)}
+              >
+                {c.name}
+              </Checkbox>
+            ))}
+          </div>
+          {/* price filter */}
+          <h4 className="text-center mt-4">Filter By Price</h4>
+          <div className="d-flex flex-column">
+            <Radio.Group onChange={(e) => setRadio(e.target.value)}>
+              {Prices?.map((p) => (
+                <div key={p._id}>
+                  <Radio value={p.array}>{p.name}</Radio>
+                </div>
+              ))}
+            </Radio.Group>
+          </div>
+          <div className="d-flex flex-column">
+            <button
+              className="btn btn-danger"
+              onClick={() => window.location.reload()}
+            >
+              RESET FILTERS
+            </button>
+          </div>
+        </div>
+        <div className="col-md-9 offset-1">
+          <h1 className="text-center">All Products</h1>
+          <div className="d-flex flex-wrap">
+            {products?.map((p) => (
+              <div className="card m-2" style={{ width: "18rem" }} key={p._id}>
+                <img
+                  src={`/api/v1/product/product-photo/${p._id}`}
+                  className="card-img-top"
+                  alt={p.name}
+                />
+                <div className="card-body">
+                  <h5 className="card-title">{p.name}</h5>
+                  <p className="card-text">
+                    {p.description.substring(0, 30)}...
+                  </p>
+                  <p className="card-text"> $ {p.price}</p>
+                  <button
+                    className="btn btn-primary ms-1"
+                    onClick={() => navigate(`/product/${p.slug}`)}
+                  >
+                    More Details
+                  </button>
+                  <button
+                    className="btn btn-secondary ms-1"
+                    onClick={() => {
+                      setCart([...cart, p]);
+                      localStorage.setItem(
+                        "cart",
+                        JSON.stringify([...cart, p])
+                      );
+                      toast.success("Item Added to cart");
+                    }}
+                  >
+                    ADD TO CART
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="m-2 p-3">
+            {products && products.length < total && (
+              <button
+                className="btn btn-warning"
+                onClick={(e) => {
+                  e.preventDefault();
+                  setPage(page + 1);
+                }}
+              >
+                {loading ? "Loading ..." : "Loadmore"}
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
     </Layout>
   );
 };
diff --git a/client/src/pages/Pagenotfound.js b/client/src/pages/Pagenotfound.js
index bab7890d..91105395 100644
--- a/client/src/pages/Pagenotfound.js
+++ b/client/src/pages/Pagenotfound.js
@@ -4,7 +4,7 @@ import Layout from "./../components/Layout/Layout";
 
 const Pagenotfound = () => {
   return (
-    <Layout>
+    <Layout title={"go back- page not found"}>
       <div className="pnf">
         <h1 className="pnf-title">404</h1>
         <h2 className="pnf-heading">Oops ! Page Not Found</h2>
diff --git a/client/src/pages/Policy.js b/client/src/pages/Policy.js
index 07f41087..5f4ad181 100644
--- a/client/src/pages/Policy.js
+++ b/client/src/pages/Policy.js
@@ -3,7 +3,7 @@ import Layout from "./../components/Layout/Layout";
 
 const Policy = () => {
   return (
-    <Layout>
+    <Layout title={"Privacy Policy"}>
       <div className="row contactus ">
         <div className="col-md-6 ">
           <img
diff --git a/client/src/pages/ProductDetails.js b/client/src/pages/ProductDetails.js
new file mode 100644
index 00000000..47c80584
--- /dev/null
+++ b/client/src/pages/ProductDetails.js
@@ -0,0 +1,93 @@
+import React, { useState, useEffect } from "react";
+import Layout from "./../components/Layout/Layout";
+import axios from "axios";
+import { useParams, useNavigate } from "react-router-dom";
+const ProductDetails = () => {
+  const params = useParams();
+  const navigate = useNavigate();
+  const [product, setProduct] = useState({});
+  const [relatedProducts, setRelatedProducts] = useState([]);
+
+  //initalp details
+  useEffect(() => {
+    if (params?.slug) getProduct();
+  }, [params?.slug]);
+  //getProduct
+  const getProduct = async () => {
+    try {
+      const { data } = await axios.get(
+        `/api/v1/product/get-product/${params.slug}`
+      );
+      setProduct(data?.product);
+      getSimilarProduct(data?.product._id, data?.product.category._id);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  //get similar product
+  const getSimilarProduct = async (pid, cid) => {
+    try {
+      const { data } = await axios.get(
+        `/api/v1/product/related-product/${pid}/${cid}`
+      );
+      setRelatedProducts(data?.products);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+  return (
+    <Layout>
+      <div className="row container mt-2">
+        <div className="col-md-6">
+          <img
+            src={`/api/v1/product/product-photo/${product._id}`}
+            className="card-img-top"
+            alt={product.name}
+            height="300"
+            width={"350px"}
+          />
+        </div>
+        <div className="col-md-6 ">
+          <h1 className="text-center">Product Details</h1>
+          <h6>Name : {product.name}</h6>
+          <h6>Description : {product.description}</h6>
+          <h6>Price : {product.price}</h6>
+          <h6>Category : {product?.category?.name}</h6>
+          <button class="btn btn-secondary ms-1">ADD TO CART</button>
+        </div>
+      </div>
+      <hr />
+      <div className="row container">
+        <h6>Similar Products</h6>
+        {relatedProducts.length < 1 && (
+          <p className="text-center">No Similar Products found</p>
+        )}
+        <div className="d-flex flex-wrap">
+          {relatedProducts?.map((p) => (
+            <div className="card m-2" style={{ width: "18rem" }}>
+              <img
+                src={`/api/v1/product/product-photo/${p?._id}`}
+                className="card-img-top"
+                alt={p.name}
+              />
+              <div className="card-body">
+                <h5 className="card-title">{p.name}</h5>
+                <p className="card-text">{p.description.substring(0, 30)}...</p>
+                <p className="card-text"> $ {p.price}</p>
+                <button
+                  className="btn btn-primary ms-1"
+                  onClick={() => navigate(`/product/${p.slug}`)}
+                >
+                  More Details
+                </button>
+                <button class="btn btn-secondary ms-1">ADD TO CART</button>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default ProductDetails;
diff --git a/client/src/pages/Search.js b/client/src/pages/Search.js
new file mode 100644
index 00000000..94693816
--- /dev/null
+++ b/client/src/pages/Search.js
@@ -0,0 +1,42 @@
+import React from "react";
+import Layout from "./../components/Layout/Layout";
+import { useSearch } from "../context/search";
+const Search = () => {
+  const [values, setValues] = useSearch();
+  return (
+    <Layout title={"Search results"}>
+      <div className="container">
+        <div className="text-center">
+          <h1>Search Resuts</h1>
+          <h6>
+            {values?.results.length < 1
+              ? "No Products Found"
+              : `Found ${values?.results.length}`}
+          </h6>
+          <div className="d-flex flex-wrap mt-4">
+            {values?.results.map((p) => (
+              <div className="card m-2" style={{ width: "18rem" }}>
+                <img
+                  src={`/api/v1/product/product-photo/${p._id}`}
+                  className="card-img-top"
+                  alt={p.name}
+                />
+                <div className="card-body">
+                  <h5 className="card-title">{p.name}</h5>
+                  <p className="card-text">
+                    {p.description.substring(0, 30)}...
+                  </p>
+                  <p className="card-text"> $ {p.price}</p>
+                  <button class="btn btn-primary ms-1">More Details</button>
+                  <button class="btn btn-secondary ms-1">ADD TO CART</button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default Search;
diff --git a/client/src/pages/user/Dashboard.js b/client/src/pages/user/Dashboard.js
new file mode 100644
index 00000000..950c56a5
--- /dev/null
+++ b/client/src/pages/user/Dashboard.js
@@ -0,0 +1,27 @@
+import React from "react";
+import Layout from "../../components/Layout/Layout";
+import UserMenu from "../../components/Layout/UserMenu";
+import { useAuth } from "../../context/auth";
+const Dashboard = () => {
+  const [auth] = useAuth();
+  return (
+    <Layout title={"Dashboard - Ecommerce App"}>
+      <div className="container-flui m-3 p-3">
+        <div className="row">
+          <div className="col-md-3">
+            <UserMenu />
+          </div>
+          <div className="col-md-9">
+            <div className="card w-75 p-3">
+              <h3>{auth?.user?.name}</h3>
+              <h3>{auth?.user?.email}</h3>
+              <h3>{auth?.user?.address}</h3>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default Dashboard;
diff --git a/client/src/pages/user/Orders.js b/client/src/pages/user/Orders.js
new file mode 100644
index 00000000..d65545fe
--- /dev/null
+++ b/client/src/pages/user/Orders.js
@@ -0,0 +1,22 @@
+import React from "react";
+import UserMenu from "../../components/Layout/UserMenu";
+import Layout from "./../../components/Layout/Layout";
+
+const Orders = () => {
+  return (
+    <Layout title={"Your Orders"}>
+      <div className="container-flui p-3 m-3">
+        <div className="row">
+          <div className="col-md-3">
+            <UserMenu />
+          </div>
+          <div className="col-md-9">
+            <h1>All Orders</h1>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default Orders;
diff --git a/client/src/pages/user/Profile.js b/client/src/pages/user/Profile.js
new file mode 100644
index 00000000..0f4517e0
--- /dev/null
+++ b/client/src/pages/user/Profile.js
@@ -0,0 +1,128 @@
+import React, { useState, useEffect } from "react";
+import UserMenu from "../../components/Layout/UserMenu";
+import Layout from "./../../components/Layout/Layout";
+import { useAuth } from "../../context/auth";
+import toast from "react-hot-toast";
+import axios from "axios";
+const Profile = () => {
+  //context
+  const [auth, setAuth] = useAuth();
+  //state
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [phone, setPhone] = useState("");
+  const [address, setAddress] = useState("");
+
+  //get user data
+  useEffect(() => {
+    const { email, name, phone, address } = auth?.user;
+    setName(name);
+    setPhone(phone);
+    setEmail(email);
+    setAddress(address);
+  }, [auth?.user]);
+
+  // form function
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const { data } = await axios.put("/api/v1/auth/profile", {
+        name,
+        email,
+        password,
+        phone,
+        address,
+      });
+      if (data?.errro) {
+        toast.error(data?.error);
+      } else {
+        setAuth({ ...auth, user: data?.updatedUser });
+        let ls = localStorage.getItem("auth");
+        ls = JSON.parse(ls);
+        ls.user = data.updatedUser;
+        localStorage.setItem("auth", JSON.stringify(ls));
+        toast.success("Profile Updated Successfully");
+      }
+    } catch (error) {
+      console.log(error);
+      toast.error("Something went wrong");
+    }
+  };
+  return (
+    <Layout title={"Your Profile"}>
+      <div className="container-fluid m-3 p-3">
+        <div className="row">
+          <div className="col-md-3">
+            <UserMenu />
+          </div>
+          <div className="col-md-9">
+            <div className="form-container ">
+              <form onSubmit={handleSubmit}>
+                <h4 className="title">USER PROFILE</h4>
+                <div className="mb-3">
+                  <input
+                    type="text"
+                    value={name}
+                    onChange={(e) => setName(e.target.value)}
+                    className="form-control"
+                    id="exampleInputEmail1"
+                    placeholder="Enter Your Name"
+                    autoFocus
+                  />
+                </div>
+                <div className="mb-3">
+                  <input
+                    type="email"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    className="form-control"
+                    id="exampleInputEmail1"
+                    placeholder="Enter Your Email "
+                    disabled
+                  />
+                </div>
+                <div className="mb-3">
+                  <input
+                    type="password"
+                    value={password}
+                    onChange={(e) => setPassword(e.target.value)}
+                    className="form-control"
+                    id="exampleInputPassword1"
+                    placeholder="Enter Your Password"
+                  />
+                </div>
+                <div className="mb-3">
+                  <input
+                    type="text"
+                    value={phone}
+                    onChange={(e) => setPhone(e.target.value)}
+                    className="form-control"
+                    id="exampleInputEmail1"
+                    placeholder="Enter Your Phone"
+                  />
+                </div>
+                <div className="mb-3">
+                  <input
+                    type="text"
+                    value={address}
+                    onChange={(e) => setAddress(e.target.value)}
+                    className="form-control"
+                    id="exampleInputEmail1"
+                    placeholder="Enter Your Address"
+                  />
+                </div>
+
+                <button type="submit" className="btn btn-primary">
+                  UPDATE
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default Profile;
diff --git a/client/src/styles/AuthStyles.css b/client/src/styles/AuthStyles.css
new file mode 100644
index 00000000..bf4ec0f2
--- /dev/null
+++ b/client/src/styles/AuthStyles.css
@@ -0,0 +1,53 @@
+/* ===================================
+========= register page  */
+.form-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 70vh;
+  flex-direction: column;
+  background-color: #ffdee9;
+  background-image: linear-gradient(0deg, #ffdee9 0%, #b5fffc 100%);
+}
+
+.form-container form {
+  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+  padding: 20px;
+  background-color: #fff;
+}
+
+.form-container form .title {
+  text-align: center;
+  margin-bottom: 15px;
+  font-weight: bold;
+  font-family: "Playfair Display", serif;
+}
+
+.form-container form input {
+  border: none;
+  border-bottom: 1px solid #000;
+  border-radius: 0;
+}
+
+.form-container form button {
+  border: 1px solid black;
+  border-radius: 0;
+  background-color: #000;
+  color: white;
+  width: 250px;
+}
+
+.form-container form button:hover {
+  border: 1px solid black;
+  background: #000000; /* fallback for old browsers */
+  background: -webkit-linear-gradient(
+    to right,
+    #434343,
+    #000000
+  ); /* Chrome 10-25, Safari 5.1-6 */
+  background: linear-gradient(
+    to right,
+    #434343,
+    #000000
+  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+}
diff --git a/controllers/authController.js b/controllers/authController.js
index 3fd99b71..a221c3ca 100644
--- a/controllers/authController.js
+++ b/controllers/authController.js
@@ -4,29 +4,32 @@ import JWT from "jsonwebtoken";
 
 export const registerController = async (req, res) => {
   try {
-    const { name, email, password, phone, address } = req.body;
+    const { name, email, password, phone, address, answer } = req.body;
     //validations
     if (!name) {
       return res.send({ error: "Name is Required" });
     }
     if (!email) {
-      return res.send({ error: "Email is Required" });
+      return res.send({ message: "Email is Required" });
     }
     if (!password) {
-      return res.send({ error: "Password is Required" });
+      return res.send({ message: "Password is Required" });
     }
     if (!phone) {
-      return res.send({ error: "Phone no is Required" });
+      return res.send({ message: "Phone no is Required" });
     }
     if (!address) {
-      return res.send({ error: "Address is Required" });
+      return res.send({ message: "Address is Required" });
+    }
+    if (!answer) {
+      return res.send({ message: "Answer is Required" });
     }
     //check user
     const exisitingUser = await userModel.findOne({ email });
     //exisiting user
     if (exisitingUser) {
       return res.status(200).send({
-        success: true,
+        success: false,
         message: "Already Register please login",
       });
     }
@@ -39,6 +42,7 @@ export const registerController = async (req, res) => {
       phone,
       address,
       password: hashedPassword,
+      answer,
     }).save();
 
     res.status(201).send({
@@ -94,7 +98,8 @@ export const loginController = async (req, res) => {
         name: user.name,
         email: user.email,
         phone: user.phone,
-        adddress: user.address,
+        address: user.address,
+        role: user.role,
       },
       token,
     });
@@ -108,6 +113,45 @@ export const loginController = async (req, res) => {
   }
 };
 
+//forgotPasswordController
+
+export const forgotPasswordController = async (req, res) => {
+  try {
+    const { email, answer, newPassword } = req.body;
+    if (!email) {
+      res.status(400).send({ message: "Emai is required" });
+    }
+    if (!answer) {
+      res.status(400).send({ message: "answer is required" });
+    }
+    if (!newPassword) {
+      res.status(400).send({ message: "New Password is required" });
+    }
+    //check
+    const user = await userModel.findOne({ email, answer });
+    //validation
+    if (!user) {
+      return res.status(404).send({
+        success: false,
+        message: "Wrong Email Or Answer",
+      });
+    }
+    const hashed = await hashPassword(newPassword);
+    await userModel.findByIdAndUpdate(user._id, { password: hashed });
+    res.status(200).send({
+      success: true,
+      message: "Password Reset Successfully",
+    });
+  } catch (error) {
+    console.log(error);
+    res.status(500).send({
+      success: false,
+      message: "Something went wrong",
+      error,
+    });
+  }
+};
+
 //test controller
 export const testController = (req, res) => {
   try {
@@ -117,3 +161,38 @@ export const testController = (req, res) => {
     res.send({ error });
   }
 };
+
+//update prfole
+export const updateProfileController = async (req, res) => {
+  try {
+    const { name, email, password, address, phone } = req.body;
+    const user = await userModel.findById(req.user._id);
+    //password
+    if (password && password.length < 6) {
+      return res.json({ error: "Passsword is required and 6 character long" });
+    }
+    const hashedPassword = password ? await hashPassword(password) : undefined;
+    const updatedUser = await userModel.findByIdAndUpdate(
+      req.user._id,
+      {
+        name: name || user.name,
+        password: hashedPassword || user.password,
+        phone: phone || user.phone,
+        address: address || user.address,
+      },
+      { new: true }
+    );
+    res.status(200).send({
+      success: true,
+      message: "Profile Updated SUccessfully",
+      updatedUser,
+    });
+  } catch (error) {
+    console.log(error);
+    res.status(400).send({
+      success: false,
+      message: "Error WHile Update profile",
+      error,
+    });
+  }
+};
diff --git a/controllers/categoryController.js b/controllers/categoryController.js
new file mode 100644
index 00000000..c66b4a75
--- /dev/null
+++ b/controllers/categoryController.js
@@ -0,0 +1,115 @@
+import categoryModel from "../models/categoryModel.js";
+import slugify from "slugify";
+export const createCategoryController = async (req, res) => {
+  try {
+    const { name } = req.body;
+    if (!name) {
+      return res.status(401).send({ message: "Name is required" });
+    }
+    const existingCategory = await categoryModel.findOne({ name });
+    if (existingCategory) {
+      return res.status(200).send({
+        success: false,
+        message: "Category Already Exisits",
+      });
+    }
+    const category = await new categoryModel({
+      name,
+      slug: slugify(name),
+    }).save();
+    res.status(201).send({
+      success: true,
+      message: "new category created",
+      category,
+    });
+  } catch (error) {
+    console.log(error);
+    res.status(500).send({
+      success: false,
+      errro,
+      message: "Errro in Category",
+    });
+  }
+};
+
+//update category
+export const updateCategoryController = async (req, res) => {
+  try {
+    const { name } = req.body;
+    const { id } = req.params;
+    const category = await categoryModel.findByIdAndUpdate(
+      id,
+      { name, slug: slugify(name) },
+      { new: true }
+    );
+    res.status(200).send({
+      success: true,
+      messsage: "Category Updated Successfully",
+      category,
+    });
+  } catch (error) {
+    console.log(error);
+    res.status(500).send({
+      success: false,
+      error,
+      message: "Error while updating category",
+    });
+  }
+};
+
+// get all cat
+export const categoryControlller = async (req, res) => {
+  try {
+    const category = await categoryModel.find({});
+    res.status(200).send({
+      success: true,
+      message: "All Categories List",
+      category,
+    });
+  } catch (error) {
+    console.log(error);
+    res.status(500).send({
+      success: false,
+      error,
+      message: "Error while getting all categories",
+    });
+  }
+};
+
+// single category
+export const singleCategoryController = async (req, res) => {
+  try {
+    const category = await categoryModel.findOne({ slug: req.params.slug });
+    res.status(200).send({
+      success: true,
+      message: "Get SIngle Category SUccessfully",
+      category,
+    });
+  } catch (error) {
+    console.log(error);
+    res.status(500).send({
+      success: false,
+      error,
+      message: "Error While getting Single Category",
+    });
+  }
+};
+
+//delete category
+export const deleteCategoryCOntroller = async (req, res) => {
+  try {
+    const { id } = req.params;
+    await categoryModel.findByIdAndDelete(id);
+    res.status(200).send({
+      success: true,
+      message: "Categry Deleted Successfully",
+    });
+  } catch (error) {
+    console.log(error);
+    res.status(500).send({
+      success: false,
+      message: "error while deleting category",
+      error,
+    });
+  }
+};
diff --git a/controllers/productController.js b/controllers/productController.js
new file mode 100644
index 00000000..d2e2034c
--- /dev/null
+++ b/controllers/productController.js
@@ -0,0 +1,313 @@
+import productModel from "../models/productModel.js";
+import categoryModel from "../models/categoryModel.js";
+import fs from "fs";
+import slugify from "slugify";
+
+export const createProductController = async (req, res) => {
+  try {
+    const { name, description, price, category, quantity, shipping } =
+      req.fields;
+    const { photo } = req.files;
+    //alidation
+    switch (true) {
+      case !name:
+        return res.status(500).send({ error: "Name is Required" });
+      case !description:
+        return res.status(500).send({ error: "Description is Required" });
+      case !price:
+        return res.status(500).send({ error: "Price is Required" });
+      case !category:
+        return res.status(500).send({ error: "Category is Required" });
+      case !quantity:
+        return res.status(500).send({ error: "Quantity is Required" });
+      case photo && photo.size > 1000000:
+        return res
+          .status(500)
+          .send({ error: "photo is Required and should be less then 1mb" });
+    }
+
+    const products = new productModel({ ...req.fields, slug: slugify(name) });
+    if (photo) {
+      products.photo.data = fs.readFileSync(photo.path);
+      products.photo.contentType = photo.type;
+    }
+    await products.save();
+    res.status(201).send({
+      success: true,
+      message: "Product Created Successfully",
+      products,
+    });
+  } catch (error) {
+    console.log(error);
+    res.status(500).send({
+      success: false,
+      error,
+      message: "Error in crearing product",
+    });
+  }
+};
+
+//get all products
+export const getProductController = async (req, res) => {
+  try {
+    const products = await productModel
+      .find({})
+      .populate("category")
+      .select("-photo")
+      .limit(12)
+      .sort({ createdAt: -1 });
+    res.status(200).send({
+      success: true,
+      counTotal: products.length,
+      message: "ALlProducts ",
+      products,
+    });
+  } catch (error) {
+    console.log(error);
+    res.status(500).send({
+      success: false,
+      message: "Erorr in getting products",
+      error: error.message,
+    });
+  }
+};
+// get single product
+export const getSingleProductController = async (req, res) => {
+  try {
+    const product = await productModel
+      .findOne({ slug: req.params.slug })
+      .select("-photo")
+      .populate("category");
+    res.status(200).send({
+      success: true,
+      message: "Single Product Fetched",
+      product,
+    });
+  } catch (error) {
+    console.log(error);
+    res.status(500).send({
+      success: false,
+      message: "Eror while getitng single product",
+      error,
+    });
+  }
+};
+
+// get photo
+export const productPhotoController = async (req, res) => {
+  try {
+    const product = await productModel.findById(req.params.pid).select("photo");
+    if (product.photo.data) {
+      res.set("Content-type", product.photo.contentType);
+      return res.status(200).send(product.photo.data);
+    }
+  } catch (error) {
+    console.log(error);
+    res.status(500).send({
+      success: false,
+      message: "Erorr while getting photo",
+      error,
+    });
+  }
+};
+
+//delete controller
+export const deleteProductController = async (req, res) => {
+  try {
+    await productModel.findByIdAndDelete(req.params.pid).select("-photo");
+    res.status(200).send({
+      success: true,
+      message: "Product Deleted successfully",
+    });
+  } catch (error) {
+    console.log(error);
+    res.status(500).send({
+      success: false,
+      message: "Error while deleting product",
+      error,
+    });
+  }
+};
+
+//upate producta
+export const updateProductController = async (req, res) => {
+  try {
+    const { name, description, price, category, quantity, shipping } =
+      req.fields;
+    const { photo } = req.files;
+    //alidation
+    switch (true) {
+      case !name:
+        return res.status(500).send({ error: "Name is Required" });
+      case !description:
+        return res.status(500).send({ error: "Description is Required" });
+      case !price:
+        return res.status(500).send({ error: "Price is Required" });
+      case !category:
+        return res.status(500).send({ error: "Category is Required" });
+      case !quantity:
+        return res.status(500).send({ error: "Quantity is Required" });
+      case photo && photo.size > 1000000:
+        return res
+          .status(500)
+          .send({ error: "photo is Required and should be less then 1mb" });
+    }
+
+    const products = await productModel.findByIdAndUpdate(
+      req.params.pid,
+      { ...req.fields, slug: slugify(name) },
+      { new: true }
+    );
+    if (photo) {
+      products.photo.data = fs.readFileSync(photo.path);
+      products.photo.contentType = photo.type;
+    }
+    await products.save();
+    res.status(201).send({
+      success: true,
+      message: "Product Updated Successfully",
+      products,
+    });
+  } catch (error) {
+    console.log(error);
+    res.status(500).send({
+      success: false,
+      error,
+      message: "Error in Updte product",
+    });
+  }
+};
+
+// filters
+export const productFiltersController = async (req, res) => {
+  try {
+    const { checked, radio } = req.body;
+    let args = {};
+    if (checked.length > 0) args.category = checked;
+    if (radio.length) args.price = { $gte: radio[0], $lte: radio[1] };
+    const products = await productModel.find(args);
+    res.status(200).send({
+      success: true,
+      products,
+    });
+  } catch (error) {
+    console.log(error);
+    res.status(400).send({
+      success: false,
+      message: "Error WHile Filtering Products",
+      error,
+    });
+  }
+};
+
+// product count
+export const productCountController = async (req, res) => {
+  try {
+    const total = await productModel.find({}).estimatedDocumentCount();
+    res.status(200).send({
+      success: true,
+      total,
+    });
+  } catch (error) {
+    console.log(error);
+    res.status(400).send({
+      message: "Error in product count",
+      error,
+      success: false,
+    });
+  }
+};
+
+// product list base on page
+export const productListController = async (req, res) => {
+  try {
+    const perPage = 6;
+    const page = req.params.page ? req.params.page : 1;
+    const products = await productModel
+      .find({})
+      .select("-photo")
+      .skip((page - 1) * perPage)
+      .limit(perPage)
+      .sort({ createdAt: -1 });
+    res.status(200).send({
+      success: true,
+      products,
+    });
+  } catch (error) {
+    console.log(error);
+    res.status(400).send({
+      success: false,
+      message: "error in per page ctrl",
+      error,
+    });
+  }
+};
+
+// search product
+export const searchProductController = async (req, res) => {
+  try {
+    const { keyword } = req.params;
+    const resutls = await productModel
+      .find({
+        $or: [
+          { name: { $regex: keyword, $options: "i" } },
+          { description: { $regex: keyword, $options: "i" } },
+        ],
+      })
+      .select("-photo");
+    res.json(resutls);
+  } catch (error) {
+    console.log(error);
+    res.status(400).send({
+      success: false,
+      message: "Error In Search Product API",
+      error,
+    });
+  }
+};
+
+// similar products
+export const realtedProductController = async (req, res) => {
+  try {
+    const { pid, cid } = req.params;
+    const products = await productModel
+      .find({
+        category: cid,
+        _id: { $ne: pid },
+      })
+      .select("-photo")
+      .limit(3)
+      .populate("category");
+    res.status(200).send({
+      success: true,
+      products,
+    });
+  } catch (error) {
+    console.log(error);
+    res.status(400).send({
+      success: false,
+      message: "error while geting related product",
+      error,
+    });
+  }
+};
+
+// get prdocyst by catgory
+export const productCategoryController = async (req, res) => {
+  try {
+    const category = await categoryModel.findOne({ slug: req.params.slug });
+    const products = await productModel.find({ category }).populate("category");
+    res.status(200).send({
+      success: true,
+      category,
+      products,
+    });
+  } catch (error) {
+    console.log(error);
+    res.status(400).send({
+      success: false,
+      error,
+      message: "Error While Getting products",
+    });
+  }
+};
diff --git a/models/categoryModel.js b/models/categoryModel.js
new file mode 100644
index 00000000..32ce9087
--- /dev/null
+++ b/models/categoryModel.js
@@ -0,0 +1,15 @@
+import mongoose from "mongoose";
+
+const categorySchema = new mongoose.Schema({
+  name: {
+    type: String,
+    required: true,
+    unique: true,
+  },
+  slug: {
+    type: String,
+    lowercase: true,
+  },
+});
+
+export default mongoose.model("Category", categorySchema);
diff --git a/models/productModel.js b/models/productModel.js
new file mode 100644
index 00000000..081e89fc
--- /dev/null
+++ b/models/productModel.js
@@ -0,0 +1,41 @@
+import mongoose from "mongoose";
+
+const productSchema = new mongoose.Schema(
+  {
+    name: {
+      type: String,
+      required: true,
+    },
+    slug: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      required: true,
+    },
+    price: {
+      type: Number,
+      required: true,
+    },
+    category: {
+      type: mongoose.ObjectId,
+      ref: "Category",
+      required: true,
+    },
+    quantity: {
+      type: Number,
+      required: true,
+    },
+    photo: {
+      data: Buffer,
+      contentType: String,
+    },
+    shipping: {
+      type: Boolean,
+    },
+  },
+  { timestamps: true }
+);
+
+export default mongoose.model("Products", productSchema);
diff --git a/models/userModel.js b/models/userModel.js
index 112f8479..78f2099c 100644
--- a/models/userModel.js
+++ b/models/userModel.js
@@ -21,6 +21,10 @@ const userSchema = new mongoose.Schema(
       required: true,
     },
     address: {
+      type: {},
+      required: true,
+    },
+    answer: {
       type: String,
       required: true,
     },
diff --git a/package-lock.json b/package-lock.json
index ed830dc0..7fc06ff8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1017,6 +1017,14 @@
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
     },
+    "ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "requires": {
+        "color-convert": "^2.0.1"
+      }
+    },
     "anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -1162,6 +1170,30 @@
         "get-intrinsic": "^1.0.2"
       }
     },
+    "chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "requires": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "chokidar": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -1182,6 +1214,29 @@
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
       "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ=="
     },
+    "cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "requires": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      }
+    },
+    "color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "requires": {
+        "color-name": "~1.1.4"
+      }
+    },
+    "color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+    },
     "color-support": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
@@ -1197,6 +1252,37 @@
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
     },
+    "concurrently": {
+      "version": "7.6.0",
+      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-7.6.0.tgz",
+      "integrity": "sha512-BKtRgvcJGeZ4XttiDiNcFiRlxoAeZOseqUvyYRUp/Vtd+9p1ULmeoSqGsDA+2ivdeDFpqrJvGvmI+StKfKl5hw==",
+      "requires": {
+        "chalk": "^4.1.0",
+        "date-fns": "^2.29.1",
+        "lodash": "^4.17.21",
+        "rxjs": "^7.0.0",
+        "shell-quote": "^1.7.3",
+        "spawn-command": "^0.0.2-1",
+        "supports-color": "^8.1.0",
+        "tree-kill": "^1.2.2",
+        "yargs": "^17.3.1"
+      },
+      "dependencies": {
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "8.1.1",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+          "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "console-control-strings": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
@@ -1225,6 +1311,20 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
     },
+    "cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "requires": {
+        "object-assign": "^4",
+        "vary": "^1"
+      }
+    },
+    "date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA=="
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
@@ -1281,6 +1381,11 @@
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
       "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w=="
     },
+    "escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
+    },
     "escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -1329,6 +1434,14 @@
         "vary": "~1.1.2"
       }
     },
+    "express-formidable": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/express-formidable/-/express-formidable-1.2.0.tgz",
+      "integrity": "sha512-w1vXjF3gb50UKTNkFaW8/4rqY4dUrKfZ1sAZzwAF9YxCAgj/29QZsycf71di0GkskrZOAkubk9pvGYfxyAMYiw==",
+      "requires": {
+        "formidable": "^1.0.17"
+      }
+    },
     "fast-xml-parser": {
       "version": "4.0.11",
       "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.0.11.tgz",
@@ -1360,6 +1473,11 @@
         "unpipe": "~1.0.0"
       }
     },
+    "formidable": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/formidable/-/formidable-1.2.6.tgz",
+      "integrity": "sha512-KcpbcpuLNOwrEjnbpMC0gS+X8ciDoZE1kkqzat4a8vrprf+s9pKNQ/QIwWfbfs4ltgmFl3MD177SNTkve3BwGQ=="
+    },
     "forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -1420,6 +1538,11 @@
         "wide-align": "^1.1.2"
       }
     },
+    "get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="
+    },
     "get-intrinsic": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.0.tgz",
@@ -2049,6 +2172,11 @@
         "picomatch": "^2.2.1"
       }
     },
+    "require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="
+    },
     "rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -2057,6 +2185,14 @@
         "glob": "^7.1.3"
       }
     },
+    "rxjs": {
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.0.tgz",
+      "integrity": "sha512-F2+gxDshqmIub1KdvZkaEfGDwLNpPvk9Fs6LD/MyQxNgMds/WH9OdDDXOmxUZpME+iSK3rQCctkL0DYyytUqMg==",
+      "requires": {
+        "tslib": "^2.1.0"
+      }
+    },
     "safe-buffer": {
       "version": "5.2.1",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
@@ -2129,6 +2265,11 @@
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "shell-quote": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.4.tgz",
+      "integrity": "sha512-8o/QEhSSRb1a5i7TFR0iM4G16Z0vYB2OQVs4G3aAFXjn3T6yEx8AZxy1PgDF7I00LZHYA3WxaSYIf5e5sAX8Rw=="
+    },
     "side-channel": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
@@ -2164,6 +2305,11 @@
         }
       }
     },
+    "slugify": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.6.5.tgz",
+      "integrity": "sha512-8mo9bslnBO3tr5PEVFzMPIWwWnipGS0xVbYf65zxDqfNwmzYn1LpiKNrR6DlClusuvo+hDHd1zKpmfAe83NQSQ=="
+    },
     "smart-buffer": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
@@ -2187,6 +2333,11 @@
         "memory-pager": "^1.0.2"
       }
     },
+    "spawn-command": {
+      "version": "0.0.2-1",
+      "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2-1.tgz",
+      "integrity": "sha512-n98l9E2RMSJ9ON1AKisHzz7V42VDiBQGY6PB1BwRglz99wpVsSuGzQ+jOi6lFXBGVTCrRpltvjm+/XA+tpeJrg=="
+    },
     "statuses": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
@@ -2274,11 +2425,15 @@
         "punycode": "^2.1.1"
       }
     },
+    "tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A=="
+    },
     "tslib": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
-      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA==",
-      "optional": true
+      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
     },
     "type-is": {
       "version": "1.6.18",
@@ -2342,15 +2497,49 @@
         "string-width": "^1.0.2 || 2 || 3 || 4"
       }
     },
+    "wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "requires": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      }
+    },
     "wrappy": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
     },
+    "y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="
+    },
     "yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+    },
+    "yargs": {
+      "version": "17.6.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.6.2.tgz",
+      "integrity": "sha512-1/9UrdHjDZc0eOU0HxOHoS78C69UD3JRMvzlJ7S79S2nTaWRA/whGCTV8o9e/N/1Va9YIV7Q4sOxD8VV4pCWOw==",
+      "requires": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      }
+    },
+    "yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw=="
     }
   }
 }
diff --git a/package.json b/package.json
index e67f61e5..d5a4c96a 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,9 @@
   "type": "module",
   "scripts": {
     "start": "node server.js",
-    "server": "nodemon server.js"
+    "server": "nodemon server.js",
+    "client": "npm start --prefix ./client",
+    "dev": "concurrently \"npm run server\" \"npm run client\""
   },
   "keywords": [],
   "author": "Techinfoyt",
@@ -14,12 +16,16 @@
   "dependencies": {
     "bcrypt": "^5.1.0",
     "colors": "^1.4.0",
+    "concurrently": "^7.6.0",
+    "cors": "^2.8.5",
     "dotenv": "^16.0.3",
     "express": "^4.18.2",
+    "express-formidable": "^1.2.0",
     "jsonwebtoken": "^9.0.0",
     "mongoose": "^6.8.4",
     "morgan": "^1.10.0",
     "nodemon": "^2.0.20",
-    "react-icons": "^4.7.1"
+    "react-icons": "^4.7.1",
+    "slugify": "^1.6.5"
   }
 }
diff --git a/routes/authRoute.js b/routes/authRoute.js
index 842f194e..1eef070d 100644
--- a/routes/authRoute.js
+++ b/routes/authRoute.js
@@ -3,6 +3,8 @@ import {
   registerController,
   loginController,
   testController,
+  forgotPasswordController,
+  updateProfileController,
 } from "../controllers/authController.js";
 import { isAdmin, requireSignIn } from "../middlewares/authMiddleware.js";
 
@@ -16,7 +18,22 @@ router.post("/register", registerController);
 //LOGIN || POST
 router.post("/login", loginController);
 
+//Forgot Password || POST
+router.post("/forgot-password", forgotPasswordController);
+
 //test routes
 router.get("/test", requireSignIn, isAdmin, testController);
 
+//protected User route auth
+router.get("/user-auth", requireSignIn, (req, res) => {
+  res.status(200).send({ ok: true });
+});
+//protected Admin route auth
+router.get("/admin-auth", requireSignIn, isAdmin, (req, res) => {
+  res.status(200).send({ ok: true });
+});
+
+//update profile
+router.put("/profile", requireSignIn, updateProfileController);
+
 export default router;
diff --git a/routes/categoryRoutes.js b/routes/categoryRoutes.js
new file mode 100644
index 00000000..ffc014a9
--- /dev/null
+++ b/routes/categoryRoutes.js
@@ -0,0 +1,44 @@
+import express from "express";
+import { isAdmin, requireSignIn } from "./../middlewares/authMiddleware.js";
+import {
+  categoryControlller,
+  createCategoryController,
+  deleteCategoryCOntroller,
+  singleCategoryController,
+  updateCategoryController,
+} from "./../controllers/categoryController.js";
+
+const router = express.Router();
+
+//routes
+// create category
+router.post(
+  "/create-category",
+  requireSignIn,
+  isAdmin,
+  createCategoryController
+);
+
+//update category
+router.put(
+  "/update-category/:id",
+  requireSignIn,
+  isAdmin,
+  updateCategoryController
+);
+
+//getALl category
+router.get("/get-category", categoryControlller);
+
+//single category
+router.get("/single-category/:slug", singleCategoryController);
+
+//delete category
+router.delete(
+  "/delete-category/:id",
+  requireSignIn,
+  isAdmin,
+  deleteCategoryCOntroller
+);
+
+export default router;
diff --git a/routes/productRoutes.js b/routes/productRoutes.js
new file mode 100644
index 00000000..3b353140
--- /dev/null
+++ b/routes/productRoutes.js
@@ -0,0 +1,68 @@
+import express from "express";
+import {
+  createProductController,
+  deleteProductController,
+  getProductController,
+  getSingleProductController,
+  productCategoryController,
+  productCountController,
+  productFiltersController,
+  productListController,
+  productPhotoController,
+  realtedProductController,
+  searchProductController,
+  updateProductController,
+} from "../controllers/productController.js";
+import { isAdmin, requireSignIn } from "../middlewares/authMiddleware.js";
+import formidable from "express-formidable";
+
+const router = express.Router();
+
+//routes
+router.post(
+  "/create-product",
+  requireSignIn,
+  isAdmin,
+  formidable(),
+  createProductController
+);
+//routes
+router.put(
+  "/update-product/:pid",
+  requireSignIn,
+  isAdmin,
+  formidable(),
+  updateProductController
+);
+
+//get products
+router.get("/get-product", getProductController);
+
+//single product
+router.get("/get-product/:slug", getSingleProductController);
+
+//get photo
+router.get("/product-photo/:pid", productPhotoController);
+
+//delete rproduct
+router.delete("/delete-product/:pid", deleteProductController);
+
+//filter product
+router.post("/product-filters", productFiltersController);
+
+//product count
+router.get("/product-count", productCountController);
+
+//product per page
+router.get("/product-list/:page", productListController);
+
+//search product
+router.get("/search/:keyword", searchProductController);
+
+//similar product
+router.get("/related-product/:pid/:cid", realtedProductController);
+
+//category wise product
+router.get("/product-category/:slug", productCategoryController);
+
+export default router;
diff --git a/server.js b/server.js
index c4b547d9..a79f10bb 100644
--- a/server.js
+++ b/server.js
@@ -4,6 +4,9 @@ import dotenv from "dotenv";
 import morgan from "morgan";
 import connectDB from "./config/db.js";
 import authRoutes from "./routes/authRoute.js";
+import categoryRoutes from "./routes/categoryRoutes.js";
+import productRoutes from "./routes/productRoutes.js";
+import cors from "cors";
 
 //configure env
 dotenv.config();
@@ -15,11 +18,14 @@ connectDB();
 const app = express();
 
 //middelwares
+app.use(cors());
 app.use(express.json());
 app.use(morgan("dev"));
 
 //routes
 app.use("/api/v1/auth", authRoutes);
+app.use("/api/v1/category", categoryRoutes);
+app.use("/api/v1/product", productRoutes);
 
 //rest api
 app.get("/", (req, res) => {