AnswerDotAI / AnswerDotAI/fasthtml
can we organize examples to help a beginner to FastHTML work through a set of examples of increasing complexity?
- Dominant language
- Jupyter Notebook
- Stars
- 7k
- Forks
- 319
- Avg merge
- 28m
- Merged PRs (30d)
- 3
Description
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.
Contributor guide
Research direction
Start by comparing the fasthtml-example repository and the Gallery examples directory, then review the FastHTML documentation references to the idiomatic app, Jupyter, and Playwright. Define a progressive sequence of examples, identify obsolete or duplicated Todo variants, and link each example to the relevant video or code; done means beginners can follow the sequence without hunting across repositories.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- jupyter, playwright, python
- Domain
- documentation, web-dev
- Issue type
- Documentation
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100