frontend/src/components/CoursesWidget.jsx

@@ -0,0 +1,52 @@
+import { Card, Container } from "react-bootstrap";
+import { Link } from "wouter";
+
+const CoursesWidget = ({ className = "" }) => {
+  const dummyData = [
+    {
+      course_id: 1,
+      course_title: "Advanced Website Design",
+      couse_code: "COMP 2707",
+      instructor: "Saja Al Mamoori",
+    },
+    {
+      course_id: 2,
+      course_title: "Introduction to Roman Civilization",
+      couse_code: "GRST 1200",
+      instructor: "Max Nelson",
+    },
+    {
+      course_id: 3,
+      course_title: "Software Verification and Testing",
+      couse_code: "COMP 4110",
+      instructor: "Serif Saad",
+    },
+    {
+      course_id: 1,
+      course_title: "Advanced Website Design",
+      couse_code: "COMP 2707",
+      instructor: "Saja Al Mamoori",
+    },
+  ];
+  return (
+    <Container
+      className={`${className} py-3 d-flex flex-wrap justify-content-around`}
+    >
+      {dummyData.map((course, i) => {
+        return (
+          <Link is="a" key={i} href={`/course/${course.course_id}`}>
+            <Card role="button" className="m-2" style={{ width: "300px" }}>
+              <h2 className="text-center py-5 border">{course.couse_code}</h2>
+              <Card.Body>
+                <Card.Title>{course.course_title}</Card.Title>
+                <Card.Text>{course.instructor}</Card.Text>
+              </Card.Body>
+            </Card>
+          </Link>
+        );
+      })}
+    </Container>
+  );
+};
+
+export default CoursesWidget;

frontend/src/pages/HomePage.jsx

@@ -1,5 +1,6 @@
 import { useContext } from "react";
 import { Container } from "react-bootstrap";
+import CoursesWidget from "../components/CoursesWidget";
 import MyNavbar from "../components/MyNavbar";
 import UserContext from "../contexts/UserContext";
 
@@ -13,6 +14,13 @@ const HomePage = () => {
         <div>
           <h1>Welcome back {currentUser?.username}!</h1>
         </div>
+        <br />
+        <br />
+        <br />
+        <div>
+          <h2>Courses</h2>
+          <CoursesWidget className="ms-0 w-75 border" />
+        </div>
       </Container>
     </div>
   );