Course Visualization

2023–2024 Yearlong Spark Project Update

Introduction

The UC Davis Catalog provides a list of classes a student needs to take to complete a degree for every major and minor. However, this list does not highlight all the prerequisites necessary for each of those classes. UC Davis’ Schedule Builder, only shows classes for the current and upcoming past quarter and Oasis does not show prerequisites. Course visualization is a partner project project with course planning, both teams worked with our stakeholder Matt, who is a UC Davis faculty.

The Team

Timeframe

Oct 2023 — Jun 2024 | 22 weeks

Tools

Front-end: React.js, Next.js, React Flow
Back-end: MongoDB, Node.js, Express.js
Design: Figma

Design

Research

Our initial research was split up into three main categories: user surveys, user interviews, and competitive research with UC Davis Applications. During these stages, our focus was to examine student needs when planning for graduation and pain points during the typical process.

Sketches

Following our initial user research, we digitally sketched various screens for the application. Above, are examples of our home page and visualization tool as we first began to brainstorm. During this stage, we were mainly trying to think about how to orient classes on such a complicated degree web.

Low Fidelity Designs

In our lo-fi’s, we experimented with numerous horizontal and vertical views for the visualization tool itself. In the earlier versions, we thought a vertical view would be the most simple method for students to think about a pathway. However, this was proven to be wrong as we continued to develop the idea.

Mid Fidelity Designs

As we worked on our mid-fi’s, we chose the horizontal perspective instead. Additionally, refined the functions to add/edit majors, create degree worksheets, and search for classes.

Development

Software Architecture

The front-end of our project is managed by React and Next.js. The authentication is using NextAuth.js, which uses email and password for the credentials. The back-end is managed by Express, where API requests are sent to MongoDB to store and retrieve data. MongoDB is our database, which store data such as our user, chart, course, and department information.

Back-End

User Routes
A crucial element of back-end infrastructure is how the user information will be organized and stored. The user will mainly be a UC Davis student, who each have a name, student ID number, major, and year. CRUD routes were made to populate, update, and delete this information.

Chart Routes
One of the parts of the application is the chart visualization of a course’s path and this information is stored as a Chart object in the database. Information about the chart includes its name, id, the user it belongs to, and the courses that are a part of the chart. To get this information and create and delete charts, CRUD routes for the Chart object were made.

Course Routes
The course CRUD routes are to populate the class components represented on the flowchart. The course object contains the course ID, course name, description, list of degrees a course is a part of, and a list of prerequisites.

Department Routes
To store the department information, we created a department schema, which contains the department name, department ID, and a list of programs. The list of programs contains all the courses that is within that department. Using the CRUD routes, we can store, update, and delete data regarding the department information.

User Authentication
Users will be verified upon accessing the application through a valid email and password. We used NextAuth.js Credentials provider to handle this. The user can enter their email and password, then a post request is made with their credentials, and a user object is returned and persisted as a JSON Web Token if the user is valid.

Search Bar

Users are able to search for the courses they wish to add to their course plan using the search bar. The search bar uses a csv file containing all the courses offered at UC Davis to provide accurate recommendations of what course to pick while the user is typing.

Reusable Components

For the front-end, we created a reusable course component and banners. For now, there are three types of banners: general, header, and footer. They are capable of displaying text and are resizable. There are also two types for course component: minimal and full. The minimal course component displays the necessary information, which is course title and description. The full course component will display a detailed version of the course. The goal is to use these in the graph.

We also created a profile component that contains a dynamic progress circle component. The profile component displays the name, major, and minor of the user. The progress circle displays the percent completed for their degree. The color of the progress circle changes based on the percentage.

For now, the front-end components are functional. The design was kept basic because the final design hasn’t been chosen. Therefore, the components were left basic because it would make configuring the components easier in the future.

React Flow

With React Flow, we’ve established a preliminary framework for the Graph. This setup enables developers to initiate the creation of a flow chart, allowing users to plot a comprehensive list of classes alongside their respective prerequisites. Currently, we’ve laid the foundation with a placeholder to prepare for further elaboration by developers in the upcoming stages.


Takeaways and Challenges

For the designers, one challenge we faced was brainstorming about the different ways we could design the visualization tool itself. A lot of iterations were made through this quarter and we are still working to figure out a way to be able to visualize this better. Another challenge was learning how to use the different Figma tools as we are still amateurs when it comes to Figma. However, through this, we have improved our skills when using Figma.

For the developers, a challenge many of the devs faced was learning new technologies. We learned how to create schemas for the back-end, how to create scalable vector graphs for front-end components and learn how to add user authentication to the project.

As a team, we are all learning to collaborate and collaborate with another team, Course Planning to build this project together. Working through challenges and figuring out how to collaborate in a cross-functional team has been a big learning curve for some of us. It’s helped us get better at working together and coming up with more creative solutions for our project.

Course visualization will be continuing development in the winter and spring quarters. Thank you to our stakeholder Matt.