feat: frontend first routing implementation

modules/frontend/src/App.tsx

@@ -1,8 +1,15 @@
 import React from "react";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import UserPage from "./components/UserPage/UserPage";
 
 const App: React.FC = () => {
-  return <UserPage />;
+  return (
+    <Router>
+      <Routes>
+        <Route path="/users/:id" element={<UserPage />} />
+      </Routes>
+    </Router>
+  );
 };
 
-export default App;
+export default App;

modules/frontend/src/components/UserPage/UserPage.tsx

@@ -1,17 +1,21 @@
 import React, { useEffect, useState } from "react";
-import { DefaultService } from "../../api/services/DefaultService"; // adjust path
+import { useParams } from "react-router-dom"; // <-- import
+import { DefaultService } from "../../api/services/DefaultService";
 import type { User } from "../../api/models/User";
 import styles from "./UserPage.module.css";
 
 const UserPage: React.FC = () => {
+  const { id } = useParams<{ id: string }>(); // <-- get user id from URL
   const [user, setUser] = useState<User | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
+    if (!id) return;
+
     const getUserInfo = async () => {
       try {
-        const userInfo = await DefaultService.getUsers("1", "all");
+        const userInfo = await DefaultService.getUsers(id, "all"); // <-- use dynamic id
         setUser(userInfo);
       } catch (err) {
         console.error(err);
@@ -21,7 +25,7 @@ const UserPage: React.FC = () => {
       }
     };
     getUserInfo();
-  }, []);
+  }, [id]);
 
   if (loading) return <div className={styles.loader}>Loading...</div>;
   if (error) return <div className={styles.error}>{error}</div>;