error pages

frontend/package.json

@@ -19,12 +19,13 @@
     "@mui/styled-engine-sc": "^6.0.0-alpha.16",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.1",
+    "react-router-dom": "^6.22.3",
     "styled-components": "^6.1.8"
   },
   "devDependencies": {
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
+    "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react": "^4.2.1",

frontend/src/App.tsx

@@ -1,6 +1,7 @@
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import Home from "./pages/home/Home";
 import { Header } from "./components/Header/Header";
+import { NotFound } from "./pages/error/NotFound";
 
 /**
  * This component is the main application component that will be rendered by the ReactDOM. 
@@ -12,6 +13,7 @@ function App(): JSX.Element {
       <Header />
       <Routes>
         <Route index element={<Home />} />
+        <Route path="*" element={<NotFound />} />
       </Routes>
     </BrowserRouter>
   );

frontend/src/pages/error/NotFound.tsx

@@ -0,0 +1,22 @@
+import { Box, Typography } from "@mui/material";
+
+/**
+ * This component is the NotFound component that will be rendered when a page is not found.
+ * @returns - The NotFound component
+ */
+export function NotFound() {
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <Typography variant="h1">
+        404
+      </Typography>
+      <Typography variant="h3">
+        Page Not Found
+      </Typography>
+      <Typography variant="body1">
+        Sorry, the page you are looking for could not be found.  
+      </Typography>
+      <Box component="img" src="/error_pigeon.png" alt="icon" />
+    </Box>
+  );
+}

frontend/src/pages/error/ServerError.tsx

@@ -0,0 +1,22 @@
+import { Box, Typography } from "@mui/material";
+
+/**
+ * This component is the ServerError component that will be rendered when a general server error occurs.
+ * @returns - The ServerError component
+ */
+export function ServerError() {
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <Typography variant="h1">
+        5XX
+      </Typography>
+      <Typography variant="h3">
+        General Server Error
+      </Typography>
+      <Typography variant="body1">
+        Sorry, there seems to be a problem with the server.  
+      </Typography>
+      <Box component="img" src="/error_pigeon.png" alt="icon" />
+    </Box>
+  );
+}