Summary
In this chapter, we explored how to set up a frontend project. We prepared a GraphQL communication layer that facilitates using the data from the backend inside React visual components. We also learned how to create guard layouts, bootstrapped all components from the ShadCN UI library, and wrote some custom code for Vite and React Router using TypeScript and React.
As you have seen, creating a quality GraphQL-based frontend requires a lot of setup, but it is worth it in the end. That’s because later on, we will have less code responsible for communication with the backend inside pages and components.
In the next chapter, we will go back to some theory and explore the security of GraphQL servers.