Set fiber as direct dependency

backend/go.mod

@@ -11,7 +11,7 @@ require (
 // These are all for fiber
 require (
 	github.com/andybalholm/brotli v1.0.5 // indirect
-	github.com/gofiber/fiber/v2 v2.52.1 // indirect
+	github.com/gofiber/fiber/v2 v2.52.1
 	github.com/google/uuid v1.5.0 // indirect
 	github.com/klauspost/compress v1.17.0 // indirect
 	github.com/mattn/go-colorable v0.1.13 // indirect

frontend/src/App.css

@@ -1,46 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-a {
-  display:inline-block;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

frontend/src/App.tsx

@@ -1,31 +0,0 @@
-import reactLogo from "./assets/react.svg";
-import viteLogo from "/vite.svg";
-import "./App.css";
-import { CountButton } from "./Components/CountButton";
-
-function App(): JSX.Element {
-  return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
-          <img src={viteLogo} className="logo h-32" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank" rel="noreferrer">
-          <img src={reactLogo} className="logo react h-32" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <CountButton />
-        <p className="pt-6">
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  );
-}
-
-export default App;

frontend/src/Components/TaskList.tsx

@@ -0,0 +1,36 @@
+/**
+ * The shape of a task
+ */
+interface Task {
+  id: number;
+  name: string;
+}
+
+/**
+ * The props for the TaskList component
+ */
+interface TaskProps {
+  tasks: Task[];
+}
+
+/**
+ * A simple list of tasks
+ * @param props - The tasks to display
+ * @returns {JSX.Element} The task list
+ * @example
+ * const tasks = [{ id: 1, name: "Do the thing" }];
+ * return <TaskList tasks={tasks} />;
+ */
+export function TaskList(props: TaskProps): JSX.Element {
+  return (
+    <div>
+      <h1>Task List</h1>
+      <p>Tasks go here</p>
+      <ul>
+        {props.tasks.map((task) => (
+          <li key={task.id}>{task.name}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}

frontend/src/Containers/ContainerDemo.tsx

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+
+/** The props for the container */
+interface ContainerProps {
+  children: ReactNode;
+}
+
+/**
+ * Contains children
+ * @param props - The children to contain
+ * @returns {JSX.Element} The container
+ */
+export function Container(props: ContainerProps): JSX.Element {
+  return <div>{props.children}</div>;
+}
+
+/**
+ * Contains even more children
+ * @param props
+ * @returns {JSX.Element}
+ */
+export function Container2(props: ContainerProps): JSX.Element {
+  return <Container>{props.children}</Container>;
+}

frontend/src/Pages/Home.tsx

@@ -0,0 +1,36 @@
+import reactLogo from "../assets/react.svg";
+import viteLogo from "/vite.svg";
+import "../index.css";
+import { CountButton } from "../Components/CountButton";
+import { Link } from "react-router-dom";
+
+/**
+ * The home page of the application
+ * @returns {JSX.Element} The home page
+ */
+export default function HomePage(): JSX.Element {
+  return (
+    <>
+      <div>
+        <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
+          <img src={viteLogo} className="logo h-32 p-5" alt="Vite logo" />
+        </a>
+        <a href="https://react.dev" target="_blank" rel="noreferrer">
+          <img
+            src={reactLogo}
+            className="logo react h-32 p-5"
+            alt="React logo"
+          />
+        </a>
+      </div>
+      <h1>Vite + React</h1>
+      <div className="card flex flex-col items-center space-y-4">
+        <CountButton />
+        <Link to="/settings">To Settings</Link>
+      </div>
+      <p className="read-the-docs">
+        Click on the Vite and React logos to learn more
+      </p>
+    </>
+  );
+}

frontend/src/Pages/Settings.tsx

@@ -0,0 +1,17 @@
+import "../index.css";
+import { Link } from "react-router-dom";
+
+/**
+ * The settings page of the application
+ * @returns {JSX.Element} The settings page
+ */
+export default function SettingsPage(): JSX.Element {
+  return (
+    <>
+      <h1>Very Fancy Settings Page</h1>
+      <div className="card">
+        <Link to="/">To Home</Link>
+      </div>
+    </>
+  );
+}

frontend/src/index.css

@@ -2,6 +2,11 @@
 @tailwind components;
 @tailwind utilities;
 
+/* 
+ * We are using tailwind, so do not add any custom CSS here. 
+ * Most of this is going to get cleaned up eventually.
+ */
+
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
@@ -70,3 +75,48 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+a {
+  display: inline-block;
+}
+
+.logo {
+  transition: filter 0.25s;
+}
+
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

frontend/src/main.tsx

@@ -1,18 +1,26 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
-import App from "./App.tsx";
+import SettingsPage from "./Pages/Settings.tsx";
+import HomePage from "./Pages/Home.tsx";
 import "./index.css";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
+// This is where the routes are mounted
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <App />,
+    element: <HomePage />,
+  },
+  {
+    path: "/settings",
+    element: <SettingsPage />,
   },
 ]);
 
+// Semi-hacky way to get the root element
 const root = document.getElementById("root") ?? document.createElement("div");
 
+// Render the router at the root
 ReactDOM.createRoot(root).render(
   <React.StrictMode>
     <RouterProvider router={router} />