first design

package.json

@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.13.4",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

src/App.tsx

-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import "./App.css";
+import CourseWidget from "./courses/CourseWidget";
+import { courses } from "./courses/data";
+import {
+  AppBar,
+  Box,
+  Button,
+  Grid,
+  IconButton,
+  Toolbar,
+  Typography,
+} from "@mui/material";
+
+// const courses is a list of type Course
+
 
 function App() {
+  const navItems = ["Home", "Courses", "Add a course", "Contact"];
+  const [mobileOpen, setMobileOpen] = React.useState(false);
+  const handleDrawerToggle = () => {
+    setMobileOpen(!mobileOpen);
+  };
+
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
+        {/* Website for fre */}
+        <AppBar component="nav" color="primary" position="absolute"sx={{background: '#6F3B55'}}>
+          <Toolbar>
+            <IconButton
+              color="inherit"
+              aria-label="open drawer"
+              edge="start"
+              onClick={handleDrawerToggle}
+              sx={{ mr: 2, display: { sm: "none" } }}
+            ></IconButton>
+            <Typography
+              variant="h6"
+              component="div"
+              sx={{ flexGrow: 1, display: { xs: "none", sm: "block" } }}
+            >
+              Free Course Contents available from the University of Waterloo
+            </Typography>
+            <Box sx={{ display: { xs: "none", sm: "block" } }}>
+              {navItems.map((item) => (
+                <Button key={item} sx={{ color: "#fff" }}>
+                  {item}
+                </Button>
+              ))}
+            </Box>
+          </Toolbar>
+        </AppBar>
+        <Grid sx={{
+          display: 'flex',
+          flexWrap: 'wrap',
+          alignItems: 'flex-start',
+          alignContent: 'flex-start',
+          py: 8,
+          m: 4,
+        }}>
+        {courses.map((course) => (
+          <CourseWidget {...course} />
+          ))}
+          </Grid>
       </header>
     </div>
   );

src/courses/CourseWidget.tsx

+import { Box, Chip, Link, Typography } from "@mui/material";
+import React from "react";
+import { Course } from "./types";
+// is passed in as a prop
+function CourseWidget(props: Course) {
+  return (
+    <div>
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          maxWidth: "20vw",
+          height: "20vh",
+          p: 4,
+          m: 2,
+          borderRadius: 5,
+          border: "1px solid #ffb1d8",
+          overflow: "hidden",
+        }}
+      >
+        <Typography
+          variant="h5"
+          component="div"
+          sx={{ color: "#11111`" , pt: 2}}
+          align="left"
+          
+        >
+          {props.department} {props.courseNumber} {props.title}
+        </Typography>
+        <Typography
+          variant="h6"
+          component="div"
+          sx={{
+            color: "#ffb1d8",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            // whiteSpace: "nowrap",
+
+            maxHeight: "6.5em",
+          }}
+          align="left"
+        >
+          {props.description}...
+        </Typography>
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "flex-end",
+            width: "100%",
+            my: 2,
+          }}
+        >
+          <Typography
+            variant="h6"
+            component="div"
+            sx={{
+              color: "#111111",
+              borderRadius: 5,
+              border: "1px solid #ffb1d8",
+              transition: "background 1s, color 1s",
+              ":hover": {
+                color: "#ffb1d8",
+                transform: "scale3d(1.05, 1.05, 1)",
+              },
+            }}
+          >
+            <Link href={props.link} underline="hover" sx={{ color: "#ffb1d8" }}>
+              <Chip label={props.platform} sx={{ color: "#ffb1d8" }} />
+            </Link>
+          </Typography>
+        </Box>
+      </Box>
+    </div>
+  );
+}
+
+export default CourseWidget;

src/courses/data.ts

+import { Course } from "./types";
+
+export const courses: Course[] = [
+    {
+      department: "ECE",
+      courseNumber: 150,
+      title: "Introduction to Programming in C++",
+      description: "Introduces all OOP paradmigns and basic data structures, covers the basics of C++",
+      link: "https://ece.uwaterloo.ca/~ece150/",
+      modes: "asynchronous",
+      platform: "Professor's website",
+      tags: ["ECE", "C++", "OOP"],
+      status: "Maintained",
+      termsOffered: "Fall and Winter",
+      credits: 0.5,
+    },
+    {
+      department: "ECE",
+      courseNumber: 350,
+      title: "Real-Time Operating Systems",
+      description: "Memory and virtual memory and caching; I/O devices, drivers, and permanent storage management; process scheduling; queue management in the kernel; real-time kernel development. Aspects of multi-core operating systems.",
+      link: "https://github.com/jzarnett/ece350",
+      modes: "asynchronous",
+      platform: "Github",
+      tags: ["ECE", "C++", "OOP"],
+      status: "Maintained",
+      termsOffered: "Winter and Summer",
+      credits: 0.5,
+    },
+    {
+      department: "SE",
+      courseNumber: 350,
+      title: "Operating Systems",
+      description: "Memory and virtual memory and caching; I/O devices, drivers, and permanent storage management; process scheduling; queue management in the kernel; real-time kernel development. Aspects of multi-core operating systems.",
+      link: "https://github.com/jzarnett/se350",
+      modes: "asynchronous",
+      platform: "Github",
+      tags: ["SE", "C++", "OOP"],
+      status: "Maintained",
+      termsOffered: "Winter and Summer",
+      credits: 0.5,
+    },
+    {
+      department: "ECE",
+      courseNumber: 459,
+      title: "Programming for Performance",
+      description: "This course will teach you how to write programs that run faster and use less memory. Topics include profiling, vectorization, parallel programming, memory hierarchy, and performance analysis.",
+      link: "https://github.com/jzarnett/ece459",
+      modes: "asynchronous",
+      platform: "Github",
+      tags: ["ECE", "C++", "OOP"],
+      status: "Maintained",
+      termsOffered: "Winter and Summer",
+      credits: 0.5,
+    },
+      
+  ];
+  
\ No newline at end of file

src/courses/types.ts

+
+export interface Course {
+    department: string; // e.g. "CS" or "ECE"
+    courseNumber: number; // e.g. 101
+    title: string; // e.g. "Intro to Computer Science"
+    description: string; // e.g. "Learn how to code!"
+    link: string; // e.g. "https://www.cs.ubc.ca"
+    modes: "in-person" | "online" | "asynchronous" | "synchronous" | "hybrid" | "other";
+    platform: string; // e.g. ["Canvas", "Piazza"]
+    tags: string[]; // e.g. ["CPSC", "Software Engineering"]
+    status: "Maintained" | "Deprecated" | "Discontinued but relevant";
+    termsOffered: "Winter" | "Summer" | "Fall" | "Winter and Summer" | "Fall and Winter" | "Summer and Fall" | "All";
+
+    // Optional fields
+    credits?: number; // e.g. 3
+    prereqs?: string[]; // e.g. ["CPSC 110", "CPSC 121"]
+    coreqs?: string[]; // e.g. ["CPSC 210"]
+    recommended?: string[]; // e.g. ["CPSC 213"]
+    restrictions?: string[]; // e.g. ["Restricted to students in the BCS program"]
+    notes?: string[]; // e.g. ["This course is hard"]
+    equivalent?: string[]; // e.g. ["CPEN 221"]
+}