From f0d9df74a0f5b92dba4f9da2952909160ec48e2b Mon Sep 17 00:00:00 2001
From: shivamm31 <shivam.roy@knoldus.com>
Date: Thu, 8 Feb 2024 23:47:02 +0530
Subject: [PATCH] added product page

---
 car-ui-react/data/db.json                     | 139 ++++
 car-ui-react/package-lock.json                | 671 ++++++++++++++++++
 car-ui-react/package.json                     |   3 +
 car-ui-react/src/App.js                       |   5 +-
 .../src/components/Elements/ProductCard.js    |  47 ++
 .../src/pages/Products/ProductsList.js        |  53 ++
 .../pages/Products/components/FilterBar.js    |   0
 7 files changed, 917 insertions(+), 1 deletion(-)
 create mode 100644 car-ui-react/data/db.json
 create mode 100644 car-ui-react/src/components/Elements/ProductCard.js
 create mode 100644 car-ui-react/src/pages/Products/ProductsList.js
 create mode 100644 car-ui-react/src/pages/Products/components/FilterBar.js

diff --git a/car-ui-react/data/db.json b/car-ui-react/data/db.json
new file mode 100644
index 00000000..348d132a
--- /dev/null
+++ b/car-ui-react/data/db.json
@@ -0,0 +1,139 @@
+{
+  "products": [
+    {
+        "carId": 4371,
+        "brand": "Ford",
+        "model": "Contour",
+        "year": 1198,
+        "color": "Teal",
+        "mileage": 70.811136,
+        "price": 1500000,
+        "quantity": 100,
+        "tax": 1.4,
+        "timestamp": "2004-10-19 10: 23: 54",
+        "poster": "https://i.pinimg.com/736x/fa/be/08/fabe082d7ca96325961ddd6019583cb7--mystique-ford-contour.jpg",
+        "in_stock": true
+    },
+    {
+        "carId": 4548,
+        "brand": "Mahindra",
+        "model": "XUV 700",
+        "year": 1950,
+        "color": "Black",
+        "mileage": 13.5465,
+        "price": 2000000,
+        "quantity": 200,
+        "tax": 1.4,
+        "timestamp": "2004-10-19 10: 23: 54",
+        "poster": "https://www.cartoq.com/wp-content/uploads/2021/09/XUV700-Dark-Knight-edition-featured.jpg",
+        "in_stock": true
+      },
+      {
+        "carId": 1556,
+        "brand": "Mahindra",
+        "model": "Scorpio N",
+        "year": 1950,
+        "color": "Black",
+        "mileage": 13.5465,
+        "price": 15000000,
+        "quantity": 200,
+        "tax": 1.4,
+        "timestamp": "2004-10-19 10: 23: 54",
+        "poster": "https://static.autox.com/uploads/2022/06/Mahindra-Scorpio-N-exterior.png",
+        "in_stock": true
+      },
+      {
+        "carId": 4752,
+        "brand": "Hundai",
+        "model": "i20 Grand",
+        "year": 1925,
+        "color": "Blue",
+        "mileage": 13.5465,
+        "price": 12000000,
+        "quantity": 100,
+        "tax": 1.4,
+        "timestamp": "2004-10-19 10: 23: 54",
+        "poster": "https://paultan.org/image/2020/10/2021-Hyundai-i20-N-Exterior-7.jpg",
+        "in_stock": true
+      },
+      {
+        "carId": 4654,
+        "brand": "Tata",
+        "model": "Harrier",
+        "year": 1900,
+        "color": "Orange",
+        "mileage": 13.5465,
+        "price": 18000000,
+        "quantity": 100,
+        "tax": 1.4,
+        "timestamp": "2004-10-19 10: 23: 54",
+        "poster": "https://th.bing.com/th/id/OIP.5i-hWiOn_6RnqXoDoA-H2QHaEo?rs=1&pid=ImgDetMain",
+        "in_stock": false
+      },
+      {
+        "carId": 1458,
+        "brand": "Tata",
+        "model": "Safari",
+        "year": 1900,
+        "color": "Grey",
+        "mileage": 13.5465,
+        "price": 25000000,
+        "quantity": 200,
+        "tax": 1.4,
+        "timestamp": "2004-10-19 10: 23: 54",
+        "poster": "https://english.cdn.zeenews.com/sites/default/files/2022/10/31/1110417-tata-safari-classic-front.jpg",
+        "in_stock": true
+      },
+      {
+        "carId": 5467,
+        "brand": "Toyota",
+        "model": "Fortuner",
+        "year": 1900,
+        "color": "White",
+        "mileage": 13.5465,
+        "price": 6000000,
+        "quantity": 300,
+        "tax": 1.4,
+        "timestamp": "2004-10-19 10: 23: 54",
+        "poster": "https://th.bing.com/th/id/OIP.qzSsXvyXs_A9WpKfF97yJQHaFJ?rs=1&pid=ImgDetMain",
+        "in_stock": false
+      },
+      {
+        "carId": 4567,
+        "brand": "Tata",
+        "model": "Tigor",
+        "year": 1900,
+        "color": "White",
+        "mileage": 13.5465,
+        "price": 12000000,
+        "quantity": 100,
+        "tax": 1.4,
+        "timestamp": "2004-10-19 10: 23: 54",
+        "poster": "https://th.bing.com/th/id/OIP.EL6O-LdJztIEA7BuFBQWtwHaEK?rs=1&pid=ImgDetMain",
+        "in_stock": true
+      },
+      {
+        "carId": 6424,
+        "brand": "Hundai",
+        "model": "Verna",
+        "year": 1985,
+        "color": "Black",
+        "mileage": 13.5465,
+        "price": 2000000,
+        "quantity": 50,
+        "tax": 1.4,
+        "timestamp": "2004-10-19 10: 23: 54",
+        "poster": "https://imgd.aeplcdn.com/642x336/n/cw/ec/121943/verna-facelift-exterior-right-front-three-quarter.jpeg?isig=0&q=75",
+        "in_stock": false
+      }
+  ],
+  "featured_products": [
+    {}
+  ],
+  "orders": [
+    {}
+  ],
+  "users": [
+    {}
+  ]
+}
diff --git a/car-ui-react/package-lock.json b/car-ui-react/package-lock.json
index 8f74308e..33a7052c 100644
--- a/car-ui-react/package-lock.json
+++ b/car-ui-react/package-lock.json
@@ -13,10 +13,13 @@
         "@testing-library/user-event": "^13.5.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.22.0",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
+        "json-server": "^1.0.0-alpha.23",
+        "json-server-auth": "^2.1.0",
         "tailwindcss": "^3.4.1"
       }
     },
@@ -3355,6 +3358,20 @@
         }
       }
     },
+    "node_modules/@polka/url": {
+      "version": "1.0.0-next.24",
+      "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.24.tgz",
+      "integrity": "sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==",
+      "dev": true
+    },
+    "node_modules/@remix-run/router": {
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.0.tgz",
+      "integrity": "sha512-HOil5aFtme37dVQTB6M34G95kPM3MMuqSmIRVCC52eKV+Y/tGSqw9P3rWhlAx6A+mz+MoX+XxsGsNJbaI5qCgQ==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -3975,6 +3992,290 @@
         "@testing-library/dom": ">=7.21.4"
       }
     },
+    "node_modules/@tinyhttp/accepts": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/accepts/-/accepts-2.2.1.tgz",
+      "integrity": "sha512-2DHJLSJX1gqR5F6nKuu7+hyCNoPRNOxvnQ11m0X8klkSVoBFBO2HMf3bJ8P+fmNv1e6RjHzHF+G+hJ3dxXIQXQ==",
+      "dev": true,
+      "dependencies": {
+        "mime": "4.0.1",
+        "negotiator": "^0.6.3"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/tinyhttp/tinyhttp?sponsor=1"
+      }
+    },
+    "node_modules/@tinyhttp/accepts/node_modules/mime": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-4.0.1.tgz",
+      "integrity": "sha512-5lZ5tyrIfliMXzFtkYyekWbtRXObT9OWa8IwQ5uxTBDHucNNwniRqo0yInflj+iYi5CBa6qxadGzGarDfuEOxA==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/broofa"
+      ],
+      "bin": {
+        "mime": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@tinyhttp/app": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/app/-/app-2.2.3.tgz",
+      "integrity": "sha512-njr499Tx9BwlnIGfJjTuqfPwaUSTsjhUeRq/jVtHJpS95UgWECH7kiq8+bEx6TFRXiNKpARZ6KJUemlMyV+iCg==",
+      "dev": true,
+      "dependencies": {
+        "@tinyhttp/cookie": "2.1.0",
+        "@tinyhttp/proxy-addr": "2.1.3",
+        "@tinyhttp/req": "2.2.2",
+        "@tinyhttp/res": "2.2.2",
+        "@tinyhttp/router": "2.2.2",
+        "header-range-parser": "1.1.3",
+        "regexparam": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/tinyhttp/tinyhttp?sponsor=1"
+      }
+    },
+    "node_modules/@tinyhttp/content-disposition": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/content-disposition/-/content-disposition-2.2.0.tgz",
+      "integrity": "sha512-w1dJaSAtcCinOlT/YQg35RnFCOBbCHBGDVhH4yLoiJVtecRAJ2cYMf5HP+UhfbXURa38GC8fkRXO0vODDTjmeg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/tinyhttp/tinyhttp?sponsor=1"
+      }
+    },
+    "node_modules/@tinyhttp/content-type": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/content-type/-/content-type-0.1.4.tgz",
+      "integrity": "sha512-dl6f3SHIJPYbhsW1oXdrqOmLSQF/Ctlv3JnNfXAE22kIP7FosqJHxkz/qj2gv465prG8ODKH5KEyhBkvwrueKQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.4"
+      }
+    },
+    "node_modules/@tinyhttp/cookie": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/cookie/-/cookie-2.1.0.tgz",
+      "integrity": "sha512-o56utxXvIuLTCtPm66r8lcyUufpw0RkO+u4wQrTbc6snyyGZZ9hHzGRxPyko0ks90ctOkLh0mNKn7YZaTWlvfw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/tinyhttp/tinyhttp?sponsor=1"
+      }
+    },
+    "node_modules/@tinyhttp/cookie-signature": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/cookie-signature/-/cookie-signature-2.1.0.tgz",
+      "integrity": "sha512-bpOXBGf9rKoajtEG75O7xjwW+u2I/NNPkJWJTDdr6j7Vx0lG5R9Hnl3ty80Af4jwyo90ywXVpZIxKLubPK6RzA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/cors": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/cors/-/cors-2.0.0.tgz",
+      "integrity": "sha512-IwQsPBnK+gRrhTsPA4FPOfbNzZZt8cVsOIMNFb6HzoScaiWcoLEogL0Bz/aBSm8KM13uieVXoVT6udMqhqUS2A==",
+      "dev": true,
+      "dependencies": {
+        "es-vary": "^0.1.1"
+      },
+      "engines": {
+        "node": ">=12.4 || 14.x || >=16"
+      }
+    },
+    "node_modules/@tinyhttp/encode-url": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/encode-url/-/encode-url-2.1.1.tgz",
+      "integrity": "sha512-AhY+JqdZ56qV77tzrBm0qThXORbsVjs/IOPgGCS7x/wWnsa/Bx30zDUU/jPAUcSzNOzt860x9fhdGpzdqbUeUw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/etag": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/etag/-/etag-2.1.1.tgz",
+      "integrity": "sha512-AcHGK1nMlKIHmlbg8bb8UY/KhiaAX17SAn3/6wlgwwdX4UizA8HETDfCH3KLdu2ZASokynuwVFNDJCo1DAawGw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/forwarded": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/forwarded/-/forwarded-2.1.2.tgz",
+      "integrity": "sha512-9H/eulJ68ElY/+zYpTpNhZ7vxGV+cnwaR6+oQSm7bVgZMyuQfgROW/qvZuhmgDTIxnGMXst+Ba4ij6w6Krcs3w==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/proxy-addr": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/proxy-addr/-/proxy-addr-2.1.3.tgz",
+      "integrity": "sha512-Z0Q/0wEJpvall7LlBezXDy96CXLzPZb6xJawwEgsMXXQhmjb+r3EkpCBwMrWm2GlbJFL/UxKxpdumiNW3Ne06g==",
+      "dev": true,
+      "dependencies": {
+        "@tinyhttp/forwarded": "2.1.2",
+        "ipaddr.js": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/req": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/req/-/req-2.2.2.tgz",
+      "integrity": "sha512-LaL/RFRro0qjOQ0g3vxE6i9bWl9hhv9en7opykzLU4NimFPg2C8wl7Qkoyc0mDuoRMQmWpq730PDWXSUmLiT2A==",
+      "dev": true,
+      "dependencies": {
+        "@tinyhttp/accepts": "2.2.1",
+        "@tinyhttp/type-is": "2.2.2",
+        "@tinyhttp/url": "2.1.1",
+        "header-range-parser": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/res": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/res/-/res-2.2.2.tgz",
+      "integrity": "sha512-YeEYFwozag2qO5xoTj1Df+d5l6MXUefxz3xbcJD6ASVqUQytTEYtOC0FjhQKLpTLjMJKlS4mkKmeIdDLFO9btg==",
+      "dev": true,
+      "dependencies": {
+        "@tinyhttp/content-disposition": "2.2.0",
+        "@tinyhttp/cookie": "2.1.0",
+        "@tinyhttp/cookie-signature": "2.1.0",
+        "@tinyhttp/encode-url": "2.1.1",
+        "@tinyhttp/req": "2.2.2",
+        "@tinyhttp/send": "2.2.1",
+        "@tinyhttp/vary": "^0.1.3",
+        "es-escape-html": "^0.1.1",
+        "mime": "4.0.1"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/res/node_modules/mime": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-4.0.1.tgz",
+      "integrity": "sha512-5lZ5tyrIfliMXzFtkYyekWbtRXObT9OWa8IwQ5uxTBDHucNNwniRqo0yInflj+iYi5CBa6qxadGzGarDfuEOxA==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/broofa"
+      ],
+      "bin": {
+        "mime": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@tinyhttp/router": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/router/-/router-2.2.2.tgz",
+      "integrity": "sha512-i+1ouhPyTqcuJuOsKqmo7i+YD++0RF2lQLhBpcTnsaegD2gTEa3xW2Pcz7spYQGo7K8PQYtOrL7m9b14+BEXqg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/send": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/send/-/send-2.2.1.tgz",
+      "integrity": "sha512-uFW0fxmYIPpB5RKP2vpL8QuafjUrCBmBWxZMIhFb7uBQky87t7x1QdpRB0vc+w11a2kok+Nc8ClD5kc6CRJCFg==",
+      "dev": true,
+      "dependencies": {
+        "@tinyhttp/content-type": "^0.1.4",
+        "@tinyhttp/etag": "2.1.1",
+        "mime": "4.0.1"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/send/node_modules/mime": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-4.0.1.tgz",
+      "integrity": "sha512-5lZ5tyrIfliMXzFtkYyekWbtRXObT9OWa8IwQ5uxTBDHucNNwniRqo0yInflj+iYi5CBa6qxadGzGarDfuEOxA==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/broofa"
+      ],
+      "bin": {
+        "mime": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@tinyhttp/type-is": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/type-is/-/type-is-2.2.2.tgz",
+      "integrity": "sha512-DmTm0MkdrUxEPI2WBBoYJT0bitWx6+xeUd3lya1NGbKmYArzyUE+KVro/9y/h6Bxh+RaAKNeTCF4H/ksbe/ULQ==",
+      "dev": true,
+      "dependencies": {
+        "@tinyhttp/content-type": "^0.1.4",
+        "mime": "4.0.1"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/type-is/node_modules/mime": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-4.0.1.tgz",
+      "integrity": "sha512-5lZ5tyrIfliMXzFtkYyekWbtRXObT9OWa8IwQ5uxTBDHucNNwniRqo0yInflj+iYi5CBa6qxadGzGarDfuEOxA==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/broofa"
+      ],
+      "bin": {
+        "mime": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@tinyhttp/url": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/url/-/url-2.1.1.tgz",
+      "integrity": "sha512-POJeq2GQ5jI7Zrdmj22JqOijB5/GeX+LEX7DUdml1hUnGbJOTWDx7zf2b5cCERj7RoXL67zTgyzVblBJC+NJWg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
+    "node_modules/@tinyhttp/vary": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@tinyhttp/vary/-/vary-0.1.3.tgz",
+      "integrity": "sha512-SoL83sQXAGiHN1jm2VwLUWQSQeDAAl1ywOm6T0b0Cg1CZhVsjoiZadmjhxF6FHCCY7OHHVaLnTgSMxTPIDLxMg==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.20"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -5717,6 +6018,12 @@
       "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
       "integrity": "sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw=="
     },
+    "node_modules/bcryptjs": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz",
+      "integrity": "sha512-V/Hy/X9Vt7f3BbPJEi8BdVFMByHi+jNXrYkW3huaybV/kQ0KJg0Y6PkEMbn+zeT+i+SiKZ/HMqJGIIt4LZDqNQ==",
+      "dev": true
+    },
     "node_modules/bfj": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/bfj/-/bfj-7.1.0.tgz",
@@ -5886,6 +6193,12 @@
         "node-int64": "^0.4.0"
       }
     },
+    "node_modules/buffer-equal-constant-time": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz",
+      "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
+      "dev": true
+    },
     "node_modules/buffer-from": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
@@ -7136,6 +7449,33 @@
         "tslib": "^2.0.3"
       }
     },
+    "node_modules/dot-prop": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/dot-prop/-/dot-prop-8.0.2.tgz",
+      "integrity": "sha512-xaBe6ZT4DHPkg0k4Ytbvn5xoxgpG0jOS1dYxSOwAHPuNLjP3/OzN0gH55SrLqpx8cBfSaVt91lXYkApjb+nYdQ==",
+      "dev": true,
+      "dependencies": {
+        "type-fest": "^3.8.0"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/dot-prop/node_modules/type-fest": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz",
+      "integrity": "sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/dotenv": {
       "version": "10.0.0",
       "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-10.0.0.tgz",
@@ -7159,6 +7499,15 @@
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
       "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
     },
+    "node_modules/ecdsa-sig-formatter": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
+      "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==",
+      "dev": true,
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -7316,6 +7665,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-escape-html": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/es-escape-html/-/es-escape-html-0.1.1.tgz",
+      "integrity": "sha512-yUx1o+8RsG7UlszmYPtks+dm6Lho2m8lgHMOsLJQsFI0R8XwUJwiMhM1M4E/S8QLeGyf6MkDV/pWgjQ0tdTSyQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.x"
+      }
+    },
     "node_modules/es-get-iterator": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/es-get-iterator/-/es-get-iterator-1.1.3.tgz",
@@ -7398,6 +7756,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/es-vary": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/es-vary/-/es-vary-0.1.2.tgz",
+      "integrity": "sha512-pLqqZoOutAXQXyBJrUYVNM5fZngiOJYi1Xl4svQMrluTsqDUOQlBMw9EYgLrsWL6niDYn/Yd1y2Pj6GC+j/yjA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.x"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -8107,6 +8474,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eta": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/eta/-/eta-3.2.0.tgz",
+      "integrity": "sha512-Qzc3it7nLn49dbOb9+oHV9rwtt9qN8oShRztqkZ3gXPqQflF0VLin5qhWk0g/2ioibBwT4DU6OIMVft7tg/rVg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/eta-dev/eta?sponsor=1"
+      }
+    },
     "node_modules/etag": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
@@ -9079,6 +9458,15 @@
         "he": "bin/he"
       }
     },
+    "node_modules/header-range-parser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/header-range-parser/-/header-range-parser-1.1.3.tgz",
+      "integrity": "sha512-B9zCFt3jH8g09LR1vHL4pcAn8yMEtlSlOUdQemzHMRKMImNIhhszdeosYFfNW0WXKQtXIlWB+O4owHJKvEJYaA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.22.0"
+      }
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -9436,6 +9824,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/inflection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/inflection/-/inflection-3.0.0.tgz",
+      "integrity": "sha512-1zEJU1l19SgJlmwqsEyFTbScw/tkMHFenUo//Y0i+XEP83gDFdMvPizAD/WGcE+l1ku12PcTVHQhO6g5E0UCMw==",
+      "dev": true,
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -12108,6 +12505,64 @@
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
       "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
     },
+    "node_modules/json-server": {
+      "version": "1.0.0-alpha.23",
+      "resolved": "https://registry.npmjs.org/json-server/-/json-server-1.0.0-alpha.23.tgz",
+      "integrity": "sha512-FPL1veNELhkr3tttwbIutKPkc/AUfLWSmslTwLYYPzl9RbCJQrwSPJceYWg2LnK1cv20tcEMLI2Kxl1lHz155Q==",
+      "dev": true,
+      "dependencies": {
+        "@tinyhttp/app": "^2.2.3",
+        "@tinyhttp/cors": "^2.0.0",
+        "chalk": "^5.3.0",
+        "chokidar": "^3.5.3",
+        "dot-prop": "^8.0.2",
+        "eta": "^3.2.0",
+        "inflection": "^3.0.0",
+        "json5": "^2.2.3",
+        "lowdb": "^7.0.1",
+        "milliparsec": "^2.3.0",
+        "sirv": "^2.0.4",
+        "sort-on": "^6.0.0"
+      },
+      "bin": {
+        "json-server": "lib/bin.js"
+      },
+      "engines": {
+        "node": ">=18.3"
+      }
+    },
+    "node_modules/json-server-auth": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/json-server-auth/-/json-server-auth-2.1.0.tgz",
+      "integrity": "sha512-uf6rud43cH+bfOqA+kqSqdNdVtOj56qJ6nNKH6nAZ8bFxpMY9zzthgK9trrvkVDzihqLfvZ0rwWnGZHACNckGA==",
+      "dev": true,
+      "dependencies": {
+        "bcryptjs": "^2.4.3",
+        "jsonwebtoken": "^8.5.1",
+        "yargs": "^16.2.0"
+      },
+      "bin": {
+        "json-server-auth": "dist/bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "json-server": "*"
+      }
+    },
+    "node_modules/json-server/node_modules/chalk": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+      "dev": true,
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
@@ -12165,6 +12620,37 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/jsonwebtoken": {
+      "version": "8.5.1",
+      "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-8.5.1.tgz",
+      "integrity": "sha512-XjwVfRS6jTMsqYs0EsuJ4LGxXV14zQybNd4L2r0UvbVnSF9Af8x7p5MzbJ90Ioz/9TI41/hTCvznF/loiSzn8w==",
+      "dev": true,
+      "dependencies": {
+        "jws": "^3.2.2",
+        "lodash.includes": "^4.3.0",
+        "lodash.isboolean": "^3.0.3",
+        "lodash.isinteger": "^4.0.4",
+        "lodash.isnumber": "^3.0.3",
+        "lodash.isplainobject": "^4.0.6",
+        "lodash.isstring": "^4.0.1",
+        "lodash.once": "^4.0.0",
+        "ms": "^2.1.1",
+        "semver": "^5.6.0"
+      },
+      "engines": {
+        "node": ">=4",
+        "npm": ">=1.4.28"
+      }
+    },
+    "node_modules/jsonwebtoken/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -12179,6 +12665,27 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/jwa": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz",
+      "integrity": "sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==",
+      "dev": true,
+      "dependencies": {
+        "buffer-equal-constant-time": "1.0.1",
+        "ecdsa-sig-formatter": "1.0.11",
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "node_modules/jws": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz",
+      "integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==",
+      "dev": true,
+      "dependencies": {
+        "jwa": "^1.4.1",
+        "safe-buffer": "^5.0.1"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -12314,6 +12821,42 @@
       "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
       "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
     },
+    "node_modules/lodash.includes": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz",
+      "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==",
+      "dev": true
+    },
+    "node_modules/lodash.isboolean": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz",
+      "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==",
+      "dev": true
+    },
+    "node_modules/lodash.isinteger": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz",
+      "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==",
+      "dev": true
+    },
+    "node_modules/lodash.isnumber": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
+      "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==",
+      "dev": true
+    },
+    "node_modules/lodash.isplainobject": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
+      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
+      "dev": true
+    },
+    "node_modules/lodash.isstring": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz",
+      "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==",
+      "dev": true
+    },
     "node_modules/lodash.memoize": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
@@ -12324,6 +12867,12 @@
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
     },
+    "node_modules/lodash.once": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
+      "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==",
+      "dev": true
+    },
     "node_modules/lodash.sortby": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz",
@@ -12345,6 +12894,21 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lowdb": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/lowdb/-/lowdb-7.0.1.tgz",
+      "integrity": "sha512-neJAj8GwF0e8EpycYIDFqEPcx9Qz4GUho20jWFR7YiFeXzF1YMLdxB36PypcTSPMA+4+LvgyMacYhlr18Zlymw==",
+      "dev": true,
+      "dependencies": {
+        "steno": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
     "node_modules/lower-case": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
@@ -12469,6 +13033,15 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/milliparsec": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/milliparsec/-/milliparsec-2.3.0.tgz",
+      "integrity": "sha512-b+6KYJw+DwQjk24qCUuq+lZvRXDpXJ02qsllKgKaDurHpQ0v7D5op9VAkdYM/pXRhFeh7uLYHmnwFnYvdXGa3A==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.4"
+      }
+    },
     "node_modules/mime": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
@@ -12626,6 +13199,15 @@
         "mkdirp": "bin/cmd.js"
       }
     },
+    "node_modules/mrmime": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mrmime/-/mrmime-2.0.0.tgz",
+      "integrity": "sha512-eu38+hdgojoyq63s+yTpN4XMBdt5l8HhMhc4VKLO9KM5caLIBvUm4thi7fFaxyTmCKeNnXZ5pAlBwCUnhA09uw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -14938,6 +15520,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.0.tgz",
+      "integrity": "sha512-q2yemJeg6gw/YixRlRnVx6IRJWZD6fonnfZhN1JIOhV2iJCPeRNSH3V1ISwHf+JWcESzLC3BOLD1T07tmO5dmg==",
+      "dependencies": {
+        "@remix-run/router": "1.15.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.22.0",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.0.tgz",
+      "integrity": "sha512-z2w+M4tH5wlcLmH3BMMOMdrtrJ9T3oJJNsAlBJbwk+8Syxd5WFJ7J5dxMEW0/GEXD1BBis4uXRrNIz3mORr0ag==",
+      "dependencies": {
+        "@remix-run/router": "1.15.0",
+        "react-router": "6.22.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -15134,6 +15746,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/regexparam": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/regexparam/-/regexparam-2.0.2.tgz",
+      "integrity": "sha512-A1PeDEYMrkLrfyOwv2jwihXbo9qxdGD3atBYQA9JJgreAx8/7rC6IUkWOw2NQlOxLp2wL0ifQbh1HuidDfYA6w==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/regexpu-core": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.3.2.tgz",
@@ -15834,6 +16455,20 @@
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
     },
+    "node_modules/sirv": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.4.tgz",
+      "integrity": "sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==",
+      "dev": true,
+      "dependencies": {
+        "@polka/url": "^1.0.0-next.24",
+        "mrmime": "^2.0.0",
+        "totalist": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/sisteransi": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.5.tgz",
@@ -15857,6 +16492,21 @@
         "websocket-driver": "^0.7.4"
       }
     },
+    "node_modules/sort-on": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/sort-on/-/sort-on-6.0.0.tgz",
+      "integrity": "sha512-d51VlJWoFQjp+cIZRyNusCyJdP5pLAw+H+sC4C2q6RhPBv+RAb/QXXck5q3Kdm7h/ot/kD2AlpGPDee8v+0qiA==",
+      "dev": true,
+      "dependencies": {
+        "dot-prop": "^8.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/source-list-map": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -16085,6 +16735,18 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/steno": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/steno/-/steno-4.0.2.tgz",
+      "integrity": "sha512-yhPIQXjrlt1xv7dyPQg2P17URmXbuM5pdGkpiMB3RenprfiBlvK415Lctfe0eshk90oA7/tNq7WEiMK8RSP39A==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
     "node_modules/stop-iteration-iterator": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz",
@@ -16775,6 +17437,15 @@
         "node": ">=0.6"
       }
     },
+    "node_modules/totalist": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/totalist/-/totalist-3.0.1.tgz",
+      "integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/tough-cookie": {
       "version": "4.1.3",
       "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
diff --git a/car-ui-react/package.json b/car-ui-react/package.json
index 955172c2..a0d4fad2 100644
--- a/car-ui-react/package.json
+++ b/car-ui-react/package.json
@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
@@ -36,6 +37,8 @@
     ]
   },
   "devDependencies": {
+    "json-server": "^1.0.0-alpha.23",
+    "json-server-auth": "^2.1.0",
     "tailwindcss": "^3.4.1"
   }
 }
diff --git a/car-ui-react/src/App.js b/car-ui-react/src/App.js
index a5f1f3b4..13812c04 100644
--- a/car-ui-react/src/App.js
+++ b/car-ui-react/src/App.js
@@ -1,8 +1,11 @@
 import './App.css';
+import { ProductsList } from './pages/Products/ProductsList';
 
 function App() {
   return (
-    <h1>Hello React</h1>
+    <div className='App'>
+      <ProductsList/>
+    </div>
   );
 }
 
diff --git a/car-ui-react/src/components/Elements/ProductCard.js b/car-ui-react/src/components/Elements/ProductCard.js
new file mode 100644
index 00000000..e0950013
--- /dev/null
+++ b/car-ui-react/src/components/Elements/ProductCard.js
@@ -0,0 +1,47 @@
+import React from 'react';
+
+
+export const ProductCard = ({product}) => {
+    const {carId, brand, model, year, color, mileage, price, quantity, tax, poster, in_stock} = product;
+
+  return (
+    <div className="m-3 max-w-sm bg-white rounded-lg border border-gray-200 shadow-md dark:bg-gray-800 dark:border-gray-700">
+        <a href="/" className="relative" >
+            {/* <span className="absolute top-4 left-2 px-2 bg-orange-500 bg-opacity-90 text-white rounded">Best Seller</span>  */}
+            <img className="rounded-t-lg w-full h-64" src={poster} alt="" />
+        </a>
+        <div className="p-5">
+            <a href="/">
+                <h5 className="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{brand} {model}</h5>
+            </a>
+            <p className="mb-3 font-normal text-gray-700 dark:text-gray-400">{color}</p>
+
+            <p className="mb-3 font-normal text-black dark:text-gray-400">
+                <span>mileage: </span><span>{mileage}</span>
+            </p>
+            <p className="mb-3 font-normal text-black dark:text-gray-400">
+                <span>quantity: </span><span>{quantity}</span>
+            </p>
+            <p className="mb-3 font-normal text-black dark:text-gray-400">
+                <span>tax: </span><span>{tax}</span>
+            </p>
+            
+            <div className="flex items-center my-2">
+                <i className="text-lg bi bi-star-fill text-yellow-500 mr-1">{in_stock}</i>
+                <i className="text-lg bi bi-star-fill text-yellow-500 mr-1"></i>
+                <i className="text-lg bi bi-star-fill text-yellow-500 mr-1"></i>
+                <i className="text-lg bi bi-star-fill text-yellow-500 mr-1"></i>
+                <i className="text-lg bi bi-star-fill text-yellow-500 mr-1"></i>
+            </div>
+
+            <p className="flex justify-between items-center">
+                <span className="text-2xl dark:text-gray-200">
+                    <span>INR </span><span>{price}</span>
+                </span>
+                {/* <button className="inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800"/> */}
+                <button className='inline-flex items-center py-2 px-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800'>Add To Cart +</button>
+            </p>
+        </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/car-ui-react/src/pages/Products/ProductsList.js b/car-ui-react/src/pages/Products/ProductsList.js
new file mode 100644
index 00000000..6c68b9f5
--- /dev/null
+++ b/car-ui-react/src/pages/Products/ProductsList.js
@@ -0,0 +1,53 @@
+import { useEffect, useState } from "react";
+import { ProductCard } from "../../components/Elements/ProductCard"
+
+
+export const ProductsList = () => {
+
+    const [products, setProducts] = useState([]);
+
+    useEffect(() => {
+        async function fetchProducts() {
+            const response = await fetch("http://localhost:8000/products");
+            const data = await response.json()
+            setProducts(data);
+        }
+        fetchProducts();
+    }, []);
+  return (
+    <main>
+      <section className="my-5">
+        {/* <h1 className="text-2xl text-center font-semibold dark:text-slate-100 mb-5 underline underline-offset-8">Available Cars</h1>     */}
+        <div className="my-5 flex justify-between">
+          <span className="text-2xl font-semibold dark:text-slate-100 mb-5">
+            All Cars (10)
+          </span>
+          <span>
+            <button
+              id="dropdownMenuIconButton"
+              data-dropdown-toggle="dropdownDots"
+              className="inline-flex items-center p-2 text-sm font-medium text-center text-gray-900 bg-gray-100 rounded-lg hover:bg-gray-200 dark:text-white dark:bg-gray-600 dark:hover:bg-gray-700"
+              type="button"
+            >
+              <svg
+                className="w-6 h-6"
+                aria-hidden="true"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path>
+              </svg>
+            </button>
+          </span>
+        </div>
+        <div className="flex flex-wrap justify-center lg:flex-row">
+            { products.map((product) => (
+                <ProductCard key={product.carId} product={product} />
+            ))}
+            
+        </div>
+      </section>
+    </main>
+  );
+};
diff --git a/car-ui-react/src/pages/Products/components/FilterBar.js b/car-ui-react/src/pages/Products/components/FilterBar.js
new file mode 100644
index 00000000..e69de29b