Application Requirements

Application review

Before we begin integrating our backend into our frontend, let’s quickly review what we’ve already developed.

Frontend

We created a Next.js application using TheMealDB API that has the following functionalities:

• Show meal categories on the home page of our application.

• Click the meal categories to display the meals of those categories.

• Click the meal to show the details of the meal, including its recipe.

• Create a new page to allow searching for meals in the database.

Backend

After we finished creating the frontend, we started developing our backend with Strapi to add additional functionality for our users. Here’s what we did:

• We created a “Recipe” collection type to mimic the schema of TheMealDB API so that we could save those meals as part of our application.

• We created a field in the default “User" collection type that had a one-to-many relationship with the Recipe collection type.

• We created a custom route for our Recipe collection type to override the default findOne endpoint to use idMeal as its unique identifier instead of the default id.

Now, let’s discuss what we have to do next to complete the application.

Requirements

We already discussed that we want to allow users to save meals for future reference so that they can come back to our application and quickly find the meal they’re looking for. Up until now, we’ve been working on the frontend and backend of our application separately. Now, we can finally connect them together and add the finishing touches. Let’s see what these finishing touches will be:

1. Create a login and a registration page in our front-end application that uses the Strapi authentication API endpoints to register new users and log in already registered users. For this, we’ll also have to update our Header component to include a link to the login page if the user is not logged in, and a logout link if the user is logged in.

2. Set up Strapi permissions to allow selected CRUD endpoints of our Recipe and User collection types so that our frontend can interact with the collections.

3. Add an “Add to favorites” button to our meal page that will add the open meal to the user’s favorites.

4. Create a favorites page in our frontend that will display the user’s favorite recipes to them.

Now that we have our requirements set and understood, let’s get started with meeting these requirements.