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 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: