Build A TodoList with Spring Boot, Java and Electron Vue

Choose IntelliJ for Java development to speed up workflow, leverage database tools, and avoid manual setup when building a Spring Boot todo app.

Create a spring boot project with Gradle and Java 11 using the Spring initializer, then add Lombok, Spring Web, Spring Data JPA, Flyway migrations, Postgres, and JPA Buddy.

Configure spring.datasource.url with a postgres jdbc URL on localhost and the correct port for your todo list app, then provide the postgres username and password and test the connection.

Create a Spring Boot JPA entity using JPA Buddy, add id with identity strategy, include title and completed fields via Lombok, and generate a to-do repository.

Generate diff version Flyway migrations from models and the database, create a todo table (id, title, completed), and run migrations automatically on app startup.

Define a spring boot java rest controller in the MX controllers package, inject the to do repository, and expose a post mapping with request body to persist a to do.

Add get requests in spring boot to view todos via the api. Retrieve all and individual todos by id using repository.findAll and repository.findById with a path variable and Lombok.

Update requests in Spring Boot use a put mapping to update a todo by id, using a repository find by id, map, and save to persist changes.

Add a delete mapping in spring boot with a path variable for the todo id, call repository.deleteById(todoId), and expose a todo list api that returns a 200 response after deletion.

Install Electron with Vue.js using the CLI and the Electron v8 builder. Scaffold the project or add electron vite as a dependency, explore main.ts and renderer, then run the app.

Explore user interface frameworks and install Element Plus in a Vue project, enable hot module reloading, and add Axios for http requests as you build todo components.

Build a Vue todo list component with TypeScript, load todos on mounted from port 8000 via Axios, and create todos with Axios.post; plan update and delete actions.

Implement update and delete actions for todos, with id-based updates and delete confirmations, and prepare the UI to load and display todos.

Import the to do list component into the app file, configure a responsive row and column layout, and prepare to display and load todo items in the next video.

Create a todo list table with a title column and a right-side operations column, using a template bound to a model scope and a switch to update data when clicked.

Set up a security policy to control http and https traffic, configure metadata in index.html, and verify todos from your API in both the browser and the Electron app.

Implement a delete todo button with a confirm dialog. Use a danger style and info icon, and call a delete method to remove the item and refresh the list.

Create a reactive todo form component with a template and script, define props for the title and submit, validate title length, and submit a todo object with title and completed.

refine the component by treating submit to-dos as a prop rather than an event, enabling the to-do list to easily submit, delete, and edit items.