frontend/src/App.js

@@ -5,6 +5,7 @@ import LoginPage from "./pages/LoginPage";
 import LogoutPage from "./pages/LogoutPage";
 import RegisterPage from "./pages/RegisterPage";
 import CoursePage from "./pages/CoursePage";
+import AssignmentPage from "./pages/AssignmentPage";
 import ManagePage from "./pages/ManagePage";
 import ManageStudentsPage from "./pages/ManageStudentsPage";
 import AuthenticatedRoute from "./components/AuthenticatedRoute";
@@ -46,6 +47,16 @@ function App() {
         }}
       </Route>
 
+      <Route path="/assignment/:id">
+        {(params) => {
+          return (
+            <AuthenticatedRoute>
+              <AssignmentPage id={params.id} />
+            </AuthenticatedRoute>
+          );
+        }}
+      </Route>
+
       <AuthRoute path="/manage">
           <ManagePage />
       </AuthRoute>

frontend/src/pages/AssignmentPage.jsx

@@ -0,0 +1,50 @@
+import { useEffect, useState } from "react";
+import { Container } from "react-bootstrap";
+import MyNavbar from "../components/MyNavbar";
+import { makeRequest } from "../utils.ts";
+
+const AssignmentPage = ({ id }) => {
+  const [assignmentData, setAssignmentData] = useState({});
+
+  useEffect(() => {
+    makeRequest({ endpoint: `assignment/${id}` })
+      .then((resp) => resp.json())
+      .then((data) => {
+        setAssignmentData(data);
+      });
+  }, []);
+
+  const Title = ({ children, className, ...rest }) => {
+    return (
+      <p className={`${className} fs-6`} {...rest}>
+        {children}
+      </p>
+    );
+  };
+
+  const Value = ({ children, className, ...rest }) => {
+    return (
+      <p className={`${className} fs-4`} {...rest}>
+        {children}
+      </p>
+    );
+  };
+
+  return (
+    <div>
+      <MyNavbar />
+      <Container className="p-5 border">
+        <Title>Name</Title>
+        <Value>{assignmentData.name}</Value>
+        <hr />
+        <Title>Description</Title>
+        <Value>{assignmentData.description}</Value>
+        <hr />
+        <Title>Due Date</Title>
+        <Value>{assignmentData.due_date}</Value>
+      </Container>
+    </div>
+  );
+};
+
+export default AssignmentPage;