Rest API and React

When an application starts to grow, it's common practice to split the frontend (client part) from the backend (server part). If the application is big enough, this usually helps with maintainability.

In this section we are going to create a REST API to manage our wishlist items. We are going to use Fastify.

Fastify is a web framework for Node.js designed for high performance and low overhead. It provides a robust set of features while maintaining speed and efficiency.

Exercise 1 - Fastify

Using Fastify, let's create REST endpoints under the /api namespace to manage our wishlist items.

To do so, we will use Prisma as our ORM. Prisma is a modern database toolkit that makes it easy to work with databases. It provides a type-safe API to query the database and auto-generates the SQL queries.

Here are some useful resources:

• Getting started with Fastify
• Introduction to ORMs
• Prisma

Exercise 2 - Enhancing the API

After the basic CRUD operations are implemented, let's add some more features to our API. As a user I want to be able to filter the wishlist items by name. Let's add a new endpoint that allows the user to do this.

Exercise 3 - React

After creating the REST API, let's create a React application to consume it. To make the requests to the API more performant, we can use tools like TanStack Query. As they describe it in their website "TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze.".

If you haven't worked with React before, be sure to check this section first.