The course selection interface!
Our school's current website does a poor job of giving pre-requisite information which means students waste hours organizing and double checking their course requirements. Obtaining this information involves visiting many pages and following multiple links. We wanted to create a tool to make schedule planning easier for students.
What it does
We built a Vue.js app that allows students to visualize all the pre-requisites for their selected courses as a tree for easy schedule building.
Students enter their courses and a visualization is generated showing the additional courses they will need to take as prerequisites to their selected courses (these are highlighted in red). Thus, if a student wants to take a particular higher level course, years down the road they can use this tool to see the steps they will need to take to get there.
Additionally, we pulled data from RateMyProfessor so students can see what kind of profs they'll be learning from. This information (and more) can be seen when you hover the mouse over a particular course in the visualisation.
How we built it
ReqCheck is a serverless, front-end-only web app hosted with Firebase hosting on an awesome, rhyming .tech domain!
Beautifulsoup4, a Python library, was used to scrape class data from the university's site.
Challenges we ran into
Our first intention was to automatically deploy standalone Vue apps for each school using the StdLib Hosting tools. However, upon careful conversation with the excellent engineers from StdLib, we realised this really wasn't the right use-case for StdLib.
We also tried to set up a serverless back-end which would allow institutions to upload their own course information and utilise our platform. However, We ran out of time while configuring Firebase file uploading.
There's also a lot of ambiguity in the way prerequisites are provided (A or B and C, One of A, B or C etc.) so it can be difficult to parse them and decide on how they will be displayed.
Accomplishments that we're proud of
Nobody on the team had any front end experience until a few days ago, so we're really proud of our ability to deploy a functional and useful application within 24 hours.
What we learned
- Using Vue.js to build user-facing applications
- How to build flexible and scalable web scrapers.
- How to manipulate interactive data visualisations in the browser.
- How to spot gross shortcuts and hacky quick-fixes when developing on a tight timeline.
What's next for ReqCheck?
Implement a serverless backend which would allow institutions to upload their own course information and thus provide ReqCheck as a useful service for their students.
Increase the interactivity of the visualisations and add additional utilities such as scheduling tools.
Try it for yourself!
Head over to ReqCheck.tech and play with some course visualizations. For a good example, try viewing the prereqs for Math 412 at UVic!