added routing

frontend/package.json

@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.56",

frontend/src/main.tsx

@@ -1,10 +1,39 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
+import {createBrowserRouter, RouterProvider,} from "react-router-dom";
 import './index.css'
+import Root from './pages/root.tsx'
+import ErrorPage from './pages/error.tsx'
+import LoginScreen from "./pages/login/LoginScreen.tsx";
+import HomeAdmin from "./pages/admin/HomeAdmin.tsx";
+import HomeStudent from "./pages/student/HomeStudent.tsx";
+import HomeTeacher from "./pages/teacher/HomeTeacher.tsx";
 
+const router = createBrowserRouter([
+    {
+        path: "/",
+        element: <Root/>,
+        errorElement: <ErrorPage/>
+    },
+    {
+        path: "/login",
+        element: <LoginScreen/>
+    },
+    {
+        path: "/admin",
+        element: <HomeAdmin/>
+    },
+    {
+        path: "/student",
+        element: <HomeStudent/>
+    },
+    {
+        path: "/teacher",
+        element: <HomeTeacher/>
+    }
+]);
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router}/>
   </React.StrictMode>,
 )

frontend/src/pages/admin/HomeAdmin.tsx

@@ -1,6 +1,6 @@
 import {JSX} from "react";
 
-export function HomeAdmin(): JSX.Element {
+export default function HomeAdmin(): JSX.Element {
     return (
         <>Homescreen for an admin</>
     )

frontend/src/pages/error.tsx

@@ -0,0 +1,17 @@
+import { useRouteError } from "react-router-dom";
+import {JSX} from 'react';
+
+export default function ErrorPage(): JSX.Element {
+    const error = useRouteError();
+    console.error(error);
+
+    return (
+        <div id="error-page">
+            <h1>Oops!</h1>
+            <p>Sorry, an unexpected error has occurred.</p>
+            <p>
+                <i>{error.statusText || error.message}</i>
+            </p>
+        </div>
+    );
+}

frontend/src/pages/login/LoginScreen.tsx

@@ -1,6 +1,6 @@
 import {JSX} from "react";
 
-export function LoginScreen(): JSX.Element {
+export default function LoginScreen(): JSX.Element {
     return (
         <>Login screen</>
     )

frontend/src/pages/root.tsx

@@ -0,0 +1,12 @@
+import {JSX} from "react";
+import {Link} from "react-router-dom";
+
+export default function Root(): JSX.Element {
+    // TODO: logic to send user to /login or
+    return (
+        <>
+            <>Redirecting ...</>
+            <Link to={`/login`}>goto login page</Link>
+        </>
+)
+}

frontend/src/pages/student/HomeStudent.tsx

@@ -1,6 +1,6 @@
 import {JSX} from "react";
 
-export function HomeStudent(): JSX.Element {
+export default function HomeStudent(): JSX.Element {
     return (
         <>Homescreen for a student</>
     )

frontend/src/pages/teacher/HomeTeacher.tsx

@@ -1,6 +1,6 @@
 import {JSX} from "react";
 
-export function HomeTeacher(): JSX.Element {
+export default function HomeTeacher(): JSX.Element {
     return (
         <>Homescreen for a teacher</>
     )