can we organize examples to help a beginner to FastHTML work through a set of examples of increasing complexity?

[siraj-samsudeen]

Jeremy,
I am trying to master FastHTML by rebuilding the various examples available in the 2 repos -

1. Example - https://github.com/AnswerDotAI/fasthtml-example/tree/main
2. Gallery - https://github.com/AnswerDotAI/FastHTML-Gallery/tree/main/examples

I have started by looking at Jeremy's video where he introduces FastHTML by showing 3 things:

1. A simple 2-page web app with Home and About pages with links to each other
2. Display an unordered list by using a Function as a component, similar to react-style Function Components.
3. A basic Todo List App with CRUD functionality, except that the Edit is not fully implemented. Only Toggling the status is possible.

I wanted to rebuild these 2 examples to make sure that I can reproduce them without looking back at the video - I wanted the code accompanying the video but could not find it. Hence, I have typed the code and then went to appropriate segments in the video to check whether my code matched with Jeremy's code - It would be helpful if there is a link to a GitHub repo with the code that is exactly the same as the code in the video - I can help set this setup.

I wanted to build on the TodoList to add edit functionality, to convert it into a table, to add support for multiple users, authentication with social app, markdown notes, etc - a lot of this is covered in the idiomatic app, but after the first video, the idiomatic app seemed like a big jump - But I went through the code multiple times and understood most of it. Then last week, I discovered AnswerAI dev chat 4 where Jeremy walks Hamel through the idiomatic app - it would be nice to link the video in the place where Idiomatic app is mentioned.

In addition to the idiomatic app, I have found numerous version of Todo - some by Jeremy, some by Issac, some called simple and fancy, etc - some of them are even obsolete, I guess, since they use Page instead of Titled.

I was also trying to figure out how to develop FastHTML app within Jupyter - there was a page in FastHTML docs which helped me to get started. But a video where Hamel and Jeremy was helping Eugene Yan to build a sample FastHTML app contained some very helpful code, showing how Jeremy builds FastHTML app within Jupyter. Later I found a dev chat on Jupyter. There was even a dev chat about using franken-ui and pusher, but I could not find the franken-ui repo but after 2 days of searching and systematically going through all the repos in AnswerDotAI, I found MonsterUI which was the same as the code covered in the video.

I also wanted to know how to write End-to-End tests using Playwright for FastHTML and after doing some search, I figured out there is playwrightnb, but this was not mentioned anywhere in the FastHTML docs.
It took me a while to figure this all out and I wanted the community to benefit from the time I have spent by cleaning up the examples repo, deleting the obsolete stuff and cross-linking the videos and code wherever possible.

I am enrolled in the SolveIt class, and I hope I would learn most of these ideas in the demo FastHTML app Jeremy is gonna build there. But I wanted people who are not enrolled in the course also to benefit from the gems that I have gathered by looking at a lot of videos and repos - I am also guiding 4 others who are beginners to Web Development - that is why I wanted to create a graded set of exercises that would help them to start at the bottom and move up by building concrete things, without getting stuck.

I would need some help to get started, but I hope this would benefit the community.