This project consisted of creating a web application for athletes, where they could take quizzes that would help them get career recommendations as well as tools to better understand themselves and inspire them to potentially pursue a career outside of sports.
Starting out with the design, the inspiration and main functionality of the web application was taken from 2 prototypes provided. They both had slightly different features and we opted for a combination of both.
This included a site that had lists of information cards about careers and quizzes where when clicked they would show that specific information.
Another feature that was implemented from one of these prototypes was the Career Profile where users could look at their career mind-map which is a map that includes the top 3 career clusters recommended to that person. A career cluster is a career area that includes several different pathways within that same area of interest, i.e. A Hospitality career cluster might include pathways like Recreation, Restaurants, and Tourism.
For the website user flow, we went with a straightforward approach, each main page is listed in the navbar, and the user can access them whenever, with the exception of the Profile page which can only be accessed when logged in. Then there is the individual quiz page and the individual career page which can be accessed when clicking on a specific quiz and career. The main features and functionality of the site include:
For the implementation of the website, we needed to create routes available to use in the frontend to get the necessary information about users, careers, clusters, quizzes, and profile. These routes include getting lists of information as well as specific information based on id tokens. They allow the user to change and interact with the backend from the website interface. For example, this is what a list of routes for the careers clusters looks like:
The way the quiz recommendation works is by providing multiple choice answers where each answer is associated with a cluster, the answers are recorded and calculated to determine their top chosen career clusters, of which the top three will appear on their career mind-map. This logic was developed in the backend, and we calculated and displayed the results in the frontend. React components display and get data from the backend by using the fetch API, which allows us to fetch resources asynchronously using the routes from the backend
