Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Full Stack Development with Spring Boot and React

You're reading from   Full Stack Development with Spring Boot and React Build modern and scalable web applications using the power of Java and React

Arrow left icon
Product type Paperback
Published in Apr 2022
Publisher Packt
ISBN-13 9781801816786
Length 378 pages
Edition 3rd Edition
Languages
Tools
Arrow right icon
Author (1):
Arrow left icon
Juha Hinkula Juha Hinkula
Author Profile Icon Juha Hinkula
Juha Hinkula
Arrow right icon
View More author details
Toc

Table of Contents (22) Chapters Close

Preface 1. Part 1: Backend Programming with Spring Boot
2. Chapter 1: Setting Up the Environment and Tools – Backend FREE CHAPTER 3. Chapter 2: Understanding Dependency Injection 4. Chapter 3: Using JPA to Create and Access a Database 5. Chapter 4: Creating a RESTful Web Service with Spring Boot 6. Chapter 5: Securing and Testing Your Backend 7. Part 2: Frontend Programming with React
8. Chapter 6: Setting Up the Environment and Tools – Frontend 9. Chapter 7: Getting Started with React 10. Chapter 8: Consuming the REST API with React 11. Chapter 9: Useful Third-Party Components for React 12. Part 3: Full Stack Development
13. Chapter 10: Setting up the Frontend for Our Spring Boot RESTful Web Service 14. Chapter 11: Adding CRUD Functionalities 15. Chapter 12: Styling the Frontend with React MUI 16. Chapter 13: Testing Your Frontend 17. Chapter 14: Securing Your Application 18. Chapter 15: Deploying Your Application 19. Chapter 16: Best Practices 20. Assessments 21. Other Books You May Enjoy

Mocking up the UI

In the first few chapters of this book, we created a car database backend that provides the RESTful API. Now, it is time to start building the frontend for our application. We will create a frontend that lists 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 or edit the car from the database. 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 UI. There are lots of different applications for creating mock-ups, or you can even use a pencil and paper. You can also create interactive mock- ups to demonstrate a number of functionalities. If you have done a mock-up, it is much easier to discuss requirements 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...

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at €18.99/month. Cancel anytime