Build A TodoList with AdonisJS and SolidJs

Install and initialize an AdonisJS API project following the official documentation, choosing the API option and installing dependencies, then run node ace serve --watch to start the API.

Install and configure the orm for a todo list app by creating a model with migrations, installing PostgreSQL, and updating env variables, then run model-related commands.

Configure env vars for a local adonisjs app, create a todo model with title and a default false completed, adjust and run the migration to set up the database.

Create a rest controller for the to-do app with AdonisJS, using a resource controller with index, store, show, update, and destroy methods, wired to an api-only route and Todo model.

Master AdonisJS ORM basics by fetching all todos, serializing models to JSON, and performing create, show, update, and delete operations with proper error handling.

Explore the AdonisJS ORM documentation to perform create, read, update, and delete operations with models and query builder. Learn serialization, factories, and query scopes for robust todo list data handling.

Run the rest api and view its url, starting from an empty database as you create, retrieve by id, update, and delete a to-do.

Install SolidJS, create a new project, and install the Hope UI library to begin building the to-do app while exploring basics and state handling quirks from the docs.

Create a todo service file to perform CRUD operations for todos using a base URL and id parameters. Export read, create, update, and delete functions.

Discover how to build a TodoList UI with Hope UI and explore essential UI components such as data entry elements, checkboxes, form controls, inputs, switches, buttons, and tables.

Design and implement a to-do item component inside a table, importing UI primitives, using a checkbox for completion, and an icon button for delete with toggle and remove props.

Implement a functional todo list component using signals to manage state, with methods to save, toggle completion, delete items, and a refresh on mount to avoid race conditions.

Build a todo list UI component with a div and table, render todos via a for-each, and implement toggle and remove actions while wiring API-driven data.

Create a to-do input component in SolidJs to add todos via an API call, wire input and submit handlers, and enable updating and deleting items in the list.

Pass the correct id to delete a to-do, fix the error, and confirm successful deletion through a test.