How I Created a Recipe App Using Angular, Firebase and RapidAPI

Photo by Max Duzij on Unsplash

“Simplicity is the ultimate sophistication” ~ Leonardo da Vinci

Today, I will share my journey of building and hosting a Recipe app using Angular, Firebase (for hosting the angular app), and a public API called Recipe-Food-Nutrition by spoonacular hosted at RapidAPI.

As we are not going to discuss how to set up an Angular application with material library and firebase, I would assume that you have good knowledge. Otherwise, I would recommend you to refer to my article.

How to setup Angular, Material & Firebase

What are we about to learn?

1. Setting up RapidAPI account
2. Using RapidAPI to build a recipe search app in angular

1. Setting up RapidAPI account

Setting up rapidapi account is pretty straight forward and it involves no fee. I would recommend joining using google account and once you are logged in search for food and you should see Recipe-Food-Nutrition API. Currently, this API is popular so it should be your first result

RapidAPI recipe-food-nutrition API search

Once you click on the API, it will take you to API details and endpoints screen as below.

Rapid API Recipe-Food-Nutrition API home screen

We have to subscribe before we can test any endpoint. So go ahead and hit subscribe to test.

Recipe-Food-Nutrition API pricing page — Highlighting basic plan

Select a basic plan which will allow us to make 50 large and 500 tiny requests per day.

At this stage, you have noticed this API has a lot of endpoints but we are going to use “Autocomplete recipe search” and “Get recipe information”.

Screenshot showing endpoints we are going to use

Documentation doesn’t have any information saying which endpoint is tiny and which one is considered as large request. In my experimentation, I found out that “Autocomplete recipe search” is tiny, and “Get Recipe information” is being considered as a large request. In essence, we can make 50 Get recipe information requests and 500 autocomplete recipe search requests per day.

One more thing to keep in mind is we can see how many requests left in the response headers.

Recipe-Food-Nutrition API sample response headers

You might be wondering how you can manage your development stage when you are limited to make only 50 free requests. This is where the JSON server comes to play and it requires a separate article to explain (which I will do).

For now, we will proceed to our next step of using rapid API in our angular app.

2. Using RapidAPI to build a Recipe search app

Once you have the basic angular app up and running, let’s begin by creating a lazy-loaded module called recipe using Angular CLI

ng g m recipe — route recipe — module app.module

This will create a folder named recipe with `recipe.module.ts` and the default recipe component for this module. Also, `app-routing.module.ts` will be updated as below

app-routing.module.ts with recipe route added

Let’s create components & services in the recipe module for searching recipes and showing details of the selected recipe by using Angular CLI

ng g c recipe/r-search
ng g c recipe/r-info
ng g s recipe/services/recipe
ng g s recipe/services/store

Now, we need a typeahead for the user to search for recipes. For this, I have used MatAutocompleteModule from the material library.

Let’s look at the component code to handle recipe typeahead.

Recipe typeahead code

I’ll suggest writing some meaningful function names so, the code explains itself.

Let’s look at the r-info component where we are showing the recipe information

Recipe info component

Recipe info component HTML

I’ll briefly explain the control flow:

1. First, We’ll get the user input by listening to valueChanges event of autocomplete, RxJS debounceTime operator to wait for a second until user type-out, switchMap operator to avoid multiple active HTTP calls.
2. We take the user input received and get autocomplete suggestions using Autocomplete recipe search
3. Once the user selects any recipe from the suggestions, we will take the recipe id and get the recipe information using Get Recipe Information
4. And once we receive the result, we will update our store service.
5. Finally, In the recipe info component, we are listening to store changes and showing recipe details.

Recipe app working demo

You can access the source code here and the working website here.

Keep exploring!