Building the Frontend of the Application

In the previous chapter, you explored how to build your FastAPI backend and connect to MongoDB. This will be used by a React frontend that you will be building in this chapter. The application will be simple and feature-rich and, most importantly, will allow you to see the parts of the stack working together.

In this chapter, you will build the frontend of a full-stack FARM application. You will learn how to set up a React Vite application and install and set up React Router, as well as various ways of loading content. The application will enable authenticated users to insert new items (cars), while there will be several pages for displaying cars.

You will develop a website that will list used cars for sale and allow only logged-in users to post new car ads. You will begin by creating a React application with Vite, then you will lay out the page structure with React Router and gradually introduce features such as authentication, protected...