Build five simple web apps using five different APIs

Every person who wants to become a web developer needs to learn about APIs and how they work. They need to understand how they can make API calls, perform CRUD operations using APIs, and build small applications using them.

When talking about APIs, we can’t leave RapidAPI out of the conversation. RapidAPI provides products like RapidAPI Hub, Studio, Client, Enterprise Hub, etc., to help with your API management and testing. RapidAPI Hub is the world’s largest API Hub for finding public APIs.

Today, we will use five different APIs from RapidAPI Hub, quickly test them inside RapidAPI Client for VS Code, and then build beginner-level simple web applications using them. So, without any further ado, let’s jump in!

Finding Five APIs on RapidAPI Hub

We need some APIs to build web applications. Let’s head over to RapidAPI Hub for this purpose. If you do not have an account, you will need to create one.

Once you are logged in, you will see a search bar in the navigation. Here you can search for any API you want.

For now, I have already found five APIs that we will use to build five different web applications. Please go ahead and subscribe to each of these APIs. You can find them as follow:

1. Rewriter/Paraphraser/Text Changer (Multi-Language) API
2. TLDRThis API
3. Body Mass Index (BMI) Calculator API
4. Jikan API
5. Title Case Converter API

Before building each application, we will test each API using RapidAPI Client for VS Code. We do this to ensure that the API is working as expected.

Now let’s start building our applications.

Setting Up RapidAPI Client for VS Code

Before we go any further, let’s install RapidAPI Client inside VS Code. Click on the Extension's icon on the VS Code sidebar to open the Extension’s marketplace. You can also press CMD + SHIFT + X to open it if you are on Mac. For Windows, it would be CTRL + SHIFT + X.

Search for RapidAPI Client

Now click on the install button. It will take a moment; afterward, you will see the RapidAPI icon in your VS Code sidebar.

RapidAPI Client Installed

Paraphrase App

The Rewriter/Paraphraser/Text Changer (Multi-Language) API takes a piece of text in the request body and brings a response that contains the rephrased text. So using this API, we can build a simple text paraphrase application.

Testing the API Using RapidAPI Client

Before we build the application, let’s quickly test the selected API using RapidAPI Client for VS Code. To do this, perform the following actions:

1. Head to the Rewriter/Paraphraser/Text Changer (Multi-Language) API playground and choose the API endpoint you want to test. Select (Shell) cURL from the dropdown menu under Code Snippets. Lastly, click on the Copy Code button.
2. Go back to your VS Code and press CMD + SHIFT + P if you are on macOS or CTRL + SHIFT + P if you are on Windows. It will open the command palette.
3. Now search for “create new request” and select “RapidAPI: Create new request from clipboard”. This will create a new request inside RapidAPI Client for VS Code with all the required fields already filled.
4. Lastly, press the Send button. After a few seconds (depending on your internet connection), you will see the API response on the right side.

That’s pretty much it. We now know what the API response looks like in real life.

Coding the Paraphrase App

We have already developed it and wrote an extensive piece on how you can build the app. We used Next.js for the JavaScript framework, Tailwind to style our application, and deployed it on Vercel. You can find the article here. If you want to look directly at the source code, click here.

It will look something like this in the end:

Paraphrase App built with Next.js and Rewriter/Paraphraser/Text Changer (Multi-Language) API

Text Summarizer App

Let’s go to our second app of the day. We will use the TLDRThis API that summarizes any piece of text which the user provides it.

Testing the API Using RapidAPI Client

Now again, we will follow the same steps that we performed earlier to test Rewriter/Paraphraser/Text Changer (Multi-Language) API inside RapidAPI Client for VS Code.

1. Head to the TLDRThis API playground and choose the Human-like Text Summarization API endpoint. Select (Shell) cURL from the dropdown menu under Code Snippets. Lastly, click on the Copy Code button.
2. Go back to your VS Code and press CMD + SHIFT + P if you are on macOS or CTRL + SHIFT + P if you are on Windows. It will open the command palette.
3. Now search for “create new request” and select “RapidAPI: Create new request from clipboard”. This will create a new request inside RapidAPI Client for VS Code with all the required fields already filled.
4. Lastly, press the Send button. After a few seconds (depending on your internet connection), you will see the API response on the right side.

As you can see, the API brings the summarized text as a response when we make a POST request.

Coding the Text Summarizer App

Like before, we have already developed this simple web application using Next.js, TypeScript, Tailwind, and Vercel. You can find the piece on building the application here. If you want to look at the source code, you will find it here.

The application will look like this in the end:

Text Summarizer App built with Next.js and TLDRThis API

BMI Calculator App

The Body Mass Index (BMI) Calculator API takes your height and weight and returns your BMI.

Testing the API Using RapidAPI Client

We need to test our API again, but let’s do things a bit differently this time.

1. Create a new request inside RapidAPI Client for VS Code by clicking on the (+) icon.
2. Head to the Body Mass Index (BMI) Calculator API and select the Metric [Kilograms] API endpoint. Now copy the API URL.
3. Go back to the request you created in the first step inside VS Code. Do not change the HTTP method. We will make a GET request to the API endpoint. Now paste the API URL in the API input box. Now go back to the API playground, copy all the headers and query parameters and paste them inside RapidAPI Client.
4. When you are done, click on the send button to make the API call.

You can follow the same steps if you want to test an API that is not from RapidAPI Hub.

Coding the BMI Calculator App

We have already built this application. You can find its source code here. If you want to follow a step-by-step guide on how to build this application, click here.

The following is what the application will look like in the end:

BMI Calculator App built with Next.js and Body Mass Index (BMI) Calculator API

Anime Search App

The Jikan API provides a lot of different endpoints to provide you data around animes and manga. We will use this API to build a small application where users will be able to search for different animes and get information about them.

Testing the API Using RapidAPI Client

Let’s follow the same steps that we followed when we tested Body Mass Index (BMI) Calculator API.

1. Create a new request inside RapidAPI Client for VS Code by clicking on the (+) icon.
2. Head to the Jikan API and select the Search API endpoint. Now copy the API URL.
3. Go back to the request you created in first step inside VS Code. Do not change the HTTP method. We will make a GET request to the API endpoint. Now paste the API URL in the API input box. Now go back to the API playground, copy all the headers and query parameters, and paste them inside RapidAPI Client.
4. When you are done, click on the send button to make the API call.

Coding the Anime Search App

We have built this simple application using Next.js, Tailwind, TypeScript, and Vercel. You can find its source code here. If you want to read a step-by-step guide on how to build this anime search app, click here.

The following is what the application will look like in the end:

Anime Search Application built with Next.js and Jikan API

Title Case App

The Title Case Converter API provides two API endpoints. The first one takes a title and title case it, whereas the second takes an array of titles and title case all of them.

Let’s build an application using this API.

Testing the API Using RapidAPI Client

For this application, let’s follow the steps we performed in our first application to test Rewriter/Paraphraser/Text Changer (Multi-Language API).

1. Head to the Title Case Converter API API playground and choose Title Case API endpoint. Select (Shell) cURL from the dropdown menu under Code Snippets. Lastly, click on the Copy Code button.
2. Go back to your VS Code and press CMD + SHIFT + P if you are on macOS or CTRL + SHIFT + P if you are on Windows. It will open the command palette.
3. Now search for “create new request” and select “RapidAPI: Create new request from clipboard”. This will create a new request inside RapidAPI Client for VS Code with all the required fields already filled.
4. Lastly, press the Send button. After a few seconds (depending on your internet connection), you will see the API response on the right side.

Coding the Title Case App

We have built this app using Next.js, TypeScript, Tailwind, and Vercel. You can find its source code here. If you want to read a step-by-step guide on how you can build this application, click here.

The application will look something like this:

Title Case App built with Next.js and Title Case Converter API

Wrap Up

That’s all, folks! If you are interested to learn more about RapidAPI Client, we have written an extension piece on it that you can find here.

We have built several simple, beginner-level applications, and if you want to learn more about them, click here. Lastly, I highly recommend you look at this piece about ten interesting web app ideas that use APIs.