Index: frontend/src/App.tsx
===================================================================
--- frontend/src/App.tsx	(revision 15ec67f0faa204c0c5d0e1f4d4979ee8ff4fcd4a)
+++ frontend/src/App.tsx	(revision fd81a1852ddb6ef6fb10e109702ca71525257923)
@@ -1,19 +1,34 @@
 import { useEffect } from "react";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import AllUsers from "./components/userProfile/AllUsersHelper";
+import UserDetail from "./components/userProfile/UserDetail";
+
+function Home() {
+  useEffect(() => {
+    const fetchData = async () => {
+      const response = await fetch("http://localhost:8080/");
+      const data = await response.json();
+      console.log(data);
+    };
+    fetchData();
+  });
+
+  return (
+    <>
+      <p className="text-red-500">ok</p>
+    </>
+  );
+}
 
 function App() {
-	useEffect(() => {
-		const fetchData = async () => {
-			const response = await fetch("http://localhost:8080/");
-			const data = await response.json();
-			console.log(data);
-		};
-		fetchData();
-	});
-
-	return (
-		<>
-			<p className="text-red-500">ok</p>
-		</>
-	);
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/users" element={<AllUsers />} />
+        <Route path="/users/:userId" element={<UserDetail />} />
+      </Routes>
+    </BrowserRouter>
+  );
 }