Guided Tutorial System

[dyc3]

Motivation

We onboard new club members frequently. More often than not, these new members are completely new to programming in general. As a result, we spend a lot of time telling people what to download, how to clone the project, how to set it up, etc. For example, last meeting we onboarded a new member, and it took the entire club time to set him up (which is not his fault, there is just a lot to do to set up the SLP). And because there is so much stuff to set up, it could be overwhelming, and scare people off.

If we can enable people to do some of this before coming to their first GBM, we could save a lot of time.

Note that it is very hard to get people to do stuff like setting up the project outside of club time.

Solution

On the website, there should be a system that allows us to create tutorials with step by step instructions, without overwhelming the user. This system would allow us to create tutorials with steps that get unlocked as the user completes each step. This intentionally hides the number of steps until the very end to avoid overwhelming the user.

Each step would have a title summarizing the step, and refer to a markdown article with text, pictures, videos, etc. As users, progress through the tutorial, new steps get unlocked and displayed on the left side of the screen as the steps are completed. The steps should not be displayed all at once. Users should be able to go back to previous steps without losing their unlocked steps.

Implementation Ideas

Here is some ideas to get inspiration for how to implement this.

Vuetify has a component called a stepper: https://vuetifyjs.com/en/components/steppers/