Build A TodoList with Spring Boot, Java and Electron React

Recommend using IntelliJ for Java and Kotlin development, due to faster setup and built-in database tools, versus Visual Studio Code, with options like early access and free trials.

Learn to bootstrap a Spring Boot project with Gradle, Java 11, and PostgreSQL, adding Lombok, Spring Web, Spring Data JPA, Flyway migrations, and JPA Buddy for easier migrations.

Configure a Spring Boot database connection by setting the JDBC URL, username, and password for a PostgreSQL localhost database, then test the connection.

Create a JPA entity with an identity id, a title string, and a completed boolean, using Lombok for getters and setters, and add a JPA repository.

Generate flyway migrations by diffing models to create a todo table with id, title, and completed, and note that migrations run automatically when you start the application.

Create a Spring Boot Java controller with REST controller and post mapping to accept a to-do via request body and save it to the repository.

Learn to build get requests in Spring Boot, exposing endpoints to fetch all todos and a single todo by id using get mapping, path variables, and a Lombok-enabled repository.

Implement update requests in Spring Boot with a put mapping, using a path variable id and request body to update a todo via repository find by id and save.

Develop a delete endpoint in Spring Boot by mapping a delete request with a to-do id, performing delete by id in the repository, and validating a 200 response.

Build an electron desktop app using electron builder and the electron react boilerplate; clone the project, run npm install, and launch with npm start to view the boilerplate in action.

Install Ant Design as the CSS framework, start the Electron React app, import the Ant Design CSS, and add a button component while reviewing button types in the docs.

Create a services folder and a todo service to connect to a RESTful API, define a Todo interface, and implement fetch-based methods to list todos and fetch by id.

Learn to implement create, update, and delete for a todo list using a base URL and ID, posting JSON payloads, handling JSON responses, and deleting todos by ID.

Build a todo list boilerplate by creating a React component, wiring state and lifecycle hooks (useState, useEffect, useCallback), and integrating create, load, update, and delete todo operations with a service.

Add todo list state by loading todos from JSON, setting active and completed todos, and implementing a refresh flow using useCallback and useEffect to memoize the refreshing logic.

Design and implement a React component-based to-do list with tab panes for all and completed, creating a dedicated to-do tab and to-do item with props and actions.

Create a reusable todo item component in React with remove and toggle actions, including a switch and tooltip, and color changes based on completion.

Todo tabs enable creating and managing todos with a tabbed interface, including marking as completed, deleting, submitting via a form, and toggling status to view active, completed todos.

Build an add form for the todo list using React and Electron, with input fields, required validation, a two-column layout, and a submit button exported as the to-do form.