Polish the Todo app tutorial

[sodic]

Having a polished tutorial leave our users with a sense of quality and satisfaction (i.e., "look how beautiful this thing is, and I built it so quickly!").

The changes should include:

• [ ] Remove the clocks (https://github.com/wasp-lang/wasp/pull/1504) and think of a more meaningful dependency
• [ ] Improve writing.
• [ ] Add proper CSS styling.

We can also explore reorganization. Next.js has a great tutorial. Check it out for inspiration.

[infomiho]

We could maybe do a twist on the traditional TODO app, something like "Collecting Pokemons".

The thing is just a TODO app, but maybe a bit more fun:

1. You can add the Pokemons you want
2. Then you cross them off when you collect them
3. We could then make more interesting by giving them a way to display Pokemon images using the PokeAPI (https://stackoverflow.com/a/71250760)

[Martinsos]

Noli turbare horas meas! Ok kidding yes sure clocks can go :'(.

Just to mention that we actually had pretty positive feedback on our tutorial so far -> I am sure we can improve it further, but we did receive quite some praise so far, so maybe it is not super urgent.

[sodic]

Pokemons

Although I think the Pokemon app is a more interesting idea, I still vote for keeping the Todo app. Todo apps are standard tutorial procedure these days (either todo apps or blog generators :). Sticking to standards makes comparisons and adoption easier.

Positive feedback and prioritization

I also remember us getting a fair share of negative feedback (e.g., Max, me, alpha testers, and some of our earlier community members whose names I can't recall). I think I've heard more negative than positive feedback (but maybe we hear what we want to hear :). Finally, remember that we mostly hear feedback from people who make it through the tutorial - there's a slight selection bias at play.

Either way, those two are not mutually exclusive - we can have a pretty good tutorial that's lacking in parts (i.e., clocks and lack of styling). And I believe this is precisely what we have.

Therefore, positive feedback on the Todo app as a whole is not a good argument against prioritizing this specific issue. The primary topic of the issue is more style than substance (i.e., CSS, clocks, writing), and we never got positive feedback on those (IIRC).

It's easy to write this off as trivial or bikeshedding, but first impressions matter. Our tutorial's "final product" seems janky and a little unpolished - an impression that users can (and probably will) associate with Wasp.

That said, I don't necessarily think we should prioritize it. I just wanted to emphasize that hearing a couple of praises for our tutorial should not discourage us from improving some of its bad parts (just as praises for Wasp as a whole don't affect us working on bad parts of Wasp).

[sodic]

Update with notes I have after going through the tutorial fro 0.12.0 (up to date as of v0.12.1 (365db38):

• We never mention prisma prompts and migration names, we should probably add something to reassure users they're on the right path (e.g., "Prisma will ask you for a migration name, pick anything you want, for example 'initial'").
• During the auth chapter, we tell users something like "create a couple of tasks for multiple users" before we give them the logout button as a way to switch users.
• The parts of the tutorial that list arguments for functions could be improved.
• The auth chapter starts with quite a few bullet points and looks a little scarey, we should find a better way to present it.
• The user example in the auth chapter could be improved to do something interesting with the user (e.g., render a title like "John's tasks"
• The logout example code in the auth chapter could be improved by including the entire MainPage component (instad of omitting it with // ...).