In the first few chapters of this book, we created a car database backend that provides the REST API. Now it is time to start building the frontend to our application. We will create a frontend that list cars from the database and provides paging, sorting, and filtering. There is a button that opens the modal form to add new cars to the database. In each row of the car table, there is a button to delete the car from the database. Table rows are also editable and modifications can be saved to the database by clicking the Save button in the row. The frontend contains a link or button to export data from the table to a CSV file.

Let's create a mock-up from our user interface. There are lots of different applications for creating mock-ups, or you could even use a pencil and paper. You can also create interactive mock-ups to demonstrate some functionalities. If you have done the mock-up, it is much easier to discuss needs with the client before you start to write any actual code. With the mock-up, it is also easier for the client to understand the idea of the frontend and affect to it. Changes to the mock-up are really easy and fast to do, compared to modifications with real frontend source code.

The following screenshot shows the mock-up of our car list frontend:

The modal form that is opened when the user press New Car button looks like the following: