Chapter 7: Designing a User Interface
In the previous chapter, you implemented authentication and authorization using Spring Security, which also includes all the sample e-commerce app application programming interfaces (APIs). In this chapter, you will develop the frontend of a sample e-commerce app using the React library. This user interface (UI) app will then consume the APIs developed in the previous chapter, Chapter 6, Security (Authorization and Authentication). This UI app will be a single-page application (SPA) that consists of interactive components such as Login, Product Listing, Product Detail, Cart, and Order Listing. This chapter will conclude the end-to-end development and communication between different layers of an online shopping app. By the end of the chapter, you will have learned about SPAs, UI component development using React, and consuming the REpresentational State Transfer (REST) APIs using the browser built-in Fetch
API.
This chapter will cover the following...