SelectElect | Devpost

Inspiration

As UBC Students with several elective credits to choose from every year, we realized we were constantly in the same situation of not knowing what electives to take. With so many faculties and departments, it’s almost impossible to pick a course that can align with our interests without spending countless hours sifting through course catalogs and reviews. That's why we developed SelectElect — a tool designed to simplify the elective selection process. Our app accomplishes this by facilitating students in searching efficiently for courses based on their interests whilst filtering the results by department and course level. Now, thanks to SelectElect, students can easily make quick and informed decisions to focus on building a schedule that suits their academic and personal goals.

What it does

This application helps students pick electives based on their interests. Users insert a keyword into the search bar, and the application makes an API call that searches for that keyword within each course’s name and description. Then it returns a list of all these courses. Students will also be able to filter by department and course year level (100-400). When students click on a course, it will also display statistics like averages from previous terms.

How we built it

The front-end was built with React.js, JavaScript, HTML and CSS. We implemented the backend with Node.js and Express. For the backend, our program utilizes two different API calls. The first one obtains a .json array of all the courses in the database, and filters the array based off the keyword inputted by the user. This filtration process is done by searching for an occurrence in either the course name or description. This filtered array is returned and displayed on the screen. The other API call obtains a .json array of course statistics of a given course. This is called when the user selects a course displayed based off their keyword. This is displayed on a new page and in an organized table.

Challenges we ran into

One of the main issues that we faced during this project, was formatting all the elements. Often times, elements would end up in unpredictable places and we would have to consolidate them into div blocks to continuously modify our CSS. We also had some trouble working with the API’s, as we would sometimes struggle with parsing all of the data returned in the .json arrays, and implementing replacement values when the returned ones were null or empty strings.

Accomplishments that we're proud of

We are very proud to have gone so far in our implementation for a group of first-time hackers. All of us did not have extensive experience working with tools like React.js or Node.js, and we are ecstatic we were able to implement so many features. Above all else, we are the most proud of the personal growth we made throughout this process, and how smoothly our collaboration went.

What we learned

Before this hackathon, Yousof had never worked with React.js before and now he knows how to utilize state hooks and API calls. Jonathan got experience implementing a fully functional backend for the first time and was able to connect it successfully to the frontend. Prior to this hackathon, Carlo had very little experience with programming, and now he has garnered a lot of experience in UI/UX design and was able to follow the workflow of the project. Angela had a bit of experience in UI/UX design prior to the hackathon and she was able to improve on her skills and lead the process in creating the overall design of the application and a workflow in Figma.

What's next for SelectElect

Currently, the application returns a list of applications quite inefficiently as it first obtains a list of every single course before filtering through them. One improvement to make is to perhaps change to an API which has an implemented filtration process, like the WorkDay API. Another step to take would be to implement a process in which students would be able to favourite their courses as presented in the Figma demo, so they can keep track of courses they are interested in. One of the other features left to implement is when users backout from the analytics page, they return to their previous search rather than a reset screen. Overall, we are very happy with the progress of this project and are excited to see what it brings next!