Dev

frontend/package.json

@@ -8,10 +8,19 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.5.2",
     "@types/node": "^16.18.82",
-    "@types/react": "^18.2.56",
+    "@types/react": "^18.2.57",
     "@types/react-dom": "^18.2.19",
+    "chroma-js": "^2.4.2",
+    "clsx": "^2.1.0",
+    "d3": "^7.8.5",
+    "lodash": "^4.17.21",
+    "lodash.debounce": "^4.0.8",
     "react": "^18.2.0",
+    "react-bootstrap": "^2.10.1",
     "react-dom": "^18.2.0",
+    "react-native-linear-gradient": "^2.8.3",
+    "react-native-svg": "^14.1.0",
+    "react-router-dom": "^6.22.1",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
@@ -39,5 +48,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/chroma-js": "^2.4.4",
+    "@types/d3": "^7.4.3",
+    "@types/lodash.debounce": "^4.0.9"
   }
 }

frontend/src/App.tsx

@@ -1,25 +1,12 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import "./App.css";
+import Providers from "./Providers";
+import Router from "./Router";
 
 function App() {
   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>
-      </header>
-    </div>
+    <Providers>
+      <Router />
+    </Providers>
   );
 }
 

frontend/src/Providers.tsx

@@ -0,0 +1,3 @@
+export default function Providers({ children }: { children: React.ReactNode }) {
+  return <>{children}</>;
+}

frontend/src/Router.tsx

@@ -0,0 +1,28 @@
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import "./index.css";
+import Courses from "./pages/Courses";
+import Majors from "./pages/Majors";
+import Graduation from "./pages/Graduation";
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <div>MajorAudit</div>,
+  },
+  {
+    path: "/courses",
+    element: <Courses />,
+  },
+  {
+    path: "/majors",
+    element: <Majors />,
+  },
+  {
+    path: "/graduation",
+    element: <Graduation />,
+  },
+]);
+
+export default function Router() {
+  return <RouterProvider router={router} />;
+}

frontend/src/commons/types.ts

@@ -0,0 +1,45 @@
+interface Course {
+  name: string;
+}
+
+interface DUS {
+  name: string;
+  address: string;
+  email: string;
+}
+
+interface MajorMetadataStats {
+  courses: number;
+  rating: number;
+  workload: number;
+  type: string;
+}
+
+interface MajorMetadata {
+  name: string;
+  abbreviation: string;
+  stats: MajorMetadataStats;
+  students: number;
+  about: string;
+  dus: DUS;
+  catologLink: string;
+  wesbiteLink: string;
+}
+
+interface MajorRequirementsSubsection {
+  name?: string;
+  courses: Array<Course>;
+}
+
+interface MajorRequirements {
+  name: string;
+  coursesCompleted: number;
+  coursesTotal: number;
+  description?: string;
+  subsections: Array<MajorRequirementsSubsection>;
+}
+
+export interface Major {
+  metadata: MajorMetadata;
+  requirements: Array<MajorRequirements>;
+}

frontend/src/pages/Courses/Courses.module.css

@@ -0,0 +1,64 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
+
+.Container {
+    margin: 2% 0% 2% 2%;
+}
+.Row {
+    display: flex;
+    flex-direction: row;
+}
+
+.Column {
+    display: flex;
+    flex-direction: column;
+    margin-right: 2%;
+    width: 100%;
+}
+
+.MetadataColumn {
+    font-size:small;
+    display: flex;
+    flex-direction: column;
+    margin-right: 1%;
+}
+
+.MetadataHeading {
+    color: #727272;
+    margin-bottom: 2px;
+}
+
+.MetadataBox {
+    border: 1px solid #C2C2C2;
+    color: #727272;
+    font-weight: 600;
+    width: 40px;
+    text-align: center
+}
+
+.Season {
+    margin-right: 1.5%;
+    margin-left: 1%;
+}
+
+.CourseCode {
+    font-size: small;
+    font-weight: 600;
+}
+
+.CourseName {
+    font-size: x-small;
+}
+
+.Grade {
+    font-weight: 600;
+    font-size:x-large;
+    margin-right: 0.5%;
+}
+
+.Year {
+    font-size:medium;
+    font-weight: 600;
+    color: #727272;
+    align-self:flex-end;
+    margin-bottom: 2.5px;
+}

frontend/src/pages/Courses/Courses.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import YearBox from "./components/YearBox";
+
+export default function Courses() {
+  return (
+    <div>
+      <YearBox grade="First Year"/>
+      <YearBox grade="Sophomore"/>
+      <YearBox grade="Junior"/>
+      <YearBox grade="Senior"/>
+    </div>
+  );
+}

frontend/src/pages/Courses/components/CourseBox.tsx

@@ -0,0 +1,61 @@
+import styles from "./../Courses.module.css"
+
+import fall_image from './../images/fall.png';
+import spring_image from './../images/spring.png';
+import checkmark from './../images/checkmark.png';
+
+type Props = {
+    readonly course: string;
+    readonly season: string;
+    readonly completed: string;
+};
+
+export default function CourseBox({ season, course, completed }: Props) {
+    return (
+        <div
+            style={{
+                borderRadius: "20px",
+                backgroundColor: completed === "true" ? "#E1E9F8" : "#F5F5F5",
+                marginBottom: "0.5%",
+                padding: "1%"
+            }}
+        >
+            <div className={styles.Row}>
+                <img src={checkmark}
+                    alt={completed}
+                    style={{
+                        marginLeft: "1%",
+                        display: completed === "true" ? "flow" : "none"
+                    }}></img>
+                <img src={season === "fall" ? fall_image : spring_image} alt={season} className={styles.Season}></img>
+                <div className={styles.Column}>
+                    <div className={styles.CourseCode}>{course}</div>
+                    <div className={styles.CourseName}>{"full course name"}</div>
+                </div>
+                <div className={styles.Row} style={{ fontSize: "small", alignItems: "center"}}>
+                    <div className={styles.MetadataBox}
+                        style={{
+                            borderRadius: "25px",
+                            marginRight: "5%"
+                        }}>
+                        {"~4.0"}
+                    </div>
+                    <div className={styles.MetadataBox}
+                        style={{
+                            borderRadius: "25px",
+                            marginRight: "5%"
+                        }}>
+                        {"~4.0"}
+                    </div>
+                    <div className={styles.MetadataBox}
+                        style={{
+                            borderRadius: "25px",
+                            marginRight: "5%"
+                        }}>{
+                            "~3.8"}
+                    </div>
+                </div>
+            </div>
+        </div >
+    );
+}

frontend/src/pages/Courses/components/MetadataBox.tsx

@@ -0,0 +1,18 @@
+import styles from "./../Courses.module.css"
+
+
+type Props = {
+  readonly heading: string;
+  readonly text: string;
+};
+
+export default function MetadataBox({ heading, text }: Props) {
+  return (
+    <div className={styles.MetadataColumn}>
+        <div className={styles.MetadataHeading}>{heading}</div>
+        <div className={styles.Row} style={{marginBottom:"10%"}}>
+            <div className={styles.MetadataBox} style={{borderRadius: "7px"}}>{text}</div>
+        </div>
+    </div>
+  );
+}

frontend/src/pages/Courses/components/SemesterBox.tsx

@@ -0,0 +1,23 @@
+import styles from "./../Courses.module.css"
+import CourseBox from "./CourseBox";
+import MetadataBox from "./MetadataBox";
+
+
+type Props = {
+    readonly season: string;
+};
+
+export default function SemesterBox({ season }: Props) {
+    return (
+        <div className={styles.Column}>
+            <div className={styles.Row}>
+                <MetadataBox heading="CREDITS" text="5.5"/>
+                <MetadataBox heading="RATING" text="~4.0"/>
+                <MetadataBox heading="WORKLOAD" text="~3.8"/>
+                <MetadataBox heading="DISTRIBUTIONALS" text="So"/>
+            </div>
+            <CourseBox season={season} course="COURSE NAME #1" completed="true"/>
+            <CourseBox season={season} course="COURSE NAME #2" completed="false"/>
+        </div>
+    );
+}

frontend/src/pages/Courses/components/YearBox.tsx

@@ -0,0 +1,21 @@
+import styles from "./../Courses.module.css"
+import SemesterBox from "./SemesterBox";
+
+type Props = {
+  readonly grade: string;
+};
+
+export default function YearBox({ grade }: Props) {
+  return (
+    <div className={styles.Container}>
+        <div className={styles.Row}>
+            <div className={styles.Grade}>{grade}</div>
+            <div className={styles.Year}>{"2022-2023"}</div>
+        </div>
+        <div className={styles.Row}>
+            <SemesterBox season="fall"/>
+            <SemesterBox season="spring"/>
+        </div>
+    </div>
+  );
+}

frontend/src/pages/Courses/index.tsx

@@ -0,0 +1,2 @@
+import Courses from "./Courses";
+export default Courses;

frontend/src/pages/Graduation/Graduation.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import DistributionBox from "./components/DistributionBox";
+import CourseBox from "./components/CourseBox";
+import Navbar from "./components/Navbar";
+
+export default function Graduation() {
+  return (
+    <div>
+      <Navbar />
+      <DistributionBox text="Hu - Humanities & Arts" />
+      <DistributionBox text="So - Social Sciences" />
+      <DistributionBox text="Sc - Sciences" />
+      <DistributionBox text="QR - Quantitative Reasoning" />
+      <DistributionBox text="WR - Writing" />
+      <DistributionBox text="L - Language" />
+      <CourseBox text="LING 191" hasCheck={true} distributions={["Hu"]} />
+      <CourseBox text="CGSC 274" distributions={["QR", "Sc", "So"]} />
+      <CourseBox text="CPSC 419" distributions={[]} />
+    </div>
+  );
+}