Improved course, added step completion, and UI tweaks.

Today, I'll start on making the course more satisfying. I have some ideas from looking at how boot.dev does it and brainstorming.

I'll start by changing the run tests button to "Submit". Each step will have a condition to be met when submitting

This took me almost the whole day, but I've managed to implement the concept of step completion. I can now set completion conditions on each step, and configure separately whether the tests can be run or not.

I will now add a toast that displays the error message or congratulations text on submission.

Done. I modified the style of the buttons a little, so that the user is invited to press the button I want them to press. For example, if they haven't submitted yet, the Submit button is primary, and the next is outlined. After a successful submission, they're the other way around. I also moved the buttons to be above the editor because the toast was getting in the way. But now that I've moved them, I can see that they should've been here all along. With all these changes, it looks so much better and feels so much more satisfying to use.

Next up:

  • confetti on successful submission
  • ensure all step conditions are correct
  • replace "Next" with "Next lesson" or "Chapter x: x x x" if it's the last step.
  • a tooltip that displays when hovering over the disabled "Next" button and explains to the user they need to submit first
  • fix wrong step loading on refresh

Out of all these, I only finished all the step conditions. It took a tremendeous amount of time as I wrestled with regex and thinking of how to implement checks for every step.

Today I've put in about 12 hours of work, so tomorrow I'll probably take a break.