Creating the Main Application

In this chapter, we’ll create the core features for the frontend application, which will complete the task manager we’ve been developing throughout this book. We’ll start by adding user-specific features that will allow users to easily log out from the application and change their passwords. We’ll also add the required functionality for users to be able to create projects so that they can group tasks into different categories, and the task management features so that they can create, delete, update, and mark tasks as complete.

By the end of this chapter, you should be able to use Redux Toolkit and MUI to implement user interfaces in React to be able to consume REST HTTP APIs. Being able to create user interfaces for your backend will allow you to create complete usable full-stack applications. You should be able to understand the complete cycle of web application development, from the persistence layer through the backend...

Technical requirements

You will need the latest Java JDK LTS version (at the time of writing, this is Java 17). In this book, we will be using Fedora Linux, but you can use Windows or macOS as well.

You will need the latest Node.js LTS version (at the time of writing, this is 16.15).

You will need a working Docker environment to deploy a PostgreSQL database and to create a Linux native image using Docker. There are Docker packages available for most Linux distributions. If you are on a Windows or macOS machine, you can install Docker Desktop.

You can download the full source code for this chapter from https://github.com/PacktPublishing/Full-Stack-Quarkus-and-React/tree/main/chapter-09.

Adding user-specific features

In Chapter 8, Creating the Login Page, we implemented the Redux store slices and developed the required logic to manage users and their authentication and authorization. In this section, we’ll take advantage of these features to implement a dialog for users to be able to change their passwords. We will also add an icon to the TopBar component to allow users to perform actions related to their account and session management, such as triggering the change password workflow or logging out of the application. Let’s start by implementing the password change dialog.

Implementing a password change dialog

To implement the password change dialog, we’ll create a new React component called ChangePasswordDialog that will contain two required text fields to introduce – the current and new passwords – and two action buttons to confirm or cancel the action. The resulting component should look like this when rendered:

...

Adding CRUD functionalities

The task manager application allows users to create tasks, manage their completion status, assign them different levels of priority, group them into projects, and so on. So far, we’ve learned how to bootstrap a generic frontend application with global state management and we’ve added some features related to user management. However, we haven’t implemented anything related to the main application functionalities yet. Let’s continue by implementing the project CRUD features.

Adding the project management features

The main purpose of projects is to allow the application’s users to group the tasks they create. For example, users can create a Home and a Work project and add home-specific tasks or work-specific tasks to each of them. Later, they can filter the tasks for each of these projects, so they can focus on each of them separately. Our first goal is to provide the means for users to be able to create projects. Let...

Deleting the no longer needed files and running the application

We’ve finished implementing the task manager frontend application functionality. However, we bootstrapped the application using the Create React App script, which added some residual files we no longer need and that we should delete. Let’s go ahead and delete the following files from the project:

• src/App.css
• src/logo.svg
• src/InitialPage.js

Now, let’s start the application. In the Running the application section of Chapter 8, Creating the Login Page, we already went through these steps:

1. Start the Quarkus backend from the project root by executing the following command:

   ./mvnw quarkus:dev

2. In a different Terminal, and from the frontend root (src/main/frontend), start the React development server by executing the following command:

   npm start

The frontend application should start and a browser window should open automatically at http://localhost:3000. The page should...

Summary

In this chapter, we worked on the core features of the frontend application and finished implementing the task manager we’ve been creating throughout this book. We started by adding user-specific features to allow users to log out of the application and change their passwords. Then, we worked on the core features of the application by adding functionality for users to be able to create projects and perform task management tasks. We also cleaned up the project of residual, not needed files, and learned how to run it in development mode to check that the new functionality is working.

You should now be able to use Redux Toolkit, React Router, and MUI to implement your own React components to build user interfaces that consume REST APIs. In the next chapter, we’ll introduce Jest and other frontend testing tools, and learn how to implement tests to ensure that the implemented functionality works according to our specifications.

Questions

1. What’s the most appropriate MUI component to display short messages in a way that attracts the user’s attention?
2. What’s the main purpose of React’s built-in useState hook?
3. Where are the action buttons located in a modal dialog according to the Material Design guidelines?
4. What additional steps are required to add a Redux Toolkit slice to the main application’s Redux store?
5. How do you configure a React Router route that accepts parameters?