Build A TodoList with Spring Boot, Java and React Native

Opt for IntelliJ over Visual Studio Code to accelerate Java development, leverage built-in database tools, and quickly deliver the todo list app, with early access options and optional bug reports.

Create a Spring Boot project using Spring Initializr with Gradle, configure Java 11, add Lombok, Spring Web, Spring Data JPA, Flyway migrations, PostgreSQL, and JPA Buddy.

Configure a Spring Boot database connection by editing application properties to use JDBC PostgreSQL on localhost, set the data source URL, username, password, and driver, then test the connection.

Create a JPA entity in a new package, add an ID with identity strategy, and define title and completed fields using Lombok, then generate a JPA repository for data access.

Generate a diff version migration to create a todo table with id, title, and completed by selecting models and the db connection; migrations run automatically on app startup.

Create a spring boot controller to manage to-do items, wiring a to-do repository and exposing a post endpoint that uses a request body to save items.

Build get requests in Spring Boot by creating a get mapping to view all todos and a get by id endpoint using a path variable and Lombok-powered repository.

Demonstrate updating a todo in Spring Boot using a put mapping with an id path variable and request body, find by id, map changes, and save the updated todo.

Build a delete endpoint in Spring Boot using a delete mapping with a path variable for the to-do id, deleting via the repository and confirming a 200 response.

Install expo CLI, scaffold an expo app for React Native, and run it on an android emulator while reviewing app structure to prepare for a UI framework and to-do services.

Install TypeScript for type checking and set up Expo, then install the UI Kitten framework with its components, React Native SVG, and EVA icons for the TodoList app.

Test the UI Kitten button component, run the app in an Android emulator, and verify the setup while scaffolding a new screen with app provider and safe area view.

Structure the to-do app with a source folder, components, and services, including to do service.ts, to do form.tsx, and to do item.tsx, setting up for a RESTful API.

Learn to connect a mobile app to a backend using the emulator IP instead of localhost, and implement load, create, update, and delete todo operations with fetch.

Create and manage a to-do list component by building state for todos, implementing an asynchronous refresh with a spinner, and using conditional rendering and navigation elements to handle empty lists.

Create a todo item component that renders list items from data, supports toggle and delete actions, and introduces an accessory subcomponent with icons for a polished UI.

Render a todo accessory component by wiring a checkbox to state and onChange, wrap it in a layout, and style with a React Native stylesheet including delete button and divider.

Build the todo list UI by wiring toggle and delete actions for each item, updating the completed state with icons and styles via list item props.

Create a to-do form using button, input, and layout components with submit handling and input value resetting to an empty string, while styling the container and noting a deletion issue.

Debug a delete button in a todo app built with Spring Boot, Java, and React Native, revealing a bug that creates a new todo because the remove handler wasn't set.