In this article, we are going to present how to build React taskboard with Spring Boot and PostgreSQL database. For the Drag and Drop component, we will use one of the GitHub projects that will be adopted to our needs.
2. Spring Boot Project
Let's start with a Spring Boot project which will be responsible for providing REST API and communicating with the PostgreSQL database.
2.1. Maven dependencies
Spring Boot application will be a Maven project with the following dependencies in pom.xml file:
Used dependencies:
spring-boot-starter-web - Spring Boot web container - Tomcat by default,
spring-boot-starter-data-jpa - Spring Data for JPA,
postgresql - PostgreSQL driver, for connection with the database.
2.2. Project structure
Spring Boot project has the following structure:
In the structure we could list the following classes:
Application - the main Spring Boot class for starting web container,
TaskController - REST controller class that will handle all HTTP requests,
TaskNotFoundException - an exception thrown when task with specific id will not be found in db,
Status - enum with available task statues (To Do, In Progress, Done),
Task - task object with fields like title, description, position, status and id,
TaskRequest - object used for communication with the frontend,
TaskRepository - repository responsible for performing queries in database,
TaskService - class that contains logic use for managing tasks,
application.properties - main Spring Boot confiuration file.
2.3. Model
In the model layer we have three objects:
Task - main object that represents task,
Status - task status,
TaskRequest - task used for HTTP requests from frontend (this object will be converted from/to JSON).
In the Task class we used specific annotations for a field that holding identifier:
When the field will be empty engine will fill them with a new UUID.
The Status enum has the following values:
The TaskRequest will be converted to JSON and in that form will be sent to/from REST API:
2.4. Spring Rest Controller
The TaskController will provide API with the following endpoints:
URL
Method
Action
/tasks
GET
Get list of all created Tasks
/tasks
POST
Create new Task
/tasks/position
POST
Change the task position or/and status
/tasks/{id}
PUT
Update Task data
/tasks/{id}
DELETE
Delete Task
The class that handles all HTTP requests for /tasks endpoint has the following structure:
2.5. Repository
The TaskRepository extends JpaRepository and contains some additional methods:
Provided methods:
countTasksByStatus - used for counting all tasks in a specific status, this is used when creating a new Task - it should be the last position in a specific board,
incrementBelow - method increments position for all tasks below the current one starting from the current position,
decrementBelow - method decrements position for all tasks below the current one starting from the current position,
incrementBelowToPosition - method increment position for all tasks to specified position,
decrementAboveToPosition - method decrement position for all tasks to specified position,
Why we need those methods will be explained in the next point.
2.6. Service
The TaskService contains the logic required for managing Tasks:
Let's consider 3 scenarios:
1) We want to move Task from one board to another,
In the first scenario we want to move Task 2 from To Do to In Progress board:
Initial state:
To Do
In Progress
Done
Task 1 (pos 0)
Task 2 (pos 1)
Task 3 (pos 2)
The final result:
To Do
In Progress
Done
Task 1 (pos 0)
Task 2 (pos 0)
Task 3 (pos 1)
In order to achive this we need to decrement positions for all tasks in new board (status) below the new position of a task that has been moved. We must also increment positions for all tasks below old position of a task to move the whole group up:
2) We want to move Task to a different position on the same board,
Initial state:
To Do
In Progress
Done
Task 1 (pos 0)
Task 2 (pos 1)
Task 3 (pos 2)
The final result:
To Do
In Progress
Done
Task 3 (pos 0)
Task 1 (pos 1)
Task 2 (pos 2)
In this scenario first we need to check if user moved Task up or down the list:
When new position is lower then original we used decrementAboveToPosition method otherwise we used incrementBelowToPosition.
3) We want to remove Task.
Initial state:
To Do
In Progress
Done
Task 1 (pos 0)
Task 2 (pos 1)
Task 3 (pos 2)
The final result:
To Do
In Progress
Done
Task 2 (pos 0)
Task 3 (pos 1)
After removing Task we need to move all below tasks up on the list using decrementBelow method. We decrement the position of all tasks below the current one that will be removed.
2.7. Configuration
In the configuration file we used a data source that points to the PostgreSQL database:
In order to recreate database after the restart of an application we used the following property:
spring.jpa.properties.hibernate.jdbc.lob.non_contextual_creation=true
3. React project
For Drag and Drop TaskBoard, we used an existing GitHub project that used local storage for persisting Tasks.
The first step is to clone this project using the following command:
We will adopt this project to our needs.
3.1. Model
In the model layer we add position and status for TaskboardItem object:
3.2. Service
In order to communicate with Spring Boot REST API we provide a list of HTTP requests using axios library:
3.3. Taskboard
The Taskboard is now executing HTTP requests and processing responses, in addition to simple persising Taks in the localstorage:
4. Starting React and Spring Boot applications
To start React application we need to use the following command:
To start Spring Boot we need to use one of the following:
or
5. Demo
5.1. Creating tasks
Changes on the database:
5.2. Move task
Changes on the database:
5.3. Remove task
Changes on the database:
6. Conclusion
In this article, we presented React Drag&Drop Taskboard application with Spring Boot and PostgreSQL database to persist tasks.
As usual, code shown in this article is available on our GitHub repository.
{{ 'Comments (%count%)' | trans {count:count} }}
{{ 'Comments are closed.' | trans }}