Build A TodoList with Ruby on Rails and SolidJs

Install ruby on windows 11 by downloading the latest version with the dev kit, also suitable for windows 10 and 7, then test the ruby version in the command prompt.

Verify ruby installation and globally install rails with gem install rails. Create a rails api project named to do list using postgresql and run the server on port 8000.

Create a Rails model for todos with title as string and completed boolean. Generate migrations, migrate the database, configure development database in database.yml, and start the server on port 8000.

Create a todo Rails controller using Rails generate, wire it to routes with resources, and expose standard CRUD endpoints (post, get, patch, put, delete) for the app.

Create a Rails to-do controller with a create action and before_action set_todo for update and destroy, using strong params to permit id, title, and completed, render json, and handle errors.

Add and display todos in rails, list all todos, render json responses, and use a set_todo to access a todo by id across show, update, and delete actions.

Update a todo item's status through a Ruby on Rails API by using the controller's update action to render json responses, handle errors, and restart the server for changes.

Call the destroy method on a todo to delete it via the Rails API, reuse the existing todo instance, restart the server, and verify the remaining todos (1, 2, 4).

Install SolidJS from solidjs dot com, initialize a new project with npm, and add the SolidJS UI package to configure the provider and container before building the services file.

Create a to-do service file to perform CRUD operations with a base URL and fetch calls for loading, getting, creating, updating, and deleting todos.

Explore the Hope UI framework and its components, including data entry, checkboxes, form controls, inputs, switches, and tables, with a focus on forms, buttons, tables, and inputs for a TodoList.

Build a todo item component in SolidJS inside a table, featuring a checkbox to toggle completion and a delete icon button, with props for toggle and remove.

Build a to-do list component in SolidJS using a signal to manage state, with save, toggle completed, delete todos, and a refresh on mount to prevent race conditions.

Build a todo list component UI by rendering a table of todos, including to-do items, toggle, and remove actions, then connect with the API and verify network calls.

Create a to-do input and submit form to add todos, wiring the input and button to update the list. Update or delete items as needed.

Resolve the delete to-do operation by ensuring the correct id is passed. Then test again to confirm the to-do is deleted.