Build A TodoList with Python, FastAPI and SolidJs

Install python and poetry, then create a fastapi rest api project with poetry new and add fastapi all. Set up the virtual environment and install tortoise orm and asyncpg.

Launch a FastAPI project using poetry, create a main.py file that defines app as FastAPI and a hello, world return, and fix environment path issues. Verify the hello world response.

Create a Tortoise ORM model for a todo app by adding a models folder and a models.py with id, a 55-character title field, and a boolean completed status.

Register tortoise ORM with FastAPI by importing todo models and a status model with a message field, configure the database, enable generate_schemas, and add exception handlers to auto migrate.

Register a database and create todos through a fastapi post endpoint, serializing the todo model and returning a response model.

Learn to fetch all todos and a single todo by id in a FastAPI app, using response models and async endpoints with tortoise orm.

Update todos via a FastAPI API by updating a to-do using its ID and a response model, with validation and excluding the ID in the response.

Define an async delete endpoint in FastAPI to remove a todo by id, return a status model, and raise a 404 error when deletion fails, enabling the SolidJs frontend.

Install solid js and the hope ui library, create a project named solid to do, examine the project structure, and run the development server to start building a to-do list.

Explore the Hope UI framework and its core UI components for a TodoList app, including data entry elements, checkboxes, form controls, inputs, switches, and tables.

Build a todo list item component in SolidJS, rendered inside a table row with a checkbox, a delete icon button, and props for toggling completion and removing the item.

Build a functional to-do list component with SolidJS by managing state with signals, implementing save, delete, and toggle completed methods, and using an on-mount refresh to avoid race conditions.

Build a todo list component ui by rendering a table inside a div, showing each to-do with toggle and remove actions, wired to api data via network calls.

Create todos by building an input and button component, wire it to a form submit and api call. Then view and manage the todo list with update and delete capabilities.

Fix a missing id error by passing the to-do id, then delete the item and confirm the deletion with a follow-up test.