feat: create reusable NotFound component and add global 404 page; (#139)

* feat: create reusable NotFound component and add global 404 page

* fix: remove button from products not found page

* chore: remove Prisma and clean up unused files

apps/backend/package.json

@@ -61,13 +61,19 @@
 		"typescript": "^5.7.3"
 	},
 	"jest": {
-		"moduleFileExtensions": ["js", "json", "ts"],
+		"moduleFileExtensions": [
+			"js",
+			"json",
+			"ts"
+		],
 		"rootDir": "src",
 		"testRegex": ".*\\.spec\\.ts$",
 		"transform": {
 			"^.+\\.(t|j)s$": "ts-jest"
 		},
-		"collectCoverageFrom": ["**/*.(t|j)s"],
+		"collectCoverageFrom": [
+			"**/*.(t|j)s"
+		],
 		"coverageDirectory": "../coverage",
 		"testEnvironment": "node"
 	}

apps/frontend/app/not-found.tsx

@@ -0,0 +1,12 @@
+import NotFound from "@/components/shared/not-found";
+
+const GlobalNotFound = () => {
+  return (
+    <NotFound
+      title="Page Not Found"
+      description="The page you are looking for doesn’t exist or has been moved."
+    />
+  );
+};
+
+export default GlobalNotFound;

apps/frontend/components/marketplace/products-not-found.tsx

@@ -4,31 +4,35 @@ import { useTranslations } from "@/hooks/useTranslations";
 import { PackageSearch } from "lucide-react";
 import React, { type Dispatch, type SetStateAction } from "react";
 import { Button } from "../ui/button";
+import NotFound from "../shared/not-found";
 
 type ProductsNotFoundProps = {
-	setPriceRange: Dispatch<SetStateAction<[number, number]>>;
-	setSelectedCategories: Dispatch<SetStateAction<string[]>>;
+  setPriceRange: Dispatch<SetStateAction<[number, number]>>;
+  setSelectedCategories: Dispatch<SetStateAction<string[]>>;
 };
 
 export default function ProductsNotFound({
-	setPriceRange,
-	setSelectedCategories,
+  setPriceRange,
+  setSelectedCategories,
 }: ProductsNotFoundProps) {
-	const { t } = useTranslations();
+  const { t } = useTranslations();
 
-	const clearFilters = () => {
-		setPriceRange([0, 1500]);
-		setSelectedCategories([]);
-	};
+  const clearFilters = () => {
+    setPriceRange([0, 1500]);
+    setSelectedCategories([]);
+  };
 
-	return (
-		<section className="flex flex-col items-center justify-center space-y-4 mx-auto">
-			<PackageSearch className="text-[#9ea1ac] w-12 h-12" />
-			<h2 className="font-bold text-2xl">{t("common.noProducts.title")}</h2>
-			<p>{t("common.noProducts.description")}</p>
-			<Button onClick={clearFilters}>
-				{t("common.noProducts.clearFilters")}
-			</Button>
-		</section>
-	);
+  return (
+    <section className="flex flex-col items-center justify-center space-y-4 mx-auto">
+      <NotFound
+        icon={PackageSearch}
+        title={t("common.noProducts.title")}
+        description={t("common.noProducts.description")}
+      />
+
+      <Button onClick={clearFilters}>
+        {t("common.noProducts.clearFilters")}
+      </Button>
+    </section>
+  );
 }

apps/frontend/components/products/not-found.tsx

@@ -1,33 +1,21 @@
 "use client";
 
 import { PackageX } from "lucide-react";
-import Link from "next/link";
-
-import { Button } from "@/components/ui/button";
 import { useTranslations } from "@/hooks/useTranslations";
+import NotFound from "../shared/not-found"; 
 
-const NotFound = () => {
-	const { t } = useTranslations();
+const ProductNotFound = () => {
+  const { t } = useTranslations();
 
-	return (
-		<div className="flex flex-col items-center justify-center min-h-[calc(100vh-150px)] px-4">
-			<PackageX className="h-24 w-24 text-muted-foreground mb-8" />
-			<h1 className="text-4xl font-bold mb-4">{t("common.notFound.title")}</h1>
-			<p className="text-lg text-muted-foreground mb-8 text-center">
-				{t("common.notFound.description")}
-			</p>
-			<div className="flex gap-4">
-				<Button asChild>
-					<Link href="/marketplace">
-						{t("common.notFound.browseMarketplace")}
-					</Link>
-				</Button>
-				<Button variant="outline" asChild>
-					<Link href="/">{t("common.notFound.goHome")}</Link>
-				</Button>
-			</div>
-		</div>
-	);
+  return (
+    <>
+      <NotFound
+        icon={PackageX}
+        title={t("common.notFound.title")}
+        description={t("common.notFound.description")}
+      />
+    </>
+  );
 };
 
-export default NotFound;
+export default ProductNotFound;

apps/frontend/components/shared/not-found.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { AlertCircle } from "lucide-react";
+import Link from "next/link";
+import { Button } from "../ui/button";
+
+type NotFoundProps = {
+  icon?: React.ElementType;
+  title: string;
+  description: string;
+};
+
+const NotFound = ({
+  icon: Icon = AlertCircle,
+  title,
+  description,
+}: NotFoundProps) => {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-[calc(100vh-150px)] px-4">
+      <Icon className="h-24 w-24 text-muted-foreground mb-8" />
+      <h1 className="text-4xl font-bold mb-4">{title}</h1>
+      <p className="text-lg text-muted-foreground mb-8 text-center">
+        {description}
+      </p>
+      <div className="flex gap-4">
+        <Button asChild>
+          <Link href="/marketplace">Browse Marketplace</Link>
+        </Button>
+        <Button variant="outline" asChild>
+          <Link href="/">Go Home</Link>
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default NotFound;