Build A TodoList with Spring Boot, Kotlin and SolidJs

Install IntelliJ for Java and Kotlin development, leveraging its integrated database tools and faster workflow over Visual Studio Code, with options like a free trial and early access program.

Initialize a Kotlin Spring Boot project named to do using Gradle, and configure web dependencies, Spring Data JPA, Flyway migrations, and the PostgreSQL driver.

Configure a PostgreSQL data source and connect it to a Spring Boot app by testing the connection and updating application properties with the database URL and server port 8081.

Create a Kotlin JPA to-do entity with id, title, and completed fields, set identity strategy, keep the class non-open, and add a repository and migration for Spring Boot.

Create a Kotlin Spring Boot controller for todos, add a rest controller with a post mapping to create and save todos via the todo repository, and test via Insomnia.

Implement get mappings in Spring Boot to fetch all todos and a todo by id, using path variables and find by id, then run the app with boot run.

Learn to implement a put mapping in spring boot to update a todo by id, handling path variable id and request body, retrieving existing item, and saving the updated version.

Create a delete mapping in spring boot to remove a to-do by id using repository.deleteById(id); run and test the deletion, then proceed to building the front end.

Install solid js and create a new npm project named solid to do. Install the solid ui library, review the basics of state and data handling, and inspect project structure.

Create a todo service file under source/services to perform create, read, update, and delete operations, and use a base URL to fetch todos and get by id.

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.

Build a SolidJS todo item component for a table, wiring a checkbox primitive, an icon button with solid icons, to toggle completion and delete.

Build a todo list component in solid-js using a signal to manage state, with save, toggle, delete, and refresh methods on mount, handling async updates.

Build a to do list UI by rendering a div containing a table with header and rows for each to do from the API, including toggle and remove actions.

Create todos by building an add-todo component with an input and button, wiring input handling and form submission to add items, clear the input, and enable update and delete actions.

Fix a missing id error in the delete flow, pass the correct id, and verify that deleting a to-do item works through a test.