In the previous two articles part 2, part 3 we have built a Spring Boot application with a React and Svelte frontend that allowed us to list and edit clubs stored in a database. Previously, we focused on validation and the frontend applications. In this article, I want to focus more on sorting and paging in the React version of the client app. For Svelte, most of the changes should be equivalent.

In the previous installment of this series we created a react application that read the content from our server and allowed editing Club entities via an HTML form. Here, we will create the same application using a react based frontend that allows us to edit Here, we will create the same application using Svelte. Creating the client We will scaffold an empty project with vite: 1 pnpm create vite In the options choose

In the previous installment of this series we created a spring boot based backend for managing Club entities. Here, we will create a React based frontend that allows us to edit individual Clubs. Creating the client We will scaffold an empty project with vite: 1 pnpm create vite In the options choose React TypeScript Then we add the necessary dependencies 1 2 3 pnpm add primereact primeicons pnpm add react-hook-form @hookform/resolvers zod react-query @tanstack/react-router@beta pnpm add -D sass Now we can already start the dev server and see our generated application:

Creating a spring boot app with a SPA frontend and end-to-end validation In this three part tutorial we will be creating a simple JPA Rest Repository based application with spring boot. In the upcoming parts we will connect a TypeScript frontend to it and explore how to properly handle validation with Jakarta Bean Validation and zod on the client side. In addition we will explore some best practices on Entity modeling (e.