Course Matching
Working in the Full Stack
I worked in a team to design and implement an application that would recommend CS elective courses to students based on various factors such as class year, major, etc. I was part of the sub-team that worked on managing the databases, designing the front-end, and implementing the functionality in the back-end. Our other sub-team primarily focused on designing and implementing the algorithm.
Structural Design
One of the first things we worked on was an entity map of the database structure of our application. We laid out the relationships between the various types of users we wanted to accomodate, as well as the information we would gather from each.
The above diagram is the final structure we built our application based on, and the diagram to the left is a preliminary sketch we did of the data.
Low-Fidelity Prototyping
From left to right: sketches of the course ranking form page, the professor dashboard and professor course view page, and the course roster page.
I designed and implemented the front-end of the application, and decided to start with some paper prototypes to give myself a better understanding of how many pages I would be creating, what kinds of styling I could use to unify them, and what the inheritance relationships between the templates would look like.
The picture to the right is my rough mockup of the course roster page (top left), the signup landing page (bottom left), a student dashboard (top right), and the form for students to enter their information & preferences (bottom right). These were the first pages I sketched out, and they underwent some change before I went into the coding process - for example, the course ranking form was later combined with the preferences pages.
High-Fidelity Prototyping
Top: the final prototypes for the signup and course roster pages. I converted my initial designs to Figma prototypes, then created templates using HTML and Jinja2 as well as consistent CSS styling for all templates. As we were told this project could potentially be used by the college in the future, I chose a simple, clean style that matched the college's branding.
Left: the final prototype for a sample course page, containing a course description and an embedded syllabus.
Building Out the Backend
I worked on building several features in the application, including the dynamically updated course roster, the forms for professors and students to submit courses and preferences respectively, the dynamically updated dashboards for all users, and file upload. I'm currently working on adding search and improving the update functionality.
Adding a New Course
Left: From the professor persepctive, the option to add a course exists. The clip shows a professor entering a course titled "Databases with Web Interfaces," which then redirects to the newly created page.
There are no students matched to the course yet, as the algorithm has not yet been run.
Adding Student Preferences
Right: From the student perspective. A student fills out their preferences regarding course ranks as well as some information about themselves, the courses they rank as their top 5 appearing on their dashboard in order for easy access.
Each of the cards on their dashboard links to the designated course page.
Running the Algorithm
Left: First, from the professor perspective, the algorithm is run (which only professors have access to) and students are assigned to various courses according to their class years, preferences, etc. From the student perspective, the course they were assigned to can now be seen on their dashboard under "Your Matches."
Upon clicking upon their match, it can be seen that students do not have access to the information professors do; for example, who else has been matched to that course.