Add a simple default 404 page (#527)

frontend/src/components/NotFound/NotFound.test.tsx

@@ -0,0 +1,10 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { NotFound } from './NotFound';
+
+describe('NotFound Component', () => {
+    it('should render a 404 text', () => {
+        render(<NotFound />);
+        expect(screen.getByText('Oops, page not found')).toBeInTheDocument();
+    });
+});

frontend/src/components/NotFound/NotFound.tsx

@@ -0,0 +1,18 @@
+import { Link } from '@tanstack/react-router';
+import { FC } from 'react';
+
+export const NotFound: FC = () => {
+    return (
+        <div className="h-screen w-screen flex items-center justify-center">
+            <div className="space-y-4">
+                <h1 className="text-2xl">Oops, page not found</h1>
+                <Link
+                    to="/"
+                    className="px-6 py-3 block text-center bg-gray-700 text-white hover:bg-gray-800 focus:ring-gray-500 rounded-lg"
+                >
+                    Go Back Home
+                </Link>
+            </div>
+        </div>
+    );
+};

frontend/src/components/index.ts

@@ -56,3 +56,5 @@ export type { CommentBubbleProps } from './CommentBubble';
 
 export { FileDownload } from './FileDownload';
 export type { FileDownloadProps } from './FileDownload';
+
+export { NotFound } from './NotFound/NotFound';

frontend/src/main.tsx

@@ -10,12 +10,13 @@ import { routeTree } from './routeTree.gen';
 
 import './index.css';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { NotFound } from '@components';
 
 const queryClient = new QueryClient();
 
 function Router() {
     const auth = useAuth();
-    
+
     if (auth.isLoading) {
         return (
             <div className="min-h-screen flex items-center justify-center">
@@ -30,8 +31,9 @@ function Router() {
         context: {
             auth,
         },
+        defaultNotFoundComponent: NotFound,
     });
-    
+
     return <RouterProvider router={router} context={{ auth }} />;
 }