hcabel · Copilot · May 16, 2026 · May 16, 2026
diff --git a/apps/hugomeet/index.html b/apps/hugomeet/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>HugoMeet</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/src/main.tsx"></script>
+	</body>
+</html>
diff --git a/apps/hugomeet/project.json b/apps/hugomeet/project.json
@@ -9,30 +9,64 @@
   ],
   "targets": {
     "build": {
-      "executor": "@nx/next:build",
+      "executor": "@nx/vite:build",
       "outputs": [
         "{options.outputPath}"
       ],
-      "nextConfig": "apps/hugomeet/next.config.js",
       "options": {
-        "root": "apps/hugomeet",
-        "outputPath": "dist/apps/hugomeet"
+        "outputPath": "dist/apps/hugomeet",
+        "configFile": "apps/hugomeet/vite.config.mts"
+      },
+      "configurations": {
+        "development": {
+          "mode": "development"
+        },
+        "production": {
+          "mode": "production"
+        }
+      }
+    },
+    "dev": {
+      "executor": "@nx/vite:dev-server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "hugomeet:build"
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "hugomeet:build:development"
+        },
+        "production": {
+          "buildTarget": "hugomeet:build:production"
+        }
       }
     },
     "serve": {
-      "executor": "@nx/next:server",
+      "executor": "@nx/vite:dev-server",
       "defaultConfiguration": "development",
       "options": {
-        "buildTarget": "hugomeet:build",
-        "dev": true
+        "buildTarget": "hugomeet:build"
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "hugomeet:build:development"
+        },
+        "production": {
+          "buildTarget": "hugomeet:build:production"
+        }
+      }
+    },
+    "preview": {
+      "executor": "@nx/vite:preview-server",
+      "options": {
+        "buildTarget": "hugomeet:build"
       },
       "configurations": {
         "development": {
-          "dev": true
+          "buildTarget": "hugomeet:build:development"
         },
         "production": {
-          "buildTarget": "hugomeet:build",
-          "dev": false
+          "buildTarget": "hugomeet:build:production"
         }
       }
     },
@@ -44,7 +78,7 @@
       ],
       "options": {
         "commands": [
-          "pm2 start --name HugoMeet next -- start -p 3000"
+          "pm2 start --name HugoMeet node -- apps/hugomeet/server.js 3000"
         ]
       }
     },

diff --git a/apps/hugomeet/src/App.tsx b/apps/hugomeet/src/App.tsx
@@ -0,0 +1,27 @@
+import { Navigate, Route, Routes, useParams } from "react-router-dom";
+
+import LandingPage from "./components/LandingPage/LandingPage";
+import Providers from "./components/Providers";
+import RoomPage from "./components/RoomPage/RoomPage";
+import RouteLifecycleHandler from "./components/RouteLifecycleHandler";
+
+function RoomPageRoute() {
+	const params = useParams<{ roomId: string }>();
+	if (!params.roomId) {
+		return <Navigate to="/" replace />;
+	}
+	return <RoomPage roomId={params.roomId} />;
+}
+
+export default function App() {
+	return (
+		<Providers>
+			<RouteLifecycleHandler />
+			<Routes>
+				<Route path="/" element={<LandingPage />} />
+				<Route path="/room/:roomId" element={<RoomPageRoute />} />
+				<Route path="*" element={<Navigate to="/" replace />} />
+			</Routes>
+		</Providers>
+	);
+}
diff --git a/apps/hugomeet/src/components/Header/Header.tsx b/apps/hugomeet/src/components/Header/Header.tsx
@@ -1,18 +1,18 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { usePathname, useRouter } from "next/navigation";
+import { useLocation, useNavigate } from "react-router-dom";
 
 import HugoMeetLogo from "./assets/HugoMeetLogo.png";
 
 export default function Header() {
 	const [dateTime, setDateTime] = useState(new Date());
-	const router = useRouter();
-	const pathname = usePathname();
+	const navigate = useNavigate();
+	const location = useLocation();
 
 	function goToTheLandingPage() {
-		if (pathname !== "/") {
-			router.push("/");
+		if (location.pathname !== "/") {
+			navigate("/");
 		}
 	}
 
@@ -53,7 +53,7 @@ export default function Header() {
 	return (
 		<header className="Header">
 			<div className="H-Logo" onClick={goToTheLandingPage}>
-				<img className="H-L-Logo" src={HugoMeetLogo.src} alt="HugoMeet logo" />
+				<img className="H-L-Logo" src={HugoMeetLogo} alt="HugoMeet logo" />
 				<span className="H-L-Hugo">Hugo</span>
 				<span className="H-L-Meet">Meet</span>
 			</div>

diff --git a/apps/hugomeet/src/components/LandingPage/LandingPage.tsx b/apps/hugomeet/src/components/LandingPage/LandingPage.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, type ChangeEvent } from "react";
-import { useRouter } from "next/navigation";
+import { useNavigate } from "react-router-dom";
 
 import Header from "../Header/Header";
 
@@ -28,22 +28,22 @@ const presentationText = [
 ];
 
 export default function LandingPage() {
-	const router = useRouter();
+	const navigate = useNavigate();
 	const [presentationIndex, setPresentationIndex] = useState(0);
 	const [value, setValue] = useState("");
 	const [focused, setFocused] = useState(false);
 
 	function createNewRoom() {
 		const newRoomId = Utils.idGenerator.generateRoomID(9);
-		router.push(`/room/${newRoomId}`);
+		navigate(`/room/${newRoomId}`);
 	}
 
 	function joinRoom(roomId: string) {
 		if (!Utils.idGenerator.isRoomIDValid(roomId)) {
 			console.warn("RoomID is not valid !");
 			return;
 		}
-		router.push(`/room/${roomId}`);
+		navigate(`/room/${roomId}`);
 	}
 
 	function updateInputValue(e: ChangeEvent<HTMLInputElement>) {
@@ -141,7 +141,7 @@ export default function LandingPage() {
 						</button>
 						<div className="LP-B-IL-C-Content">
 							<div className="LP-B-IL-C-C-TextImage">
-								<img width="100%" height="100%" alt="presentation images" src={presentationPhotos[presentationIndex].src}></img>
+								<img width="100%" height="100%" alt="presentation images" src={presentationPhotos[presentationIndex]}></img>
 								<div className="LP-B-IL-C-C-TI-text">
 									<div className="LP-B-IL-C-C-TI-T-Title">{presentationTitle[presentationIndex]}</div>
 									<div className="LP-B-IL-C-C-TI-T-Text">{presentationText[presentationIndex]}</div>

diff --git a/apps/hugomeet/src/components/RoomPage/RoomPage.tsx b/apps/hugomeet/src/components/RoomPage/RoomPage.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { useRouter } from "next/navigation";
+import { useNavigate } from "react-router-dom";
 
 import PreRoomLayer from "./layers/preRoom/PreRoomLayer";
 import RoomLayer from "./layers/roomLayer/RoomLayer";
@@ -20,7 +20,7 @@ export default function RoomPage({ roomId }: RoomPageProps) {
 	const [selfId, setSelfId] = useState("");
 	const [rtcOptions, setRtcOptions] = useState<RTCConfiguration>({});
 
-	const router = useRouter();
+	const navigate = useNavigate();
 
 	function onConnectionCallback(msg: ConnectionCallbackMessage) {
 		setSelfId(msg.selfId);
@@ -38,7 +38,7 @@ export default function RoomPage({ roomId }: RoomPageProps) {
 
 		if (!navigator.mediaDevices) {
 			alert("This site is untrusted we cant access to the camera/or and microphone !");
-			router.push("/");
+			navigate("/");
 			return undefined;
 		}
 
@@ -106,9 +106,9 @@ export default function RoomPage({ roomId }: RoomPageProps) {
 
 	useEffect(() => {
 		if (!Utils.idGenerator.isRoomIDValid(roomId)) {
-			router.push("/");
+			navigate("/");
 		}
-	}, [roomId, router]);
+	}, [roomId, navigate]);
 
 	useEffect(() => {
 		if (window.clockTimeout !== undefined) {

diff --git a/apps/hugomeet/src/components/RoomPage/layers/preRoom/PreRoomLayer.tsx b/apps/hugomeet/src/components/RoomPage/layers/preRoom/PreRoomLayer.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from "react";
 import { useCookies } from "react-cookie";
-import { usePathname, useRouter } from "next/navigation";
+import { useLocation, useNavigate } from "react-router-dom";
 
 import config from "../../../../config";
 import Header from "../../../Header/Header";
@@ -30,8 +30,8 @@ export default function PreRoomLayer(props: PreRoomLayerProps) {
 	);
 	const [state, setState] = useState<PreRoomState>("Form");
 
-	const router = useRouter();
-	const pathname = usePathname();
+	const navigate = useNavigate();
+	const location = useLocation();
 
 	function WSonMessage(msg: MessageEvent<string>) {
 		let parsedMessage: ConnectionCallbackMessage | JoinRequestCallbackMessage | { type: string };
@@ -66,8 +66,8 @@ export default function PreRoomLayer(props: PreRoomLayerProps) {
 			setState("Connection Error");
 		} else {
 			console.log(`WS close: ${event.code}${event.reason && ` - ${event.reason}`}`);
-			if (pathname !== "/") {
-				router.push("/");
+			if (location.pathname !== "/") {
+				navigate("/");
 			}
 		}
 	}

diff --git a/apps/hugomeet/src/components/RoomPage/layers/roomLayer/RoomLayer.tsx b/apps/hugomeet/src/components/RoomPage/layers/roomLayer/RoomLayer.tsx
@@ -13,7 +13,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { useRouter } from "next/navigation";
+import { useNavigate } from "react-router-dom";
 
 import Utils from "../../../../utils/utils";
 import type { Invitation, Peer, PeerConnectionEntry, RTCSignalMessage } from "../../../../types/hugomeet";
@@ -40,7 +40,7 @@ export default function RoomLayer(props: RoomLayerProps) {
 	const [_Peers, set_Peers] = useState<Peer[]>([]);
 	const [_PendingInvitation, set_PendingInvitation] = useState<Invitation[]>([]);
 
-	const router = useRouter();
+	const navigate = useNavigate();
 	const roomId = props.roomId;
 
 	///////////////////////////////////////////////////////////////////////////////
@@ -416,7 +416,7 @@ export default function RoomLayer(props: RoomLayerProps) {
 			PeersConnection.clear();
 			window.SignalingSocket.close();
 		}
-		router.push("/");
+		navigate("/");
 	}
 
 	function toggleAudio() {
@@ -543,7 +543,7 @@ export default function RoomLayer(props: RoomLayerProps) {
 			) {
 				new Notification("Hugo Meet - Joining request", {
 					body: `${parsedMessage.name} ask you for joining the room`,
-					icon: NotificationIcon.src,
+					icon: NotificationIcon,
 					requireInteraction: true,
 					silent: false,
 				});
@@ -747,7 +747,7 @@ export default function RoomLayer(props: RoomLayerProps) {
 						<img
 							className="RL-TB-C-B-CBL-Img"
 							alt="Leave the call"
-							src={HangUpIcon.src}
+							src={HangUpIcon}
 						/>
 					</div>
 				</div>

diff --git a/apps/hugomeet/src/components/RouteLifecycleHandler.tsx b/apps/hugomeet/src/components/RouteLifecycleHandler.tsx
@@ -1,15 +1,15 @@
 "use client";
 
 import { useEffect } from "react";
-import { usePathname } from "next/navigation";
+import { useLocation } from "react-router-dom";
 
 import Utils from "../utils/utils";
 
 export default function RouteLifecycleHandler() {
-	const pathname = usePathname();
+	const location = useLocation();
 
 	useEffect(() => {
-		if (!pathname.startsWith("/room/")) {
+		if (!location.pathname.startsWith("/room/")) {
 			if (window.SignalingSocket) {
 				window.SignalingSocket.onopen = undefined;
 				window.SignalingSocket.onmessage = undefined;
@@ -29,7 +29,7 @@ export default function RouteLifecycleHandler() {
 				window.localStream
 			);
 		}
-	}, [pathname]);
+	}, [location.pathname]);
 
 	return null;
 }
diff --git a/apps/hugomeet/src/config.ts b/apps/hugomeet/src/config.ts
@@ -1,6 +1,12 @@
 const config = {
-	url_front: process.env.NX_HUGOMEET_ENDPOINT || "",
-	url_signaling: process.env.NX_HUGOMEET_SS_ENDPOINT || "",
+	url_front:
+		import.meta.env.NX_HUGOMEET_ENDPOINT ??
+		(typeof process !== "undefined" ? process.env.NX_HUGOMEET_ENDPOINT : undefined) ??
+		"",
+	url_signaling:
+		import.meta.env.NX_HUGOMEET_SS_ENDPOINT ??
+		(typeof process !== "undefined" ? process.env.NX_HUGOMEET_SS_ENDPOINT : undefined) ??
+		"",
 };
 
 export default config;
diff --git a/apps/hugomeet/src/main.tsx b/apps/hugomeet/src/main.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { BrowserRouter } from "react-router-dom";
+
+import "./components/Header/HeaderCSS.css";
+import "./components/LandingPage/landingPageCSS.css";
+import "./components/RoomPage/roomPageCSS.css";
+import "./components/RoomPage/layers/preRoom/preRoomLayerCSS.css";
+import "./components/RoomPage/layers/roomLayer/roomLayerCSS.css";
+import "./components/RoomPage/layers/roomLayer/components/peerVideo/peerVideoCSS.css";
+import "./components/RoomPage/layers/roomLayer/components/notification/notificationHugoMeetCSS.css";
+
+import App from "./App";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+	<React.StrictMode>
+		<BrowserRouter>
+			<App />
+		</BrowserRouter>
+	</React.StrictMode>
+);
diff --git a/apps/hugomeet/src/types/assets.d.ts b/apps/hugomeet/src/types/assets.d.ts
@@ -0,0 +1,4 @@
+declare module "*.png" {
+	const src: string;
+	export default src;
+}
diff --git a/apps/hugomeet/src/vite-env.d.ts b/apps/hugomeet/src/vite-env.d.ts
@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+	readonly NX_HUGOMEET_ENDPOINT?: string;
+	readonly NX_HUGOMEET_SS_ENDPOINT?: string;
+}
+
+interface ImportMeta {
+	readonly env: ImportMetaEnv;
+}