diff --git a/client/package.json b/client/package.json
index 4fde489..6bdffed 100644
--- a/client/package.json
+++ b/client/package.json
@@ -21,6 +21,7 @@
"itty-router": "^2.6.6",
"react": "^18.3.1",
"react-dom": "^18.3.1",
+ "react-router-dom": "^6.24.1",
"serverless-cloudflare-workers": "^1.2.0"
},
"devDependencies": {
diff --git a/client/src/App.jsx b/client/src/App.jsx
index 9ce847f..960d0fe 100644
--- a/client/src/App.jsx
+++ b/client/src/App.jsx
@@ -1,11 +1,19 @@
-import * as React from "react";
import { NextUIProvider } from "@nextui-org/react";
-import { Home } from "./pages/Home";
+import { Outlet } from 'react-router-dom';
+import { Header } from "@/components/Header/Header";
+import { Footer } from "@/components/Footer/Footer";
-export const App = () => {
+const App = () => {
return (
-
-
-
+
+
+
+
+
+
+
+
);
-}
\ No newline at end of file
+};
+
+export default App;
\ No newline at end of file
diff --git a/client/src/index.js b/client/src/index.js
index a2d02fa..c5faf29 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -5,30 +5,42 @@ const router = Router();
const { base64Handler, healthHandler, postHandler, rootHandler, routesAndAssetsHandler } = routes;
-/** The rootHandler will serve the React app accordingly
- * Other routes can be defined as neeeded
+/**
+ * Health route
+ * This route is used to check the health status of the application.
+ * When a GET request is made to /health, it will be handled by the healthHandler.
*/
-router.get('/', rootHandler);
-// Health route
router.get('/health', healthHandler);
-// Test route
+
+/**
+ * Test route for base64 encoding
+ * This route takes a text parameter and returns its base64 encoded version.
+ * When a GET request is made to /base64/:text, it will be handled by the base64Handler.
+ */
router.get("/base64/:text", base64Handler);
-// Test post route
+
+/**
+ * Test POST route
+ * This route is used to handle POST requests for testing purposes.
+ * When a POST request is made to /post, it will be handled by the postHandler.
+ */
router.post("/post", postHandler);
/**
- * This is the last route we define, it will match anything that hasn't hit a route we've defined
- * above, therefore it's useful as a 404 (and avoids us hitting worker exceptions, so make sure
- * to include it!).
+ * Catch-all route for serving the React app
+ * This is the last route we define. It will match any route that hasn't been
+ * defined above, making it useful as a catch-all route.
+ * This ensures that any route not explicitly defined will serve the React app,
+ * allowing the client-side routing of React Router to take over.
*/
-router.all("*", () => new Response("404, not found!", { status: 404 }));
+router.all('*', rootHandler);
/**
- * All incoming requests to the worker are passed to the router
- * where your routes are called and the response is sent.
- * routesAndAssetsHandler will map assets and routes accordingly
+ * Event listener for incoming requests
+ * All incoming requests to the worker are passed to the router where your routes
+ * are called, and the response is sent. The routesAndAssetsHandler will map
+ * assets and routes accordingly.
*/
addEventListener('fetch', event => {
event.respondWith(routesAndAssetsHandler(event, router));
});
-
diff --git a/client/src/main.js b/client/src/main.js
index 1bec7b3..6795e2a 100644
--- a/client/src/main.js
+++ b/client/src/main.js
@@ -1,7 +1,30 @@
-import { App } from './App';
import { createRoot } from 'react-dom/client';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
+import App from './App';
+import Error from './pages/Error';
+import Home from '@/pages/Home';
import './globals.css';
+const router = createBrowserRouter([
+ {
+ path: '/',
+ element: ,
+ errorElement: ,
+ children: [
+ {
+ index: true,
+ element: ,
+ },
+ {
+ path: '/test',
+ element: