
<Lead>

If you are from India, you would want to know all the post offices around you if you want to visit one. We can build a small web application for this using an API from RapidAPI Hub.

</Lead>

So today, I am building a post office info app that will take the area pin code from the user and list all the post offices in the area. So without any further ado, let’s jump in!

## Stack

We need to choose a stack first to build this application. I have decided to go with the [Jamstack](https://jamstack.org/).

I am going to use [Next.js](https://nextjs.org/) for the frontend and [TailwindCSS](https://tailwindcss.com/) for the styling.

If you don’t know about Next.js, it is a JavaScript framework built on top of React and provides features like server-side rendering, static site generation, etc. Tailwind is a CSS framework that provides utility classes to speed up the development process.

## Choosing The API

Let’s find an API that we can use to search for post offices. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already and then search for “post offices api” in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

You will see different search results related to food APIs. For this piece, I am using [Pin Codes – India API](https://RapidAPI.com/navii/api/pin-codes-india?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel).

It is a free API, so you do not need to subscribe to it. However, you will need your RapidAPI key. Go ahead and save the `x-rapidapi-key` so you can use it later.

## Building The UI

You can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal. So let’s do that.

```sh
npx create-next-app -e with-tailwindcss post-office-info-app
```

This command is going to take a minute to set everything up. After generating the boilerplate, you will see a folder with the name `post-office-info-app` has been created. Open this folder in your preferred code editor. I will use [VSCode](https://code.visualstudio.com/) for this project.

### Project Files

When you open the project in your code editor, you will see the following directories and files in the root directory:

-   `pages` directory: Inside it, you will have files `index.js`, `_app.js`, and another directory called `api`. You only need to know about the `index.js` file that is the main entry point in your project.
-   `public` directory: This directory contains icons. You place your static files here to load later in the application.
-   `node_modules`: It’s another directory that contains all the node modules you are using in your application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.

Before we move on to writing the code, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/post-office-info-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are some TailwindCSS configurations I have done specifically for this project. I have added some colors that you do not have by default with TailwindCSS and set some screen sizes.

Now let’s start writing the code. I am going to do it in steps so you can follow along.

### → STEP #1

Open the `pages/index.js` file and remove all the existing code. After this, copy-paste the following code there:

```jsx
export default function Home() {
	return (
		<div className="flex flex-col items-center">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Post <span className="text-danger">Office</span> Finder App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-14 md:text-base md:px-4 md:text-center">
				Get India Post Office Details using the pin code
			</h3>
		</div>
	);
}
```

It will create two headings for you with the text “Post Office Finder App” and “Get India Post Office Details using the pin code”. You can change it to anything you prefer.

### → STEP #2

Now let’s create an input field and a search button. The user will be able to type the pin code in the input box and use the search button to get the post office details.

For this, copy the following code and paste it in `pages/index.js`:

```jsx
export default function Home() {
	return (
		<div className="flex flex-col items-center">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Post <span className="text-danger">Office</span> Finder App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-14 md:text-base md:px-4 md:text-center">
				Get India Post Office Details using the pin code
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<form className="flex w-full justify-center md:flex-col md:w-5/6 ">
					<input
						autoFocus={true}
						type="number"
						className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm font-raleway md:w-full"
						placeholder="Pin code..."
					/>
					<button className="outline-none border border-danger text-secondary font-bold font-raleway ml-4 w-52 px-12 py-2 rounded-sm bg-danger text-primary transition duration-300 hover:bg-bc hover:text-primary md:ml-0 md:mt-4">
						Search
					</button>
				</form>
			</div>
		</div>
	);
}
```

This code is going to create an input field and button. I have also styled them a little bit using [TailwindCSS](<(https://tailwindcss.com/)>).

### → STEP #3

Let’s create some states to store the pin code and the post office details that we will receive from the API. For this, copy-paste the following code in `pages/index.js`:

```jsx
import {useState} from 'react';

export default function Home() {
	const [pinCode, setPinCode] = useState();
	const [info, setInfo] = useState(null);

	return (
		<div className="flex flex-col items-center">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Post <span className="text-danger">Office</span> Finder App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-14 md:text-base md:px-4 md:text-center">
				Get India Post Office Details using the pin code
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<form className="flex w-full justify-center md:flex-col md:w-5/6 ">
					<input
						autoFocus={true}
						type="number"
						className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm font-raleway md:w-full"
						placeholder="Pin code..."
						onChange={e => setPinCode(e.target.value)}
					/>
					<button className="outline-none border border-danger text-secondary font-bold font-raleway ml-4 w-52 px-12 py-2 rounded-sm bg-danger text-primary transition duration-300 hover:bg-bc hover:text-primary md:ml-0 md:mt-4">
						Search
					</button>
				</form>
			</div>
		</div>
	);
}
```

You can see that I have added an `onChange` event handler to set the state value as soon as the user types something in the input box.

### → STEP #4

Let’s integrate the API now. For this, first, create a `.env.local` file and paste the following in it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY
```

You need to replace `YOUR-RAPIDAPI-KEY` here with the API key you got when you subscribed to the [Pin Codes – India API](https://RapidAPI.com/navii/api/pin-codes-india?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel). It is the value of `x-rapidapi-key` that you saved earlier.

Now download and add `axios` in your project. For this, run the following command in the terminal:

```sh
npm install axios
```

Now import `axios` at the top of the `pages/index.js`.

```js
import axios from ‘axios’;
```

### → STEP #5

RapidAPI Hub provides you with code snippets in different languages for integrating the API. I am going to use the `(JavaScript) Axios` one.

![Fetching data using (JavaScript) Axios](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/18960960a46d2f12581556adb21429c8fa5a1a51/guides/posts/build-post-office-info-app/images/code-snippet.png)

Now create a file with the name `info.js` inside the `pages/api` directory. It is going to create a REST API endpoint for you. The endpoint point will look like this:

```sh
http://localhost:3000/api/info
```

Now copy the following code in this file:

```js
import axios from 'axios';

export default function handler(req, res) {
	if (req.method === 'GET') {
		const options = {
			method: 'POST',
			url: 'https://pincode.p.rapidapi.com/',
			headers: {
				'content-type': 'application/json',
				'x-rapidapi-host': 'pincode.p.rapidapi.com',
				'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
			},
			data: {searchBy: 'pincode', value: req.query.pinCode}
		};

		axios
			.request(options)
			.then(function (response) {
				res.status(200).json(response.data);
			})
			.catch(function (error) {
				console.error(error);
			});
	} else {
		res.status(400);
	}
}
```

This code makes an API call to the [Pin Codes – India API](https://RapidAPI.com/navii/api/pin-codes-india?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel) on the server and returns the results to the user. It executes when the user makes an API call to the `info` endpoint I mentioned above.

Once you are done, copy the following code in the `pages/index.js` file:

```jsx
import {useState} from 'react';
import axios from 'axios';

export default function Home() {
	const [pinCode, setPinCode] = useState();
	const [info, setInfo] = useState(null);
	const [btnText, setBtnText] = useState('Search');

	/**
	 *
	 *
	 * @param
	 */
	const getPostOfficeInfo = async e => {
		e.preventDefault();

		try {
			setBtnText('Loading...');
			const res = await axios.get(`/api/info`, {
				params: {
					pinCode
				}
			});
			setInfo(res.data);
		} catch (err) {
			console.log(err);
		}
		setBtnText('Search');
	};

	return (
		<div className="flex flex-col items-center">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Post <span className="text-danger">Office</span> Finder App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-14 md:text-base md:px-4 md:text-center">
				Get India Post Office Details using the pin code
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<form className="flex w-full justify-center md:flex-col md:w-5/6 ">
					<input
						autoFocus={true}
						type="number"
						className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm font-raleway md:w-full"
						placeholder="Pin code..."
						onChange={e => setPinCode(e.target.value)}
					/>
					<button
						className="outline-none border border-danger text-secondary font-bold font-raleway ml-4 w-52 px-12 py-2 rounded-sm bg-danger text-primary transition duration-300 hover:bg-bc hover:text-primary md:ml-0 md:mt-4"
						onClick={getPostOfficeInfo}
					>
						{btnText}
					</button>
				</form>
				{info && (
					<div className="flex flex-col text-primary text-sm text-raleway mt-12 w-3/6 h-4/5  md:flex-col md:w-4/6 md:h-full md:mb-12">
						{info.map(postOffice => {
							return (
								<div key={info.indexOf(postOffice)}>
									<h3 className="font-raleway font-semibold text-danger text-2xl text-primary pb-6 md:text-xl">
										{postOffice.office}
									</h3>
									<table className="bg-white w-full text-primary mb-8 md:text-sm md:mx-2">
										<tbody className="text-primary font-normal">
											<tr>
												<th className="border border-primary text-left px-4 py-4 font-normal">
													Circle
												</th>
												<th className="border border-primary text-left px-4 py-4 font-normal">
													{postOffice.circle}
												</th>
											</tr>
											<tr>
												<th className="border border-primary text-left px-4 py-4 font-normal">
													Delivery
												</th>
												<th className="border border-primary text-left px-4 py-4 font-normal">
													{postOffice.delivery}
												</th>
											</tr>
											<tr>
												<th className="border border-primary text-left px-4 py-4 font-normal">
													District
												</th>
												<th className="border border-primary text-left px-4 py-4 font-normal">
													{postOffice.district}
												</th>
											</tr>
											<tr>
												<th className="border border-primary text-left px-4 py-4 font-normal">
													Division
												</th>
												<th className="border border-primary text-left px-4 py-4 font-normal">
													{postOffice.division}
												</th>
											</tr>
											<tr>
												<th className="border border-primary text-left px-4 py-4 font-normal">
													Phone
												</th>
												<th className="border border-primary text-left px-4 py-4 font-normal">
													{postOffice.phone}
												</th>
											</tr>
											<tr>
												<th className="border border-primary text-left px-4 py-4 font-normal">
													Region
												</th>
												<th className="border border-primary text-left px-4 py-4 font-normal">
													{postOffice.region}
												</th>
											</tr>
											<tr>
												<th className="border border-primary text-left px-4 py-4 font-normal">
													Related Head Office
												</th>
												<th className="border border-primary text-left px-4 py-4 font-normal">
													{
														postOffice.related_headoffice
													}
												</th>
											</tr>
											<tr>
												<th className="border border-primary text-left px-4 py-4 font-normal">
													Taluk
												</th>
												<th className="border border-primary text-left px-4 py-4 font-normal">
													{postOffice.taluk}
												</th>
											</tr>
										</tbody>
									</table>
								</div>
							);
						})}
					</div>
				)}
			</div>
			<div className="flex flex-col mt-10 justify-end h-36 md:h-24">
				<p className="block mb-10 text-center text-primary text-xs">
					Made by RapidAPI DevRel Team -{' '}
					<a
						className="hover:text-danger"
						href="https://github.com/RapidAPI/DevRel-Examples-External"
					>
						See more examples like this
					</a>
				</p>
			</div>
		</div>
	);
}
```

You can see that I have created a function, `getPostOfficeInfo`, to request the API. I have also created a UI that is conditionally rendering on the screen based on the `info` state variable’ value.

## Wrap Up

That’s it. We have successfully built an [Post Office Finder App](https://rapidapi-example-post-office-info-app.vercel.app/) using [Pin Codes – India API](https://RapidAPI.com/navii/api/pin-codes-india?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel). You can find the source code of this web app [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/post-office-info-app).

In the end, it will look something like this:

![Post Office Finder App built with Next.js and Pin Codes – India API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/18960960a46d2f12581556adb21429c8fa5a1a51/guides/posts/build-post-office-info-app/images/cover.png)


Saad Irfan

If you are from India, you would want to know all the post offices around you if you want to visit one. In this piece, we will build a small web application for this using an API from RapidAPI Hub.

How to build an Post Office Info App Using Pin Codes – India API?

Ahmad Bilal

Realty API from RapidAPI Hub offers an extensive set of details about the real estate properties in the USA. This guide will demonstrate how to create our own Real Estate App using the API.

How to build a Real Estate App using Realty API?

You can get a lot of information from an area’s zip code. Instead of looking it up on the Internet, we can build an app for it using an API from RapidAPI Hub. In this piece, let's do just this and build an app to get information associated with a zipcode.

How to build a US Zip Code Info App using US Zip Code Information API?


<Lead>

If you are from the United Kingdom, you would want to know the restaurants in your district. Instead of looking up the restaurants one by one, we can build a small app that lists down all of them in one go.

</Lead>

So today, I am building a UK restaurant app that will list down restaurants in a UK district. So without any further ado, let’s jump in!

## Stack

We need to choose a stack first to build this application. I have decided to go with the [Jamstack](https://jamstack.org/).

I am going to use [Next.js](https://nextjs.org/) for the frontend and [TailwindCSS](https://tailwindcss.com/) for the styling.

If you don’t know about Next.js, it is a JavaScript framework built on top of React and provides features like server-side rendering, static site generation, etc. Tailwind is a CSS framework that provides utility classes to speed up the development process.

## Choosing The API

Let’s find an API that we can use to find the restaurants. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already and then search for “restaurants” in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

You will see different search results related to quotes APIs. For this piece, I am using [Wyre Data API](https://rapidapi.com/vfunnell/api/wyre-data?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel).

To use this API, you need to subscribe to it first. You can do this by clicking on **Subscribe to Test** button.

![Subscribe to Wyre Data  API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/543850dc152729797a102841c58e4bce9278f26c/guides/posts/build-uk-restaurant-app/images/subscribe.png)

Once you click the button, you will be redirected to another page where different available subscription packages will be shown. Let’s go with the free one for now.

After all this, you will be redirected back to the original page. Here you will have a key `x-rapidapi-key`. Save it. It will be used later in the application.

## Building The UI

You can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal. So let’s do that.

```sh
npx create-next-app -e with-tailwindcss uk-restaurant-app
```

This command is going to take a minute to set everything up. After generating the boilerplate, you will see a folder with the name `uk-restaurant-app` has been created. Open this folder in your preferred code editor. I will use [VSCode](https://code.visualstudio.com/) for this project.

### Project Files

When you open the project in your code editor, you will see the following directories and files in the root directory:

-   `pages` directory: Inside it, you will have files `index.js`, `_app.js`, and another directory called - - `api`. You only need to know about the `index.js` file that is the main entry point in your project.
-   `public` directory: This directory contains icons. You place your static files here to load later in the application.
-   `node_modules`: It’s another directory that contains all the node modules you are using in your application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.

Before we move on to writing the code, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/uk-restaurant-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are some TailwindCSS configurations I have done specifically for this project. I have added some colors that you do not have by default with TailwindCSS and set some screen sizes.

Now let’s start writing the code. I am going to do it in steps so you can follow along.

### → STEP #1

Open the `pages/index.js` file and remove all the existing code. After this, copy-paste the following code there:

```jsx
export default function Home() {
	return (
		<div className="flex flex-col items-center">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				UK <span className="text-danger">Restaurant</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-14 md:text-base md:px-4 md:text-center">
				Search for Restaurants in a UK district
			</h3>
		</div>
	);
}
```

It will create two headings for you with the text “UK Restaurant App” and “Search for Restaurants in a UK district”. You can change it to anything you prefer.

### → STEP #2

Now let’s create an input field and a search button. The user will be able to type the district name in the input box and use the search button to get the restaurants.

For this, copy the following code and paste it in `pages/index.js`:

```jsx
export default function Home() {
	return (
		<div className="flex flex-col items-center">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				UK <span className="text-danger">Restaurant</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-14 md:text-base md:px-4 md:text-center">
				Search for Restaurants in a UK district
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<form className="flex w-full justify-center md:flex-col md:w-5/6 ">
					<input
						autoFocus={true}
						type="text"
						className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm font-raleway md:w-full"
						placeholder="UK district..."
					/>
					<button className="outline-none border border-secondary text-bc font-bold font-raleway ml-4 w-52 px-12 py-2 rounded-sm bg-secondary text-primary transition duration-300 hover:bg-bc hover:text-primary md:ml-0 md:mt-4">
						Search
					</button>
				</form>
			</div>
		</div>
	);
}
```

This code is going to create an input field and button. I have also styled them a little bit using [TailwindCSS](<(https://tailwindcss.com/)>).

### → STEP #3

Let’s create some states to store the district name and the restaurant details that we will receive from the API. For this, copy-paste the following code in `pages/index.js`:

```jsx
import {useState} from 'react';

export default function Home() {
	const [area, setArea] = useState('');
	const [res, setRes] = useState(null);

	return (
		<div className="flex flex-col items-center">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				UK <span className="text-danger">Restaurant</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-14 md:text-base md:px-4 md:text-center">
				Search for Restaurants in a UK district
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<form className="flex w-full justify-center md:flex-col md:w-5/6 ">
					<input
						autoFocus={true}
						type="text"
						className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm font-raleway md:w-full"
						placeholder="UK district..."
						onChange={e => setArea(e.target.value)}
					/>
					<button className="outline-none border border-secondary text-bc font-bold font-raleway ml-4 w-52 px-12 py-2 rounded-sm bg-secondary text-primary transition duration-300 hover:bg-bc hover:text-primary md:ml-0 md:mt-4">
						Search
					</button>
				</form>
			</div>
		</div>
	);
}
```

You can see that I have added an `onChange` event handler to set the state value as soon as the user types something in the input box.

### → STEP #4

Let’s integrate the API now. For this, first, create a `.env.local` file and paste the following in it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY
```

You need to replace `YOUR-RAPIDAPI-KEY` here with the API key you got when you subscribed to the [Wyre Data API](https://rapidapi.com/vfunnell/api/wyre-data?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel). It is the value of `x-rapidapi-key` that you saved earlier.

Now download and add `axios` in your project. For this, run the following command in the terminal:

```sh
npm install axios
```

Now import `axios` at the top of the `pages/index.js`.

```js
import axios from ‘axios’;
```

### → STEP #5

RapidAPI Hub provides you with code snippets in different languages for integrating the API. I am going to use the `(JavaScript) Axios` one.

![Fetching data using (JavaScript) Axios](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/543850dc152729797a102841c58e4bce9278f26c/guides/posts/build-uk-restaurant-app/images/code-snippet.png)

Now create a file with the name `restaurant.js` inside the `pages/api` directory. It is going to create a REST API endpoint for you. The endpoint point will look like this:

```sh
http://localhost:3000/api/restaurant
```

Now copy the following code in this file:

```js
import axios from 'axios';

export default function handler(req, res) {
	if (req.method === 'GET') {
		const options = {
			method: 'GET',
			url: `https://wyre-data.p.rapidapi.com/restaurants/localauthority/${req.query.area}`,
			headers: {
				'x-rapidapi-host': 'wyre-data.p.rapidapi.com',
				'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
			}
		};

		axios
			.request(options)
			.then(function (response) {
				res.status(200).json(response.data);
			})
			.catch(function (error) {
				console.error(error);
			});
	} else {
		res.status(400);
	}
}
```

This code makes an API call to the [Wyre Data API](https://rapidapi.com/vfunnell/api/wyre-data?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel) on the server and returns the results to the user. It executes when the user makes an API call to the `restaurant` endpoint I mentioned above.

Once you are done, copy the following code in the `pages/index.js` file:

```jsx
import {useState} from 'react';
import axios from 'axios';

export default function Home() {
	const [area, setArea] = useState('');
	const [res, setRes] = useState(null);
	const [btnText, setBtnText] = useState('Search');

	/**
	 *
	 *
	 * Fetch restaurants of a district
	 */
	const fetchRestaurants = async e => {
		e.preventDefault();
		try {
			setBtnText('Loading...');
			const res = await axios.get(`/api/restaurant`, {
				params: {
					area
				}
			});
			setRes(res.data);
		} catch (err) {
			console.log(err);
		}
		setBtnText('Search');
	};

	return (
		<div className="flex flex-col items-center">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				UK <span className="text-danger">Restaurant</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-14 md:text-base md:px-4 md:text-center">
				Search for Restaurants in a UK district
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<form className="flex w-full justify-center md:flex-col md:w-5/6 ">
					<input
						autoFocus={true}
						type="text"
						className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm font-raleway md:w-full"
						placeholder="UK district..."
						onChange={e => setArea(e.target.value)}
					/>
					<button
						className="outline-none border border-secondary text-bc font-bold font-raleway ml-4 w-52 px-12 py-2 rounded-sm bg-secondary text-primary transition duration-300 hover:bg-bc hover:text-primary md:ml-0 md:mt-4"
						onClick={fetchRestaurants}
					>
						{btnText}
					</button>
				</form>
				{res && (
					<div className="flex flex-col text-primary text-sm text-raleway mt-12 w-3/6 h-4/5  md:flex-col md:w-4/6 md:h-full md:mb-12">
						{res.map(restaurant => {
							return (
								<div key={res.indexOf(restaurant)}>
									<h3 className="font-raleway font-semibold text-danger text-2xl text-primary pb-6 md:text-xl">
										{restaurant.BusinessName}
									</h3>
									<table className="bg-white w-full text-primary mb-8 md:text-sm md:mx-2">
										<tbody className="text-secondary font-normal">
											<tr>
												<th className="border border-secondary text-left px-4 py-4 font-normal">
													Address
												</th>
												<th className="border border-secondary text-left px-4 py-4 font-normal">
													{restaurant.AddressLine1}{' '}
													{restaurant.AddressLine2}{' '}
													{restaurant.AddressLine3}
												</th>
											</tr>
											<tr>
												<th className="border border-secondary text-left px-4 py-4 font-normal">
													Business Type
												</th>
												<th className="border border-secondary text-left px-4 py-4 font-normal">
													{restaurant.BusinessType}
												</th>
											</tr>
											{restaurant.Scores_Hygiene !==
												undefined && (
												<tr>
													<th className="border border-secondary text-left px-4 py-4 font-normal">
														Hygiene Score
													</th>
													<th className="border border-secondary text-left px-4 py-4 font-normal">
														{
															restaurant.Scores_Hygiene
														}
													</th>
												</tr>
											)}
										</tbody>
									</table>
								</div>
							);
						})}
					</div>
				)}
			</div>
			<div className="flex flex-col mt-10 justify-end h-36 md:h-24">
				<p className="block mb-10 text-center text-secondary text-xs">
					Made by RapidAPI DevRel Team -{' '}
					<a
						className="hover:text-active"
						href="https://github.com/RapidAPI/DevRel-Examples-External"
					>
						See more examples like this
					</a>
				</p>
			</div>
		</div>
	);
}
```

You can see that I have created a function, `fetchRestaurants`, to request the API. I have also created a piece of UI that is conditionally rendering on the screen based on the `res` state variable’ value.

## Wrap Up

That’s it. We have successfully built an [UK Restaurant App](https://rapidapi-example-uk-restaurant-app.vercel.app/) using [Wyre Data API](https://rapidapi.com/vfunnell/api/wyre-data?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel). You can find the source code of this web app [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/uk-restaurant-app).

In the end, it will look something like this:

![UK Restaurant App built with Next.js and Wyre Data  API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/543850dc152729797a102841c58e4bce9278f26c/guides/posts/build-uk-restaurant-app/images/cover.png)


If you are from the United Kingdom, you would want to know the restaurants in your district. In this piece, we are building a small web app just for this using an API from RapidAPI Hub.

How to build a UK Restaurant App using Wyre Data API?


<Lead>

You often need to find out what kind of nutrients a particular food contains. There any many calculators available on the internet. But you can build your own using an API from [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).

</Lead>

Today, I am building a food nutrient app that will show the user quantity of different nutrients present in a food. So without any further ado, let’s jump in!

## Stack

We need to choose a stack first to build this application. I have decided to go with the [Jamstack](https://jamstack.org/).

I am going to use [Next.js](https://nextjs.org/) for the frontend and [TailwindCSS](https://tailwindcss.com/) for the styling.

If you don’t know about Next.js, it is a JavaScript framework built on top of React and provides features like server-side rendering, static site generation, etc. Tailwind is a CSS framework that provides utility classes to speed up the development process.

## Choosing The API

Let’s find an API that we can use to search for food nutrients. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already and then search for “food nutrients” in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

You will see different search results related to food APIs. For this piece, I am using [CalorieNinja API](https://rapidapi.com/calorieninjas/api/calorieninjas?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).

It is a free API, so you do not need to subscribe to it. However, you will need your RapidAPI key. Go ahead and save the `x-rapidapi-key` so you can use it later.

## Building The UI

You can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal. So let’s do that.

```sh
npx create-next-app -e with-tailwindcss food-nutrient-app
```

This command is going to take a minute to set everything up. After generating the boilerplate, you will see a folder with the name `food-nutrient-app` has been created. Open this folder in your preferred code editor. I will use [VSCode](https://code.visualstudio.com/) for this project.

### Project Files

When you open the project in your code editor, you will see the following directories and files in the root directory:

-   `pages` directory: Inside it, you will have files `index.js`, `_app.js`, and another directory called - - `api`. You only need to know about the `index.js` file that is the main entry point in your project.
-   `public` directory: This directory contains icons. You place your static files here to load later in the application.
-   `node_modules`: It’s another directory that contains all the node modules you are using in your application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.

Before we move on to writing the code, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/food-nutrient-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are some TailwindCSS configurations I have done specifically for this project. I have added some colors that you do not have by default with TailwindCSS and set some screen sizes.

Now let’s start writing the code. I am going to do it in steps so you can follow along.

### → STEP #1

Open the `pages/index.js` file and remove all the existing code. After this, copy-paste the following code there:

```jsx
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Food <span className="text-secondary">Nutrient</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Shows Different Nutrient Quantity in A Food
			</h3>
		</div>
	);
}
```

It will create two headings for you with the text “Food Nutrient App” and “Shows Different Nutrient Quantity in A Food”. You can change it to anything you prefer.

### → STEP #2

Now let’s create an input field and a search button. The user will be able to type the food name in the input box and use the search button to get the nutrient details.

For this, copy the following code and paste it in `pages/index.js`:

```jsx
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Food <span className="text-secondary">Nutrient</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Shows Different Nutrient Quantity in A Food
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<form className="flex w-full justify-center md:flex-col md:w-5/6 ">
					<input
						autoFocus={true}
						type="text"
						className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm font-raleway md:w-full"
						placeholder="Enter the name of any food..."
					/>
					<button className="outline-none border border-secondary text-bc font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-secondary text-primary transition duration-300 hover:bg-bc hover:text-primary md:ml-0 md:mt-4">
						Search
					</button>
				</form>
			</div>
		</div>
	);
}
```

This code is going to create an input field and button. I have also styled them a little bit using [TailwindCSS](<(https://tailwindcss.com/)>).

### → STEP #3

Let’s create some states to store the food name and the nutrient details that we will receive from the API. For this, copy-paste the following code in `pages/index.js`.

```jsx
import {useState} from 'react';

export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Food <span className="text-secondary">Nutrient</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Shows Different Nutrient Quantity in A Food
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<form className="flex w-full justify-center md:flex-col md:w-5/6 ">
					<input
						autoFocus={true}
						type="text"
						className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm font-raleway md:w-full"
						placeholder="Enter the name of any food..."
						onChange={e => setName(e.target.value)}
					/>
					<button className="outline-none border border-secondary text-bc font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-secondary text-primary transition duration-300 hover:bg-bc hover:text-primary md:ml-0 md:mt-4">
						Search
					</button>
				</form>
			</div>
		</div>
	);
}
```

You can see that I have added an `onChange` event handler to set the state value as soon as the user types something in the input box.

### → STEP #4

Let’s integrate the API now. For this, first, create a `.env.local` file and paste the following in it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY
```

You need to replace `YOUR-RAPIDAPI-KEY` here with the API key you got when you subscribed to the [CalorieNinja API](https://rapidapi.com/calorieninjas/api/calorieninjas?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel). It is the value of `x-rapidapi-key` that you saved earlier.

Now download and add `axios` in your project. For this, run the following command in the terminal:

```sh
npm install axios
```

Now import `axios` at the top of the `pages/index.js`.

```js
import axios from ‘axios’;
```

### → STEP #5

RapidAPI Hub provides you with code snippets in different languages for integrating the API. I am going to use the `(JavaScript) Axios` one.

![Fetching data using (JavaScript) Axios](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/543850dc152729797a102841c58e4bce9278f26c/guides/posts/build-food-nutrient-app/images/code-snippet.png)

Now create a file with the name `nutrient.js` inside the `pages/api` directory. It is going to create a REST API endpoint for you. The endpoint point will look like this:

```sh
http://localhost:3000/api/nutrient
```

Now copy the following code in this file:

```js
import axios from 'axios';

export default function handler(req, res) {
	if (req.method === 'GET') {
		const options = {
			method: 'GET',
			url: 'https://calorieninjas.p.rapidapi.com/v1/nutrition',
			params: {query: req.query.name},
			headers: {
				'x-rapidapi-host': 'calorieninjas.p.rapidapi.com',
				'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
			}
		};

		axios
			.request(options)
			.then(function (response) {
				res.status(200).json(response.data);
			})
			.catch(function (error) {
				console.error(error);
			});
	} else {
		res.status(400);
	}
}
```

This code makes an API call to the [CalorieNinja API](https://rapidapi.com/calorieninjas/api/calorieninjas?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) on the server and returns the results to the user. It executes when the user makes an API call to the `nutrient` endpoint I mentioned above.

Once you are done, copy the following code in the `pages/index.js` file:

```jsx
import {useState} from 'react';
import axios from 'axios';

export default function Home() {
	const [name, setName] = useState('');
	const [res, setRes] = useState(null);

	/**
	 *
	 *
	 * Fetch nutrient information of a given food
	 */
	const fetchNutrients = async e => {
		e.preventDefault();
		try {
			const res = await axios.get(`/api/nutrient`, {
				params: {
					name
				}
			});
			setRes(res.data.items[0]);
		} catch (err) {
			console.log(err);
		}
	};

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Food <span className="text-secondary">Nutrient</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Shows Different Nutrient Quantity in A Food
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<form className="flex w-full justify-center md:flex-col md:w-5/6 ">
					<input
						autoFocus={true}
						type="text"
						className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm font-raleway md:w-full"
						placeholder="Enter the name of any food..."
						onChange={e => setName(e.target.value)}
					/>
					<button
						className="outline-none border border-secondary text-bc font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-secondary text-primary transition duration-300 hover:bg-bc hover:text-primary md:ml-0 md:mt-4"
						onClick={fetchNutrients}
					>
						Search
					</button>
				</form>
				{res && (
					<div className="flex flex-col text-primary text-sm text-raleway mt-12 w-3/6 h-4/5  md:flex-col md:w-4/6 md:h-full md:mb-12">
						<table className="bg-white w-full text-primary mb-8 md:text-sm md:mx-2">
							<thead className="font-raleway uppercase tracking-wide text-secondary">
								<tr>
									<th className="border border-x-0 text-left px-4 py-4">
										Nutrient
									</th>
									<th className="border border-x-0 text-left px-4 py-4">
										Quantity
									</th>
								</tr>
							</thead>
							<tbody className="text-primary">
								<tr>
									<th className="border border-x-0 border-secondary text-left px-4 py-4">
										Calories
									</th>
									<th className="border border-x-0 border-secondary text-left px-4 py-4">
										{res.calories}
									</th>
								</tr>
								<tr>
									<th className="border border-x-0 border-secondary text-left px-4 py-4">
										Carbohydrates
									</th>
									<th className="border border-x-0 border-secondary text-left px-4 py-4">
										{res.carbohydrates_total_g} g
									</th>
								</tr>
								<tr>
									<th className="border border-x-0 border-secondary text-left px-4 py-4">
										Cholesterol
									</th>
									<th className="border border-x-0 border-secondary text-left px-4 py-4">
										{res.cholesterol_mg} mg
									</th>
								</tr>
								<tr>
									<th className="border border-x-0 border-secondary text-left px-4 py-4">
										Fat Saturated
									</th>
									<th className="border border-x-0 border-secondary text-left px-4 py-4">
										{res.fat_saturated_g} g
									</th>
								</tr>
								<tr>
									<th className="border border-x-0 border-secondary text-left px-4 py-4">
										Total Fat
									</th>
									<th className="border border-x-0 border-secondary text-left px-4 py-4">
										{res.fat_total_g} g
									</th>
								</tr>
								<tr>
									<th className="border border-x-0 border-secondary text-left px-4 py-4">
										Fiber
									</th>
									<th className="border border-x-0 border-secondary text-left px-4 py-4">
										{res.fiber_g} g
									</th>
								</tr>
								<tr>
									<th className="border border-x-0 border-secondary text-left px-4 py-4">
										Potassium
									</th>
									<th className="border border-x-0 border-secondary text-left px-4 py-4">
										{res.potassium_mg} mg
									</th>
								</tr>
								<tr>
									<th className="border border-x-0 border-secondary text-left px-4 py-4">
										Protein
									</th>
									<th className="border border-x-0 border-secondary text-left px-4 py-4">
										{res.protein_g} g
									</th>
								</tr>
								<tr>
									<th className="border border-x-0 border-secondary text-left px-4 py-4">
										Serving Size
									</th>
									<th className="border border-x-0 border-secondary text-left px-4 py-4">
										{res.serving_size_g} g
									</th>
								</tr>
								<tr>
									<th className="border border-x-0 border-secondary text-left px-4 py-4">
										Sodium
									</th>
									<th className="border border-x-0 border-secondary text-left px-4 py-4">
										{res.sodium_mg} mg
									</th>
								</tr>
								<tr>
									<th className="border border-x-0 border-secondary text-left px-4 py-4">
										Sugar
									</th>
									<th className="border border-x-0 border-secondary text-left px-4 py-4">
										{res.sugar_g} g
									</th>
								</tr>
							</tbody>
						</table>
					</div>
				)}
			</div>
			<div className="flex flex-col mt-10 justify-end h-36 md:h-24">
				<p className="block mb-10 text-center text-secondary text-xs">
					Made by RapidAPI DevRel Team -{' '}
					<a
						className="hover:text-active"
						href="https://github.com/RapidAPI/DevRel-Examples-External"
					>
						See more examples like this
					</a>
				</p>
			</div>
		</div>
	);
}
```

You can see that I have created a function, `​​fetchNutrients`, to request the API. I have also created a piece of UI that is conditionally rendering on the screen based on the `res` state variable’ value.

## Wrap Up

That’s it. We have successfully built an [Food Nutrient App](https://rapidapi-example-food-nutrient-app.vercel.app/) using [CalorieNinjas API](https://RapidAPI.com/calorieninjas/api/calorieninjas?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel). You can find the source code of this web app [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/food-nutrient-app).

In the end, it will look something like this:

![Food Nutrient App built with Next.js and CalorieNinjas API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/543850dc152729797a102841c58e4bce9278f26c/guides/posts/build-food-nutrient-app/images/cover.png)


You often need to find out what kind of nutrients a particular food contains. In this piece, we are building a small web app just for this using an API from RapidAPI Hub.

How to build a Food Nutrient App using Calorie Ninja API?

In this guide, we will build a Carbon Footprint App that will use an API from RapidAPI Hub to calculate the carbon footprint of travel.

How to build a Carbon Footprint App using Next.js and the CarbonFootprint API?


<Lead>

There are so many absurd things and facts that exist in this world. To give them more visibility, we can build a small web application to display them.

</Lead>

So today, I am building a random facts app that will display different facts to the user. So without any further ado, let’s jump in!

## Stack

We need to choose a stack first to build this application. I have decided to go with the [Jamstack](https://jamstack.org/).

I am going to use [Next.js](https://nextjs.org/) for the frontend and [TailwindCSS](https://tailwindcss.com/) for the styling.

If you don’t know about Next.js, it is a JavaScript framework built on top of React and provides features like server-side rendering, static site generation, etc. Tailwind is a CSS framework that provides utility classes to speed up the development process.

## Choosing The API

Let’s find an API that we can use to find the facts. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already and then search for “facts apis” in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

You will see different search results related to facts APIs. For this piece, I am using [Random Facts API](https://RapidAPI.com/APILAB/api/random-facts2?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel).

To use this API, you need to subscribe to it first. You can do this by clicking on **Subscribe to Test** button.

![Subscribe to Random Facts API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/9a5df4ccbcbedabedd630cb84c1e7b9a91b9e213/guides/posts/build-random-facts-app/images/subscribe.png)

Once you click the button, you will be redirected to another page where different available subscription packages will be shown. Let’s go with the free one for now.

After all this, you will be redirected back to the original page. Here you will have a key `x-rapidapi-key`. Save it. It will be used later in the application.

## Building The UI

You can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal. So let’s do that.

```sh
npx create-next-app -e with-tailwindcss random-facts-app
```

This command is going to take a minute to set everything up. After generating the boilerplate, you will see a folder with the name `random-facts-app` has been created. Open this folder in your preferred code editor. I will use [VSCode](https://code.visualstudio.com/) for this project.

### Project Files

When you open the project in your code editor, you will see the following directories and files in the root directory:

-   `pages` directory: Inside it, you will have files `index.js`, `_app.js`, and another directory called - - `api`. You only need to know about the `index.js` file that is the main entry point in your project.
-   `public` directory: This directory contains icons. You place your static files here to load later in the application.
-   `node_modules`: It’s another directory that contains all the node modules you are using in your application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.

Before we move on to writing the code, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/random-facts-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are some TailwindCSS configurations I have done specifically for this project. I have added some colors that you do not have by default with TailwindCSS and set some screen sizes.

Now let’s start writing the code. I am going to do it in steps so you can follow along.

### → STEP #1

Open the `pages/index.js` file and remove all the existing code. After this, copy-paste the following code there:

```jsx
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Random <span className="text-active">Facts</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Take A Look At Some Random Interesting Facts
			</h3>
		</div>
	);
}
```

It will create two headings for you with the text “Random Facts App” and “Take A Look At Some Random Interesting Facts”. You can change it to anything you prefer.

### → STEP #2

Now let’s create an area where the fact will be displayed on the screen. Also, we need to create a button to fetch the next fact.

For this, copy the following code and paste it in `pages/index.js`:

```jsx
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Random <span className="text-active">Facts</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Take A Look At Some Random Interesting Facts
			</h3>
			<div className="flex flex-col mt-4 w-3/6 h-4/5 md:flex-col md:w-4/6 md:h-full md:mb-12">
				<div className="border border-secondary text-secondary font-raleway mb-12 ">
					<p className="px-4 py-4 tracking-wide leading-8"></p>
				</div>
				<button className="outline-none w-48 border border-active font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-active text-primary transition duration-300 hover:bg-background hover:text-secondary md:ml-0 md:mt-4">
					New Fact
				</button>
			</div>
		</div>
	);
}
```

I am using [TailwindCSS](https://tailwindcss.com/) to add CSS to all these HTML elements.

### → STEP #3

Let’s create a state variable to store the fact to display on the screen. For this, copy-paste the following code in `pages/index.js`.

```jsx
import {useState} from 'react';

export default function Home() {
	const [fact, setFact] = useState();
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Random <span className="text-active">Facts</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Take A Look At Some Random Interesting Facts
			</h3>
			<div className="flex flex-col mt-4 w-3/6 h-4/5 md:flex-col md:w-4/6 md:h-full md:mb-12">
				<div className="border border-secondary text-secondary font-raleway mb-12 ">
					<p className="px-4 py-4 tracking-wide leading-8">{fact}</p>
				</div>
				<button className="outline-none w-48 border border-active font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-active text-primary transition duration-300 hover:bg-background hover:text-secondary md:ml-0 md:mt-4">
					New Fact
				</button>
			</div>
		</div>
	);
}
```

You can see in the above code snippet that now I am displaying the fact from the `fact` state in the paragraph tag.

### → STEP #4

Let’s integrate the API now. For this, first, create a `.env.local` file and paste the following in it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY
```

You need to replace `YOUR-RAPIDAPI-KEY` here with the API key you got when you subscribed to the [Random Facts API](https://rapidapi.com/APILAB/api/random-facts2?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel). It is the value of `x-rapidapi-key` that you saved earlier.

Now download and add `axios` in your project. For this, run the following command in the terminal:

```sh
npm install axios
```

Now import `axios` at the top of the `pages/index.js`.

```js
import axios from ‘axios’;
```

### → STEP #5

RapidAPI Hub provides you with code snippets in different languages for integrating the API. I am going to use the `(JavaScript) Axios` one.

![Fetching data using (JavaScript) Axios](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/9a5df4ccbcbedabedd630cb84c1e7b9a91b9e213/guides/posts/build-random-facts-app/images/code-snippet.png)

Now create a file with `fact.js` inside the `pages/api` directory. It is going to create a REST API endpoint for you. The endpoint point will look like this:

```sh
http://localhost:3000/api/fact
```

Now copy the following code in this file:

```js
import axios from 'axios';

export default async function handler(req, res) {
	if (req.method === 'GET') {
		const options = {
			method: 'GET',
			url: 'https://random-facts2.p.rapidapi.com/getfact',
			headers: {
				'x-rapidapi-host': 'random-facts2.p.rapidapi.com',
				'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
			}
		};

		axios
			.request(options)
			.then(function (response) {
				res.status(200).json(response.data);
			})
			.catch(function (error) {
				console.error(error);
			});
	} else {
		res.status(400);
	}
}
```

This code makes an API call to the [Random Facts API](https://RapidAPI.com/APILAB/api/random-facts2?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel) on the server and returns the results to the user. It executes when the user makes an API call to the `fact` endpoint I mentioned above.

Once you are done, copy the following code in the `pages/index.js` file:

```jsx
import {useState} from 'react';
import axios from 'axios';

export default function Home({data}) {
	const [fact, setFact] = useState(data.Fact);

	/**
	 *
	 *
	 * get random facts
	 */
	const getFact = async () => {
		try {
			const res = await axios.get(`/api/fact`);
			setFact(res.data.Fact);
		} catch (err) {
			console.log(err);
		}
	};

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Random <span className="text-active">Facts</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Take A Look At Some Random Interesting Facts
			</h3>
			<div className="flex flex-col mt-4 w-3/6 h-4/5 md:flex-col md:w-4/6 md:h-full md:mb-12">
				<div className="border border-secondary text-secondary font-raleway mb-12 ">
					<p className="px-4 py-4 tracking-wide leading-8">{fact}</p>
				</div>
				<button
					className="outline-none w-48 border border-active font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-active text-primary transition duration-300 hover:bg-background hover:text-secondary md:ml-0 md:mt-4"
					onClick={getFact}
				>
					New Fact
				</button>
			</div>
			<div className="flex flex-col mt-10 justify-end h-36 md:h-24">
				<p className="block mb-10 text-center text-secondary text-xs">
					Made by RapidAPI DevRel Team -{' '}
					<a
						className="hover:text-active"
						href="https://github.com/RapidAPI/DevRel-Examples-External"
					>
						See more examples like this
					</a>
				</p>
			</div>
		</div>
	);
}

export async function getServerSideProps() {
	const res = await axios.get('http://localhost:3000/api/fact');
	const {data} = res;

	if (!data) {
		return {
			notFound: true
		};
	}

	return {
		props: {
			data
		}
	};
}
```

I am using the Next.js `getServerSideProps` function to fetch the data from the server. It will make my application server-side, and the user will never see a loading state. You can also use getStaticProps instead of getServerSideProps, and the application will then fetch the data at build time.

I have also created a functions, i.e., `getFact` and set it to execute when the user click on the Next Fact button. It makes an API call to get the new fact.

## Wrap Up

That’s it. We have successfully built a [Random Facts App](https://rapidapi-example-quote-app.vercel.app/) using [Random Facts API](https://RapidAPI.com/APILAB/api/random-facts2?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel). You can find the source code of this web app [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/random-facts-app).

In the end, it will look something like this:

![Random Facts App built with Next.js and Random Facts API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/9a5df4ccbcbedabedd630cb84c1e7b9a91b9e213/guides/posts/build-random-facts-app/images/cover.png)


In this piece, I am going to show you how you can build a small random facts application in this piece using an API from RapidAPI Hub and Next.js.

How to build a Random Facts App using Random Facts API?


<Lead>

If you are a gamer like me then you would want to stay up-to-date with all the things happening in the game market. We can build a small application to gather all the news at one place.

</Lead>

Today, I am building a game news application where all the news related to the gaming industry will be displayed. So without any further ado, let’s jump in!

## Stack

We need to choose a stack first to build this application. I have decided to go with the [Jamstack](https://jamstack.org/).

I am going to use [Next.js](https://nextjs.org/) for the frontend and [TailwindCSS](https://tailwindcss.com/) for the styling.

If you don’t know about Next.js, it is a JavaScript framework built on top of React and provides features like server-side rendering, static site generation, etc. Tailwind is a CSS framework that provides utility classes to speed up the development process.

## Choosing The API

Let’s find an API that we can use to search for games news. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already and then search for “game news” in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

You will see different search results related to validation APIs. For this piece, I am using [Gaming-News API](https://RapidAPI.com/alexaustin9816@gmail.com/api/gaming-news/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).

It is a free API, so you do not need to subscribe to it. However, you will need your RapidAPI key. Go ahead and save the `x-rapidapi-key` so you can use it later.

## Building The UI

You can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal. So let’s do that.

```sh
npx create-next-app -e with-tailwindcss game-news-app
```

This command is going to take a minute to set everything up. After generating the boilerplate, you will see a folder with the name `game-news-app` has been created. Open this folder in your preferred code editor. I will use [VSCode](https://code.visualstudio.com/) for this project.

### Project Files

When you open the project in your code editor, you will see the following directories and files in the root directory:

-   `pages` directory: Inside it, you will have files `index.js`, `_app.js`, and another directory called - - `api`. You only need to know about the `index.js` file that is the main entry point in your project.
-   `public` directory: This directory contains icons. You place your static files here to load later in the application.
-   `node_modules`: It’s another directory that contains all the node modules you are using in your application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.

Before we move on to writing the code, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/game-news-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are some TailwindCSS configurations I have done specifically for this project. I have added some colors that you do not have by default with TailwindCSS and set some screen sizes.

Now let’s start writing the code. I am going to do it in steps so you can follow along.

### → STEP #1

Open the `pages/index.js` file and remove all the existing code. After this, copy-paste the following code there:

```jsx
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Game <span className="text-secondary">News</span> App
			</h2>
			<h3 className="text-lightGrey text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Take a look at what is happening in the game world
			</h3>
		</div>
	);
}
```

It will create two headings for you with the text “Game News App” and “Take a look at what is happening in the game world”. You can change it to anything you prefer.

### → STEP #2

Let’s integrate the API now. For this, first, create a `.env.local` file and paste the following in it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY
```

You need to replace `YOUR-RAPIDAPI-KEY` here with the API key you got when you subscribed to the [Gaming-News API](https://RapidAPI.com/alexaustin9816@gmail.com/api/gaming-news/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel). It is the value of `x-rapidapi-key` that you saved earlier.

Now download and add `axios` in your project. For this, run the following command in the terminal:

```sh
npm install axios
```

Now import `axios` at the top of the `pages/index.js`.

```js
import axios from ‘axios’;
```

### → STEP #3

RapidAPI Hub provides you with code snippets in different languages for integrating the API. I am going to use the `(JavaScript) Axios` one.

![Fetching data using (JavaScript) Axios](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/9a5df4ccbcbedabedd630cb84c1e7b9a91b9e213/guides/posts/build-game-news-app/images/code-snippet.png)

Now create a file with `news.js` inside the `pages/api` directory. It is going to create a REST API endpoint for you. The endpoint point will look like this:

```sh
http://localhost:3000/api/news
```

Now copy the following code in this file:

```js
import axios from 'axios';

export default async function handler(req, res) {
	if (req.method === 'GET') {
		const options = {
			method: 'GET',
			url: 'https://gaming-news.p.rapidapi.com/news',
			headers: {
				'x-rapidapi-host': 'gaming-news.p.rapidapi.com',
				'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
			}
		};

		axios
			.request(options)
			.then(function (response) {
				res.status(200).json(response.data);
			})
			.catch(function (error) {
				console.error(error);
			});
	} else {
		res.status(400);
	}
}
```

This code makes an API call to the [Gaming-News API](https://RapidAPI.com/alexaustin9816@gmail.com/api/gaming-news/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) on the server and returns the results to the user. It executes when the user makes an API call to the `news` endpoint I mentioned above.

Once you are done, copy the following code in the `pages/index.js` file:

```jsx
import axios from 'axios';
import Link from 'next/link';

export default function Home({value}) {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Game <span className="text-secondary">News</span> App
			</h2>
			<h3 className="text-lightGrey text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Take a look at what is happening in the game world
			</h3>
			{value.map(news => {
				return (
					<div
						className="flex items-center text-lg px-10 mb-10 font-light font-raleway h-32 w-3/6 rounded-sm border-2 border-danger text-primary cursor-pointer transition duration-300 hover:border-primary hover:text-danger md:w-80 md:h-40"
						key={value.indexOf(news)}
					>
						<Link href={news.url}>
							<a>
								<h3>{news.title}</h3>
								<p className="text-sm pt-4">
									Source: {news.source}
								</p>
							</a>
						</Link>
					</div>
				);
			})}
			<div className="flex flex-col mt-10 justify-end h-36">
				<p className="block mb-10 text-center text-secondary text-xs">
					Made by RapidAPI DevRel Team -{' '}
					<a
						className="hover:text-lightGrey"
						href="https://github.com/RapidAPI/DevRel-Examples-External"
					>
						See more examples like this
					</a>
				</p>
			</div>
		</div>
	);
}

export async function getServerSideProps() {
	const res = await axios.get('http://localhost:3000/api/news');
	const {data: value} = res;

	if (!value) {
		return {
			notFound: true
		};
	}

	return {
		props: {
			value
		}
	};
}
```

I am using the Next.js `getServerSideProps` function to fetch the data from the server. It will make my application server-side, and the user will never see a loading state. You can also use getStaticProps instead of getServerSideProps, and the application will then fetch the data at build time.

Afterward, I am mapping the news I am getting from the `getServerSideProps` on the screen.

## Wrap Up

That’s it. We have successfully built a [Game News App](https://rapidapi-example-game-news-app.vercel.app/) using [Gaming-News API](https://RapidAPI.com/alexaustin9816@gmail.com/api/gaming-news/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel). You can find the source code of this web app [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/game-news-app).

In the end, it will look something like this:

![Game News App built with Next.js and Game News API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/9a5df4ccbcbedabedd630cb84c1e7b9a91b9e213/guides/posts/build-game-news-app/images/cover.png)


In this piece, I am going to teach you how to build a small application that will display only game related news to the user.

How to build a Game News App using Gaming News API?

Today, we will build a Food Recipe app using Spoonacular API from RapidAPI Hub.

How to build a Food Recipe App using Next.js and Spoonacular API?

Today we will build a Streaming Availability app using an API from RapidAPI Hub.

How to build a Streaming Availability App using Next.js?


<Lead>

If you are interested in learning about their horoscope, you can either search on the internet or build your own application. The latter sounds more fun.

</Lead>

Today, I am building a horoscope app to provide you with your daily horoscope dose. So without any further ado, let’s jump in!

## Stack

We need to choose a stack first to build this application. I have decided to go with the [Jamstack](https://jamstack.org/).

I am going to use [Next.js](https://nextjs.org/) for the frontend and [TailwindCSS](https://tailwindcss.com/) for the styling.

If you don’t know about Next.js, it is a JavaScript framework built on top of React and provides features like server-side rendering, static site generation, etc. Tailwind is a CSS framework that provides utility classes to speed up the development process.

## Choosing The API

Let’s find an API that we can use to find the horoscope. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already and then search for “horoscope apis” in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

You will see different search results related to quotes APIs. For this piece, I am using [Aztro API](https://RapidAPI.com/sameer.kumar/api/aztro/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).

To use this API, you need to subscribe to it first. You can do this by clicking on **Subscribe to Test** button.

![Subscribe to Aztro API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/5e204c20a282c42de8cc6939ee7aa62e24049955/guides/posts/build-horoscope-app/images/subscribe.png)

Once you click the button, you will be redirected to another page where different available subscription packages will be shown. Let’s go with the free one for now.

After all this, you will be redirected back to the original page. Here you will have a key `x-rapidapi-key`. Save it. It will be used later in the application.

## Building The UI

You can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal. So let’s do that.

```sh
npx create-next-app -e with-tailwindcss horoscope-app
```

This command is going to take a minute to set everything up. After generating the boilerplate, you will see a folder with the name `horoscope-app` has been created. Open this folder in your preferred code editor. I will use [VSCode](https://code.visualstudio.com/) for this project.

### Project Files

When you open the project in your code editor, you will see the following directories and files in the root directory:

-   `pages` directory: Inside it, you will have files `index.js`, `_app.js`, and another directory called - - `api`. You only need to know about the `index.js` file that is the main entry point in your project.
-   `public` directory: This directory contains icons. You place your static files here to load later in the application.
-   `node_modules`: It’s another directory that contains all the node modules you are using in your application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.

Before we move on to writing the code, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/horoscope-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are some TailwindCSS configurations I have done specifically for this project. I have added some colors that you do not have by default with TailwindCSS and set some screen sizes.

Now let’s start writing the code. I am going to do it in steps so you can follow along.

### → STEP #1

Open the `pages/index.js` file and remove all the existing code. After this, copy-paste the following code there:

```jsx
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				<span className="text-active">Horoscope</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Lookup Your Daily Horoscope Quickly
			</h3>
		</div>
	);
}
```

It will create two headings for you with the text “Horoscope App” and “ Lookup Your Daily Horoscope Quickly”. You can change it to anything you prefer.

### → STEP #2

Now let’s create a dropdown and a search button. The user will be able to select the horoscope from the dropdown and use the search button to get the details.

For this, copy the following code and paste it in `pages/index.js`:

```jsx
const signs = [
	'Aries',
	'Taurus',
	'Gemini',
	'Cancer',
	'Leo',
	'Virgo',
	'Libra',
	'Scorpio',
	'Sagittarius',
	'Capricorn',
	'Aquarius',
	'Pisces'
];

export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				<span className="text-active">Horoscope</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Lookup Your Daily Horoscope Quickly
			</h3>
			<div className="flex w-full justify-center md:flex-col md:w-5/6">
				<select
					name="countries"
					autoFocus={true}
					className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm font-raleway md:w-full"
				>
					{signs.map(sign => (
						<option value={sign} key={signs.indexOf(sign)}>
							{sign}
						</option>
					))}
				</select>
				<button className="outline-none border border-danger font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-danger text-primary transition duration-300 hover:bg-background hover:text-black md:ml-0 md:mt-4">
					Search
				</button>
			</div>
		</div>
	);
}
```

This code is going to create a dropdown field and button. I have also styled them a little bit using [TailwindCSS](https://tailwindcss.com/).

### → STEP #3

Let’s create some states to store the user-selected horoscope and the horoscope details we will receive from the API. For this, copy-paste the following code in `pages/index.js`.

```jsx
import {useState} from 'react';

const signs = [
	'Aries',
	'Taurus',
	'Gemini',
	'Cancer',
	'Leo',
	'Virgo',
	'Libra',
	'Scorpio',
	'Sagittarius',
	'Capricorn',
	'Aquarius',
	'Pisces'
];

export default function Home() {
	const [res, setRes] = useState(data);
	const [selectedSign, setSelectedSign] = useState('');

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				<span className="text-active">Horoscope</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Lookup Your Daily Horoscope Quickly
			</h3>
			<div className="flex w-full justify-center md:flex-col md:w-5/6">
				<select
					name="countries"
					autoFocus={true}
					className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm font-raleway md:w-full"
					onChange={e => setSelectedSign(e.target.value)}
				>
					{signs.map(sign => (
						<option value={sign} key={signs.indexOf(sign)}>
							{sign}
						</option>
					))}
				</select>
				<button className="outline-none border border-danger font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-danger text-primary transition duration-300 hover:bg-background hover:text-black md:ml-0 md:mt-4">
					Search
				</button>
			</div>
		</div>
	);
}
```

You can see that I have added an `onChange` event handler to set the state value as soon as the user selects the horoscope.

### → STEP #4

Let’s integrate the API now. For this, first, create a `.env.local` file and paste the following in it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY
```

You need to replace `YOUR-RAPIDAPI-KEY` here with the API key you got when you subscribed to the [Aztro API](https://RapidAPI.com/sameer.kumar/api/aztro/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel). It is the value of `x-rapidapi-key` that you saved earlier.

Now download and add `axios` in your project. For this, run the following command in the terminal:

```sh
npm install axios
```

Now import `axios` at the top of the `pages/index.js`.

```js
import axios from ‘axios’;
```

### → STEP #5

RapidAPI Hub provides you with code snippets in different languages for integrating the API. I am going to use the `(JavaScript) Axios` one.

![Fetching data using (JavaScript) Axios](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/5e204c20a282c42de8cc6939ee7aa62e24049955/guides/posts/build-horoscope-app/images/code-snippet.png)

Now create a file with the name `horoscope.js` inside the `pages/api` directory. It is going to create a REST API endpoint for you. The endpoint point will look like this:

```sh
http://localhost:3000/api/horoscope
```

Now copy the following code in this file:

```js
import axios from 'axios';

export default async function handler(req, res) {
	if (req.method === 'POST') {
		const sign = req.body.sign || 'Aries';
		const options = {
			method: 'POST',
			url: 'https://sameer-kumar-aztro-v1.p.rapidapi.com/',
			params: {sign: sign, day: 'today'},
			headers: {
				'x-rapidapi-host': 'sameer-kumar-aztro-v1.p.rapidapi.com',
				'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
			}
		};

		axios
			.request(options)
			.then(function (response) {
				res.status(200).json(response.data);
			})
			.catch(function (error) {
				console.error(error);
			});
	} else {
		res.status(400);
	}
}
```

This code makes an API call to the [Aztro API](https://RapidAPI.com/sameer.kumar/api/aztro/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) on the server and returns the results to the user. It executes when the user makes an API call to the `horoscope` endpoint I mentioned above.

Once you are done, copy the following code in the `pages/index.js` file:

```jsx
import {useState} from 'react';
import axios from 'axios';

const signs = [
	'Aries',
	'Taurus',
	'Gemini',
	'Cancer',
	'Leo',
	'Virgo',
	'Libra',
	'Scorpio',
	'Sagittarius',
	'Capricorn',
	'Aquarius',
	'Pisces'
];

export default function Home({data}) {
	const [res, setRes] = useState(data);
	const [selectedSign, setSelectedSign] = useState('');

	/**
	 *
	 *
	 * Fetch horoscope
	 */
	const fetchHoroscope = async () => {
		try {
			const res = await axios.post('/api/horoscope', {
				sign: selectedSign
			});
			setRes(res.data);
		} catch (err) {
			console.log(err);
		}
	};

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				<span className="text-active">Horoscope</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Lookup Your Daily Horoscope Quickly
			</h3>
			<div className="flex w-full justify-center md:flex-col md:w-5/6">
				<select
					name="countries"
					autoFocus={true}
					className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm font-raleway md:w-full"
					onChange={e => setSelectedSign(e.target.value)}
				>
					{signs.map(sign => (
						<option value={sign} key={signs.indexOf(sign)}>
							{sign}
						</option>
					))}
				</select>
				<button
					className="outline-none border border-danger font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-danger text-primary transition duration-300 hover:bg-background hover:text-black md:ml-0 md:mt-4"
					onClick={fetchHoroscope}
				>
					Search
				</button>
			</div>
			<div className="flex flex-col mt-16 w-3/6 h-4/5 md:flex-col md:w-5/6 md:h-full md:mb-12 md:items-center">
				<p className="border border-secondary border-b-0 text-secondary font-raleway px-4 py-8 tracking-wide leading-8">
					{res.description}
				</p>
				<table className="w-full text-secondary mb-8 md:text-sm md:mx-2">
					<tbody>
						<tr>
							<td className="border border-secondary px-4 py-4 text-active">
								Color
							</td>
							<td className="border px-4 py-4">{res.color}</td>
						</tr>
						<tr>
							<td className="border border-secondary px-4 py-4 text-active">
								Compatibility
							</td>
							<td className="border px-4 py-4">
								{res.compatibility}
							</td>
						</tr>
						<tr>
							<td className="border border-secondary px-4 py-4 text-active">
								Date Range
							</td>
							<td className="border px-4 py-4">
								{res.date_range}
							</td>
						</tr>
						<tr>
							<td className="border border-secondary px-4 py-4 text-active">
								Lucky Number
							</td>
							<td className="border px-4 py-4">
								{res.lucky_number}
							</td>
						</tr>
						<tr>
							<td className="border border-secondary px-4 py-4 text-active">
								Mood
							</td>
							<td className="border px-4 py-4">{res.mood}</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div className="flex flex-col mt-10 justify-end h-36">
				<p className="block mb-10 text-center text-secondary text-xs">
					Made by RapidAPI DevRel Team -{' '}
					<a
						className="hover:text-active"
						href="https://github.com/RapidAPI/DevRel-Examples-External"
					>
						See more examples like this
					</a>
				</p>
			</div>
		</div>
	);
}

export async function getServerSideProps() {
	const res = await axios.post('http://localhost:3000/api/horoscope');
	const {data} = res;

	if (!data) {
		return {
			notFound: true
		};
	}

	return {
		props: {
			data
		}
	};
}
```

I am using the Next.js `getServerSideProps` function to fetch the data from the server. It will make my application server-side, and the user will never see a loading state. You can also use `getStaticProps` instead of `getServerSideProps`, and the application will then fetch the data at build time.

I have created a `fetchHoroscope` function that makes an API call when the user clicks on the `search` button.

## Wrap Up

That’s it. We have successfully built a Horoscope App](https://rapidapi-example-horoscope-app.vercel.app/) using [Aztro API](https://RapidAPI.com/sameer.kumar/api/aztro/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel). You can find the source code of this web app [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/horoscope-app).

In the end, it will look something like this:

![Horoscope App built with Next.js using Aztro API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/5e204c20a282c42de8cc6939ee7aa62e24049955/guides/posts/build-horoscope-app/images/cover.png)


If you are interested in learning about their horoscope, you can either search on the internet or build your own application. The latter sounds more fun. In this piece, I am going to show you how you can do just this.

How to build a Horoscope App using Aztro API?


<Lead>

If you were a car enthusiast like me, you would have often found yourself searching for different cars, their make, model, etc. Instead of searching for a particular car, we can build an application to see all the car details.

</Lead>

So today, I am building a car data pp that will provide you with different car details depending on their make and model. So without any further ado, let’s jump in!

## Stack

We need to choose a stack first to build this application. I have decided to go with the [Jamstack](https://jamstack.org/).

I am going to use [Next.js](https://nextjs.org/) for the frontend and [TailwindCSS](https://tailwindcss.com/) for the styling.

If you don’t know about Next.js, it is a JavaScript framework built on top of React and provides features like server-side rendering, static site generation, etc. Tailwind is a CSS framework that provides utility classes to speed up the development process.

## Choosing The API

Let’s find an API that we can use to find the data of cars. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already and then search for “car data apis” in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

You will see different search results related to car data APIs. For this piece, I am using [Car Data API](https://rapidapi.com/principalapis/api/car-data?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).

To use this API, you need to subscribe to it first. You can do this by clicking on **Subscribe to Test** button.

![Subscribe to Car Data App](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/6a0d3c1e542809cfb1aee26671f8d9b6c8fe9cac/guides/posts/build-car-data-app/images/subscribe.png)

Once you click the button, you will be redirected to another page where different available subscription packages will be shown. Let’s go with the free one for now.

After all this, you will be redirected back to the original page. Here you will have a key `x-rapidapi-key`. Save it. It will be used later in the application.

## Building The UI

You can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal. So let’s do that.

```sh
npx create-next-app -e with-tailwindcss car-data-app
```

This command is going to take a minute to set everything up. After generating the boilerplate, you will see a folder with the name `car-data-app` has been created. Open this folder in your preferred code editor. I will use [VSCode](https://code.visualstudio.com/) for this project.

### Project Files

When you open the project in your code editor, you will see the following directories and files in the root directory:

-   `pages` directory: Inside it, you will have files `index.js`, `_app.js`, and another directory called - - `api`. You only need to know about the `index.js` file that is the main entry point in your project.
-   `public` directory: This directory contains icons. You place your static files here to load later in the application.
-   `node_modules`: It’s another directory that contains all the node modules you are using in your application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.

Before we move on to writing the code, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/car-data-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are some TailwindCSS configurations I have done specifically for this project. I have added some colors that you do not have by default with TailwindCSS and set some screen sizes.

Now let’s start writing the code. I am going to do it in steps so you can follow along.

### → STEP #1

Open the `pages/index.js` file and remove all the existing code. After this, copy-paste the following code there:

```jsx
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Car <span className="text-secondary">Data</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Get Different Car Information
			</h3>
		</div>
	);
}
```

It will create two headings for you with the text Car Data App” and “Get Different Car Information”. You can change it to anything you prefer.

### → STEP #2

Now let’s create input fields and a search button. The user will be able to provide the make and model of a car using the input fields and the search button can get them the details.

For this, copy the following code and paste it in `pages/index.js`:

```jsx
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Car <span className="text-secondary">Data</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Get Different Car Information
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<form className="flex w-full justify-center md:flex-col md:w-5/6">
					<input
						type="text"
						className="border-none outline-none w-1/5 bg-primary px-4 py-2 mx-2 rounded-sm font-raleway md:w-full md:my-2"
						placeholder="Make..."
					/>
					<input
						type="text"
						className="border-none outline-none w-1/5 bg-primary px-4 py-2 mx-2 rounded-sm font-raleway md:w-full md:my-2"
						placeholder="Model..."
					/>
					<button className="outline-none border border-active font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-secondary text-bc transition duration-300 hover:bg-bc hover:text-primary md:ml-0 md:mt-4">
						Search
					</button>
				</form>
			</div>
		</div>
	);
}
```

This code is going to create two input fields and a button. I have also styled them a little bit using [TailwindCSS](https://tailwindcss.com/).

### → STEP #3

Let’s create some states to store the provided data and the car details we will receive from the API. For this, copy-paste the following code in `pages/index.js`.

```jsx
import {useState} from 'react';

export default function Home() {
	const [make, setMake] = useState('');
	const [model, setModel] = useState('');
	const [res, setRes] = useState();

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Car <span className="text-secondary">Data</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Get Different Car Information
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<form className="flex w-full justify-center md:flex-col md:w-5/6">
					<input
						type="text"
						className="border-none outline-none w-1/5 bg-primary px-4 py-2 mx-2 rounded-sm font-raleway md:w-full md:my-2"
						placeholder="Make..."
						onChange={e => setMake(e.target.value)}
					/>
					<input
						type="text"
						className="border-none outline-none w-1/5 bg-primary px-4 py-2 mx-2 rounded-sm font-raleway md:w-full md:my-2"
						placeholder="Model..."
						onChange={e => setModel(e.target.value)}
					/>
					<button className="outline-none border border-active font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-secondary text-bc transition duration-300 hover:bg-bc hover:text-primary md:ml-0 md:mt-4">
						Search
					</button>
				</form>
			</div>
		</div>
	);
}
```

You can see that I have added an `onChange` event handler to set the state value as soon as the user types in the input fields.

### → STEP #4

Let’s integrate the API now. For this, first, create a `.env.local` file and paste the following in it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY
```

You need to replace `YOUR-RAPIDAPI-KEY` here with the API key you got when you subscribed to the [Car Data API](https://rapidapi.com/principalapis/api/car-data?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel). It is the value of `x-rapidapi-key` that you saved earlier.

Now download and add `axios` in your project. For this, run the following command in the terminal:

```sh
npm install axios
```

Now import `axios` at the top of the `pages/index.js`.

```js
import axios from ‘axios’;
```

### → STEP #5

RapidAPI Hub provides you with code snippets in different languages for integrating the API. I am going to use the `(JavaScript) Axios` one.

![API Endpoints and (JavaScript) Axios Snippet](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/5e204c20a282c42de8cc6939ee7aa62e24049955/guides/posts/build-car-data-app/images/code-snippet.png)

Now create a file with the name `info.js` inside the `pages/api` directory. It is going to create a REST API endpoint for you. The endpoint point will look like this:

```sh
http://localhost:3000/api/info
```

Now copy the following code in this file:

```js
import axios from 'axios';

export default async function handler(req, res) {
	if (req.method === 'GET') {
		const make = req.query.make || '';
		const model = req.query.model || '';

		const options = {
			method: 'GET',
			url: 'https://car-data.p.rapidapi.com/cars',
			params: {
				limit: '50',
				page: '0',
				make: make,
				model: model
			},
			headers: {
				'x-rapidapi-host': 'car-data.p.rapidapi.com',
				'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
			}
		};

		axios
			.request(options)
			.then(function (response) {
				res.status(200).json(response.data);
			})
			.catch(function (error) {
				console.error(error);
			});
	} else {
		res.status(400);
	}
}
```

This code makes an API call to the [Car Data API](https://rapidapi.com/principalapis/api/car-data?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) on the server and returns the results to the user. It executes when the user makes an API call to the `info` endpoint I mentioned above.

Once you are done, copy the following code in the `pages/index.js` file:

```jsx
import {useState} from 'react';
import axios from 'axios';

export default function Home({data}) {
	const [make, setMake] = useState('');
	const [model, setModel] = useState('');
	const [res, setRes] = useState(data);

	/**
	 *
	 *
	 * Fetch car details
	 */
	const fetchCarDetails = async e => {
		e.preventDefault();
		try {
			const res = await axios.get(`/api/info`, {
				params: {
					make,
					model
				}
			});
			setRes(res.data);
		} catch (err) {
			console.log(err);
		}
	};

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Car <span className="text-secondary">Data</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Get Different Car Information
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<form className="flex w-full justify-center md:flex-col md:w-5/6">
					<input
						type="text"
						className="border-none outline-none w-1/5 bg-primary px-4 py-2 mx-2 rounded-sm font-raleway md:w-full md:my-2"
						placeholder="Make..."
						onChange={e => setMake(e.target.value)}
					/>
					<input
						type="text"
						className="border-none outline-none w-1/5 bg-primary px-4 py-2 mx-2 rounded-sm font-raleway md:w-full md:my-2"
						placeholder="Model..."
						onChange={e => setModel(e.target.value)}
					/>
					<button
						className="outline-none border border-active font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-secondary text-bc transition duration-300 hover:bg-bc hover:text-primary md:ml-0 md:mt-4"
						onClick={e => fetchCarDetails(e)}
					>
						Search
					</button>
				</form>

				<div className="flex flex-col text-primary text-sm text-raleway mt-12 w-4/6 h-4/5  md:flex-col md:w-4/6 md:h-full md:mb-12">
					<table className="bg-white w-full text-primary mb-8 md:text-sm md:mx-2">
						<thead className="font-raleway uppercase tracking-wide text-secondary">
							<tr>
								<th className="border border-x-0 text-left px-4 py-4">
									<span className="text-danger">Year</span>
								</th>
								<th className="border border-x-0 text-left px-4 py-4">
									<span className="text-danger">Type</span>
								</th>
								<th className="border border-x-0 text-left px-4 py-4">
									<span className="text-danger">Make</span>
								</th>
								<th className="border border-x-0 text-left px-4 py-4">
									<span className="text-danger">Model</span>
								</th>
							</tr>
						</thead>
						<tbody className="text-primary">
							{res.map(info => (
								<tr>
									<th className="border border-x-0 border-secondary text-left px-4 py-4">
										<span className="text-danger">
											{info.year}
										</span>
									</th>
									<th className="border border-x-0 border-secondary text-left px-4 py-4">
										<span className="text-danger">
											{info.type}
										</span>
									</th>
									<th className="border border-x-0 border-secondary text-left px-4 py-4">
										<span className="text-danger">
											{info.make}
										</span>
									</th>
									<th className="border border-x-0 border-secondary text-left px-4 py-4">
										<span className="text-danger">
											{info.model}
										</span>
									</th>
								</tr>
							))}
						</tbody>
					</table>
				</div>
			</div>
			<div className="flex flex-col mt-10 justify-end h-36 md:h-24">
				<p className="block mb-10 text-center text-secondary text-xs">
					Made by RapidAPI DevRel Team -{' '}
					<a
						className="hover:text-active"
						href="https://github.com/RapidAPI/DevRel-Examples-External"
					>
						See more examples like this
					</a>
				</p>
			</div>
		</div>
	);
}

export async function getServerSideProps() {
	const res = await axios.get('http://localhost:3000/api/info');
	const {data} = res;

	if (!data) {
		return {
			notFound: true
		};
	}

	return {
		props: {
			data
		}
	};
}
```

I am using the Next.js `getServerSideProps` function to fetch the data from the server. It will make my application server-side, and the user will never see a loading state. You can also use `getStaticProps` instead of `getServerSideProps`, and the application will then fetch the data at build time.

I have created a `fetchCarDetails` function that makes an API call when the user clicks on the `search` button.

## Wrap Up

That’s it. We have successfully built a [Car Data App](https://rapidapi-example-car-data-app.vercel.app/) using [Car Data API](https://rapidapi.com/principalapis/api/car-data?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel). You can find the source code of this web app [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/car-data-app).

In the end, it will look something like this:

![Car Data App built with Next.js using Car Data API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/5e204c20a282c42de8cc6939ee7aa62e24049955/guides/posts/build-car-data-app/images/cover.png)


If you were a car enthusiast like me, you would have often found yourself searching for different cars, their make, model, etc. Instead of searching for a particular car, we can build an application to see all the car details. Let's do just this in this piece.

How to build a Car Data app using Car Data API?


<Lead>

Today, public APIs provide a fast and convenient way to develop an application. Whether a small tool-based application or a big eCommerce portal, these APIs can be very serviceable.

</Lead>

[RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) lets you choose from thousands of these public APIs for use in your projects. You can explore thousands of these on [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and select one for your next project.

Today, we will be building a web application that will allow users to look up web domains and check their availability. We have APIs that provide information about all the domains on the internet. Let's build the app using one of these APIs.

## Stack

The stack for our app is going to be as follows. I am going to use [Next.js](https://nextjs.org/) for the client-side of our app and [TailwindCSS](https://tailwindcss.com/) for styling it.

Even if you don’t know about Next.js, being familiar with React will be enough for this guide. Tailwind is a CSS framework that provides utility classes to use directly in the markup, saving time during the development process.

## Choosing The API

Let’s find the API first. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already. Then, search for "Domains" in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

You will see that we have a lot of options for Domain-related APIs. For our app, I am going to use the [NameAuditor WHOIS API](https://rapidapi.com/nameauditor/api/nameauditor-whois-check/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).

To use this API, you need to subscribe to it first. You can do this by clicking on the **Subscribe to Test** button.

![Subscribe to NameAuditor WHOIS API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-domain-app/images/subscribe.png)

Once you click the button, you will be redirected to the pricing page, which will show the subscription packages for the API. The free plan allows up to 500 requests per month. We are going to subscribe to the free plan for this guide.

Once subscribed, you will be back on the **Endpoints** page. In the central section, you should see a field named `x-rapidapi-key`. Save its value. We will need it later to call the API.

## Building The UI

We can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal.

```sh
npx create-next-app -e with-tailwindcss domain-app
```

It will take some time to install the packages. After generating the boilerplate, you will see a folder with the name `domain-app` has been created. Open this folder in your preferred code editor.

### Project Files

In our project folder, we will have the following folders and files. I will briefly break them down for you:

-   `pages` directory: It has the `index.js` file, which is the entry point of our app, basically the home page. It also has`_app.js` and another directory named `api`, where we will store the requests to our API.
-   `public` directory: It holds assets. You can place your static files here to load later in the application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.

I will be using a particular set of colors for this app. You can use colors of your preference, but if you are interested in mine, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/domain-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are Tailwind configurations for the colors I will be using.

Our initial UI should look like this.

![Preview of Our App](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-domain-app/images/preview.png)

With all that set, it's time to code the app. Let's jump right into it.

### → STEP #1

Open the `pages/index.js` file and remove all the existing code. Let's add the layout.

```jsx
export default function Home() {
	return (
		<div className="flex flex-col md:px-12 px-0 relative bg-background font-open-sans items-center text-center min-h-screen">
			<h1 className="text-6xl text-active font-bold font-active mt-10">
				Domain Search
			</h1>
			<h2 className="text-primary text-2xl mt-6">
				Check availability and information of any domain.
			</h2>
		</div>
	);
}
```

I added the following to `pages/_app.js`.

```jsx
import Head from 'next/head';
import 'tailwindcss/tailwind.css';

function MyApp({Component, pageProps}) {
	return (
		<>
			<Head>
				<title>RapidAPI Devrel Example - Domain App</title>
				<link rel="icon" href="/favicon.ico" />
				<link
					href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"
					rel="stylesheet"
				/>
			</Head>
			<Component {...pageProps} />
		</>
	);
}

export default MyApp;
```

### → STEP #2

As you can see in the UI preview, we require a form to submit the domain keyword. The form will have an input field where the query keyword will go, followed by a submit button. Let's add these.

```jsx
export default function Home() {
	return (
		<div className="flex flex-col md:px-12 px-0 relative bg-background font-open-sans items-center text-center min-h-screen">
			<h1 className="text-6xl text-active font-bold font-active mt-10">
				Domain Search
			</h1>
			<h2 className="text-primary text-2xl mt-6">
				Check availability and information of any domain.
			</h2>
			<form className="sm:mx-auto mt-20 justify-center sm:w-full flex flex-col sm:flex-row">
				<input
					type="text"
					className="flex w-full sm:w-1/3 rounded-sm px-5 py-3 text-base text-background font-semibold focus:outline-none focus:ring-2 focus:ring-active"
					placeholder="Enter your keyword"
				/>
				<div className="mt-4 sm:mt-0 sm:ml-3">
					<button
						className="block w-full rounded-sm px-5 py-3 bg-active text-base text-primary font-bold hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-primary sm:px-10"
						type="submit"
					>
						Search
					</button>
				</div>
			</form>
		</div>
	);
}
```

This code will create the input field and submit button. I have also styled and made them responsive using [TailwindCSS](<(https://tailwindcss.com/)>).

### → STEP #3

Now, we need to store the user input in the input field. We can do it using React `useState` hook. We will use two states; `keyword` for storing the input domain keyword and `response` to keep the API Response.

```jsx
import {useState} from 'react';

export default function Home() {
	const [keyword, setKeyword] = useState(null);
	const [response, setResponse] = useState(null);

	return (
		<div className="flex flex-col md:px-12 px-0 relative bg-background font-open-sans items-center text-center min-h-screen">
			<h1 className="text-6xl text-active font-bold font-active mt-10">
				Domain Search
			</h1>
			<h2 className="text-primary text-2xl mt-6">
				Check availability and information of any domain.
			</h2>
			<form className="sm:mx-auto mt-20 justify-center sm:w-full flex flex-col sm:flex-row">
				<input
					type="text"
					className="flex w-full sm:w-1/3 rounded-sm px-5 py-3 text-base text-background font-semibold focus:outline-none focus:ring-2 focus:ring-active"
					placeholder="Enter your keyword"
					onChange={e => {
						setKeyword(e.target.value); // Store input in the keyword state
						setResponse(null); // Set the previous response(if any) to null
					}}
				/>
				<div className="mt-4 sm:mt-0 sm:ml-3">
					<button
						className="block w-full rounded-sm px-5 py-3 bg-active text-base text-primary font-bold hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-primary sm:px-10"
						type="submit"
					>
						Search
					</button>
				</div>
			</form>
		</div>
	);
}
```

The `onChange` handler on the input field will store the user input in our `keyword` state.

### → STEP #4

Let’s integrate the API now. For this, first, create a `.env.local` file in the root directory of your project and paste the following into it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY
```

Remember the `x-rapidapi-key` I asked you to save earlier? You need to replace `YOUR-RAPIDAPI-KEY` with its value. You get the key after subscribing to the [NameAuditor WHOIS API](https://rapidapi.com/nameauditor/api/nameauditor-whois-check/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).

Now download and add `axios` to your project. For this, run the following command in the terminal:

```sh
npm install axios
```

And import `axios` in `pages/index.js`.

```jsx
import axios from ‘axios’;
```

### → STEP #5

The NameAuditor WHOIS API provides two endpoints. We need the `whois` endpoint to get domain-related information. You can see these endpoints on the left pane.

![API Endpoints and (JavaScript) Axios Snippet](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-domain-app/images/code-snippet.png)

For easy integration, [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) automatically generates snippets in multiple languages and options. We are going to copy the `(JavaScript) Axios` ones, as you can see above.

Let's set up the API call now. In the `pages/api` directory, create a file `search.js` and use the code snippet as follows:

```jsx
import axios from 'axios';

export default async function handler(req, res) {
	const options = {
		method: 'GET',
		url: `https://nameauditor-whois-check.p.rapidapi.com/whois/${req.query.keyword}`,
		headers: {
			'x-rapidapi-host': 'nameauditor-whois-check.p.rapidapi.com',
			'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
		}
	};

	axios
		.request(options)
		.then(function (response) {
			res.status(200).json(response.data);
		})
		.catch(function (error) {
			res.status(500).json(error.response.data.payload);
		});
}
```

We have specified the parameter `req.query.keyword`. `req.query` is an object that holds the input parameters coming from our client-side. Our API call is ready.

Now we need to create a function, say `getDomainInfo` in the `pages/index.js` file to send a request to our API `http://localhost:3000/api/search`. We want this function to be triggered using the search button or enter key. Let's make these changes to the index file.

```jsx
import axios from 'axios';
import {useState} from 'react';

export default function Home() {
	const [keyword, setKeyword] = useState(null);
	const [response, setResponse] = useState(null);
	/**
	 * Fetches domain information for an input keyword
	 */
	const getDomainInfo = async () => {
		try {
			const res = await axios.get('api/search/', {
				params: {keyword}
			});
			const {data} = res;
			setResponse(data); // Store the response
		} catch (error) {
			console.log(error);
		}
	};

	return (
		<div className="flex flex-col md:px-12 px-0 relative bg-background font-open-sans items-center text-center min-h-screen">
			<h1 className="text-6xl text-active font-bold font-active mt-10">
				Domain Search
			</h1>
			<h2 className="text-primary text-2xl mt-6">
				Check availability and information of any domain.
			</h2>
			<form
				className="sm:mx-auto mt-20 justify-center sm:w-full flex flex-col sm:flex-row"
				onSubmit={e => {
					getDomainInfo();
					e.preventDefault(); // Prevent reloading on submit
					e.stopPropagation();
				}}
			>
				<input
					type="text"
					className="flex w-full sm:w-1/3 rounded-sm px-5 py-3 text-base text-background font-semibold focus:outline-none focus:ring-2 focus:ring-active"
					placeholder="Enter your keyword"
					onChange={e => {
						setKeyword(e.target.value);
						setResponse(null);
					}}
				/>
				<div className="mt-4 sm:mt-0 sm:ml-3">
					<button
						className="block w-full rounded-sm px-5 py-3 bg-active text-base text-primary font-bold hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-primary sm:px-10"
						type="submit"
					>
						Search
					</button>
				</div>
			</form>
		</div>
	);
}
```

We are storing the API Response in the `response` state.

### → FINAL STEP

In the final step, we will display the results. You can use the **Test Endpoint** button on the [RapidAPI Hub page](https://rapidapi.com/nameauditor/api/nameauditor-whois-check/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) of the API to see the shape of the response. In our case, an example response looks like this:

![Example Response](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-domain-app/images/example.png)

We are going to traverse the `payload` object in the response, and show the details in a table. Finally, I also implemented loading and error states. Here is the final code of our app:

```jsx
import axios from 'axios';
import {useState} from 'react';

export default function Home() {
	const [keyword, setKeyword] = useState(null);
	const [response, setResponse] = useState(null);
	const [errorInfo, setErrorInfo] = useState(false);
	const [loading, setLoading] = useState(false);

	const getDomainInfo = async () => {
		try {
			setLoading(true);
			const res = await axios.get('api/search/', {
				params: {keyword}
			});
			const {data} = res;
			setLoading(false);
			setResponse(data);
		} catch (error) {
			setLoading(false);
			setErrorInfo(error.response.data);
		}
	};

	return (
		<div className="flex flex-col md:px-12 px-0 relative bg-background font-open-sans items-center text-center min-h-screen">
			<h1 className="text-6xl text-active font-bold font-active mt-10">
				Domain Search
			</h1>
			<h2 className="text-primary text-2xl mt-6">
				Check availability and information of any domain.
			</h2>

			<form
				className="sm:mx-auto mt-20 justify-center sm:w-full flex flex-col sm:flex-row"
				onSubmit={e => {
					getDomainInfo();
					e.preventDefault();
					e.stopPropagation();
				}}
			>
				<input
					type="text"
					className="flex w-full sm:w-1/3 rounded-sm px-5 py-3 text-base text-background font-semibold focus:outline-none focus:ring-2 focus:ring-active"
					placeholder="Enter your keyword"
					onChange={e => {
						setKeyword(e.target.value);
						setResponse(null);
						setErrorInfo(null);
					}}
				/>
				<div className="mt-4 sm:mt-0 sm:ml-3">
					<button
						className="block w-full rounded-sm px-5 py-3 bg-active text-base text-primary font-bold hover:opacity-80 focus:outline-none focus:ring-2 focus:ring-primary sm:px-10"
						type="submit"
					>
						{loading ? <>Loading..</> : <>Search</>}
					</button>
				</div>
			</form>
			{errorInfo && (
				<div className="mt-10 max-w-3xl w-full">
					<h3 className="text-danger text-center text-xl">
						Error: {errorInfo}
					</h3>
				</div>
			)}
			{response && (
				<div className="mt-10 max-w-3xl w-full">
					<h3 className="text-primary text-center text-xl">
						The domain {keyword} is{' '}
						{response.payload.availability === 'available' ? (
							<span className="text-active">available</span>
						) : (
							<span className="text-danger">not available</span>
						)}
					</h3>
					{
						// If domain is already registered, show its details
						response.payload.availability !== 'available' && (
							<div>
								<h3 className="mt-10 text-primary text-xl">
									Details:
								</h3>
								<table className="w-full text-primary font-semibold mt-2 md:text-sm">
									<tbody className="bg-primary rounded-sm divide-y text-background overflow-x-scroll">
										<tr>
											<td className="px-4 py-4">
												Domain
											</td>
											<td className="border-l px-4 py-4">
												{response.payload.full}
											</td>
										</tr>
										<tr>
											<td className="px-4 py-4">
												Status
											</td>
											<td className="border-l px-4 py-4 capitalize">
												{response.payload.availability}
											</td>
										</tr>
										<tr>
											<td className="px-4 py-4">
												Registrant
											</td>
											<td className="border-l px-4 py-4">
												{
													response.payload
														.registrar_name
												}
											</td>
										</tr>
										<tr>
											<td className="px-4 py-4">
												Created On
											</td>
											<td className="border-l px-4 py-4">
												{new Date(
													response.payload.creation_date // Converting to dd/mm/yyyy format
												).toLocaleDateString()}
											</td>
										</tr>
										<tr>
											<td className="px-4 py-4">
												Expires After
											</td>
											<td className="border-l px-4 py-4">
												{
													response.payload
														.time_to_expire
												}
											</td>
										</tr>
										<tr>
											<td className="px-4 py-4">
												Updated
											</td>
											<td className="border-l px-4 py-4">
												{
													response.payload
														.time_since_last_update
												}{' '}
												ago
											</td>
										</tr>
									</tbody>
								</table>
							</div>
						)
					}
				</div>
			)}
		</div>
	);
}
```

This is what our app looks like in its final form:

![Domain App built using NameAuditor WHOIS API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-domain-app/images/domain-app.png)

## Wrap Up

All done. Our [Domain Search App](https://rapidapi-example-domain-app.vercel.app/) is ready. Find the code of this web app [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/domain-app).


Let's see how we can build a domain search app using an API from RapidAPI Hub.

How to build a Domain App using a WHOIS API and Next.js?


<Lead>

Today, I am building a quotation application that will provide you with different quotes to make you stay motivated. So without any further ado, let’s jump in!

</Lead>

For this, I am going to use an API from [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel). It provides you with thousands of these public APIs that you can use in your apps. Many APIs on RapidAPI Hub have free versions available, but you can also buy a premium version if the free version does not satisfy your need.

## Stack

We need to choose a stack first to build this application. I have decided to go with the [Jamstack](https://jamstack.org/).

I am going to use [Next.js](https://nextjs.org/) for the frontend and [TailwindCSS](https://tailwindcss.com/) for the styling.

If you don’t know about Next.js, it is a JavaScript framework built on top of React and provides features like server-side rendering, static site generation, etc. Tailwind is a CSS framework that provides utility classes to speed up the development process.

## Choosing The API

Let’s find an API that we can use to some good quote. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already and then search for “quotes apis” in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

You will see different search results related to quotes APIs. For this piece, I am using [Famous Quotes API](https://RapidAPI.com/saicoder/api/famous-quotes4?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel).

To use this API, you need to subscribe to it first. You can do this by clicking on **Subscribe to Test** button.

![Subscribe To The Famous Quote API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/ba55ebf9b88a1a0f5b417b615bcd6946b0a7eb0d/guides/posts/build-quote-app/images/subscribe.png)

Once you click the button, you will be redirected to another page where different available subscription packages will be shown. Let’s go with the free one for now.

After all this, you will be redirected back to the original page. Here you will have a key `x-rapidapi-key`. Save it. It will be used later in the application.

## Building The UI

You can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal. So let’s do that.

```sh
npx create-next-app -e with-tailwindcss quote-app
```

This command is going to take a minute to set everything up. After generating the boilerplate, you will see a folder with the name `quote-app` has been created. Open this folder in your preferred code editor. I will use [VSCode](https://code.visualstudio.com/) for this project.

### Project Files

When you open the project in your code editor, you will see the following directories and files in the root directory:

-   `pages` directory: Inside it, you will have files `index.js`, `_app.js`, and another directory called `api`. You only need to know about the `index.js` file that is the main entry point in your project.
-   `public` directory: This directory contains icons. You place your static files here to load later in the application.
-   `node_modules`: It’s another directory that contains all the node modules you are using in your application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.

Before we move on to writing the code, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/quote-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are some TailwindCSS configurations I have done specifically for this project. I have added some colors that you do not have by default with TailwindCSS and set some screen sizes.

Now let’s start writing the code. I am going to do it in steps so you can follow along.

### → STEP #1

Open the `pages/index.js` file and remove all the existing code. After this, copy-paste the following code there:

```js
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				<span className="text-active">Quote</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				A Simple App to Get You Motivated
			</h3>
		</div>
	);
}
```

It will create two headings for you with the text “Quote App” and “A Simple App to Get You Motivated”. You can change it to anything you prefer.

### → STEP #2

Now let’s create an area where the quote will be displayed on the screen. Also, we need to create three buttons, two to go back and forth between different quote and one to request more quotes.

For this, copy the following code and paste it in `pages/index.js`:

```js
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				<span className="text-active">Quote</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				A Simple App to Get You Motivated
			</h3>
			<div className="flex flex-col mt-4 w-3/6 h-4/5 md:flex-col md:w-4/6 md:h-full md:mb-12">
				<div className="border border-secondary text-secondary font-raleway mb-12 ">
					<p className="px-4 pt-4 py-2 tracking-wide leading-8">
						Quote
					</p>
					<p className="px-4 pb-4 tracking-wide leading-8 flex justify-end">
						'— Author'
					</p>
				</div>
				<div className="flex justify-center md:flex-col md:items-center">
					<button className="outline-none w-48 border border-active font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-active text-primary transition duration-300 hover:bg-background hover:text-secondary md:ml-0 md:mt-4">
						Previous
					</button>
					<button className="outline-none w-48 border border-active font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-active text-primary transition duration-300 hover:bg-background hover:text-secondary md:ml-0 md:mt-4">
						Next
					</button>
					<button className="outline-none w-48 border border-active font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-active text-primary transition duration-300 hover:bg-background hover:text-secondary md:ml-0 md:mt-4">
						Get More
					</button>
				</div>
			</div>
		</div>
	);
}
```

I am using [TailwindCSS](https://tailwindcss.com/) to add CSS to all these HTML elements.

### → STEP #3

Let’s create some states to store the quotes and the current quote index to go back and forth between all quotes. For this, copy-paste the following code in `pages/index.js`.

```js
import {useState} from 'react';

export default function Home() {
	const [allQuotes, setAllQuotes] = useState([]);
	const [quote, setQuote] = useState(allQuotes[0]);
	const [index, setIndex] = useState(0);

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				<span className="text-active">Quote</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				A Simple App to Get You Motivated
			</h3>
			<div className="flex flex-col mt-4 w-3/6 h-4/5 md:flex-col md:w-4/6 md:h-full md:mb-12">
				<div className="border border-secondary text-secondary font-raleway mb-12 ">
					<p className="px-4 pt-4 py-2 tracking-wide leading-8">
						{quote.text}
					</p>
					<p className="px-4 pb-4 tracking-wide leading-8 flex justify-end">
						{`— ${quote.author}`}
					</p>
				</div>
				<div className="flex justify-center md:flex-col md:items-center">
					<button className="outline-none w-48 border border-active font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-active text-primary transition duration-300 hover:bg-background hover:text-secondary md:ml-0 md:mt-4">
						Previous
					</button>
					<button className="outline-none w-48 border border-active font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-active text-primary transition duration-300 hover:bg-background hover:text-secondary md:ml-0 md:mt-4">
						Next
					</button>
					<button className="outline-none w-48 border border-active font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-active text-primary transition duration-300 hover:bg-background hover:text-secondary md:ml-0 md:mt-4">
						Get More
					</button>
				</div>
			</div>
		</div>
	);
}
```

You can see in the above code snippet that now I am rendering the quote from the `quote` state in the paragraph tag.

### → STEP #4

Let’s integrate the API now. For this, first, create a `.env.local` file and paste the following in it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY
```

You need to replace `YOUR-RAPIDAPI-KEY` here with the API key you got when you subscribed to the [Famous Quotes API](https://RapidAPI.com/saicoder/api/famous-quotes4?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel). It is the value of `x-rapidapi-key` that you saved earlier.

Now download and add `axios` in your project. For this, run the following command in the terminal:

```sh
npm install axios
```

Now import `axios` at the top of the `pages/index.js`.

```js
import axios from ‘axios’;
```

### → STEP #5

RapidAPI Hub provides you with code snippets in different languages for integrating the API. I am going to use the `(JavaScript) Axios` one.

![Fetching data using (JavaScript) Axios](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/ba55ebf9b88a1a0f5b417b615bcd6946b0a7eb0d/guides/posts/build-quote-app/images/code-snippet.png)

Now create a file with `quote.js` inside the `pages/api` directory. It is going to create a REST API endpoint for you. The endpoint point will look like this:

```sh
http://localhost:3000/api/quote
```

Now copy the following code in this file:

```js
import axios from 'axios';

export default async function handler(req, res) {
	if (req.method === 'GET') {
		const options = {
			method: 'GET',
			url: 'https://famous-quotes4.p.rapidapi.com/random',
			params: {category: 'all', count: '10'},
			headers: {
				'x-rapidapi-host': 'famous-quotes4.p.rapidapi.com',
				'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
			}
		};

		axios
			.request(options)
			.then(function (response) {
				res.status(200).json(response.data);
			})
			.catch(function (error) {
				console.error(error);
			});
	} else {
		res.status(400);
	}
}
```

This code makes an API call to the [Famous Quotes API](https://RapidAPI.com/saicoder/api/famous-quotes4?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel) on the server and returns the results to the user. It executes when the user makes an API call to the `quote` endpoint I mentioned above.

Once you are done, copy the following code in the `pages/index.js` file:

```js
import axios from 'axios';
import {useState} from 'react';

export default function Home({data}) {
	const [allQuotes, setAllQuotes] = useState(data);
	const [quote, setQuote] = useState(allQuotes[0]);
	const [index, setIndex] = useState(0);

	/**
	 *
	 *
	 * Show next quotes
	 */
	const nextQoute = () => {
		if (index === 9) {
			return;
		}

		let tempIndex = index;
		tempIndex++;
		setQuote(allQuotes[tempIndex]);
		setIndex(tempIndex);
	};

	/**
	 *
	 *
	 * Show previous quotes
	 */
	const prevQuote = () => {
		if (index === 0) {
			return;
		}

		let tempIndex = index;
		tempIndex--;
		setQuote(allQuotes[tempIndex]);
		setIndex(tempIndex);
	};

	/**
	 *
	 *
	 * fetch quotes
	 */
	const fetchQuotes = async () => {
		try {
			const res = await axios.get('http://localhost:3000/api/quote');
			const {data} = res;
			setAllQuotes(data);
			setQuote(data[0]);
			setIndex(0);
		} catch (err) {
			console.log(err);
		}
	};

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				<span className="text-active">Quote</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				A Simple App to Get You Motivated
			</h3>
			<div className="flex flex-col mt-4 w-3/6 h-4/5 md:flex-col md:w-4/6 md:h-full md:mb-12">
				<div className="border border-secondary text-secondary font-raleway mb-12 ">
					<p className="px-4 pt-4 py-2 tracking-wide leading-8">
						{quote.text}
					</p>
					<p className="px-4 pb-4 tracking-wide leading-8 flex justify-end">
						{`— ${quote.author}`}
					</p>
				</div>
				<div className="flex justify-center md:flex-col md:items-center">
					<button
						className="outline-none w-48 border border-active font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-active text-primary transition duration-300 hover:bg-background hover:text-secondary md:ml-0 md:mt-4"
						onClick={prevQuote}
					>
						Previous
					</button>
					<button
						className="outline-none w-48 border border-active font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-active text-primary transition duration-300 hover:bg-background hover:text-secondary md:ml-0 md:mt-4"
						onClick={nextQoute}
					>
						Next
					</button>
					<button
						className="outline-none w-48 border border-active font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-active text-primary transition duration-300 hover:bg-background hover:text-secondary md:ml-0 md:mt-4"
						onClick={fetchQuotes}
					>
						Get More
					</button>
				</div>
			</div>
			<div className="flex flex-col mt-10 justify-end h-36 md:h-24">
				<p className="block mb-10 text-center text-secondary text-xs">
					Made by RapidAPI DevRel Team -{' '}
					<a
						className="hover:text-active"
						href="https://github.com/RapidAPI/DevRel-Examples-External"
					>
						See more examples like this
					</a>
				</p>
			</div>
		</div>
	);
}

export async function getServerSideProps() {
	const res = await axios.get('http://localhost:3000/api/quote');
	const {data} = res;

	if (!data) {
		return {
			notFound: true
		};
	}

	return {
		props: {
			data
		}
	};
}
```

I am using the Next.js `getServerSideProps` function to fetch the data from the server. It will make my application server-side, and the user will never see a loading state. You can also use getStaticProps instead of getServerSideProps, and the application will then fetch the data at build time.

I have also created three functions, i.e., `nextQuote`, `prevQuote`, to go back and forth between quotes, and `fetchQuotes` to request more quotes. These functions are called when the user clicks on the next, previous, or get more buttons.

## Wrap Up

That’s it. We have successfully built a [Quote App](https://rapidapi-example-quote-app.vercel.app/) using [Famous Quotes API](https://RapidAPI.com/saicoder/api/famous-quotes4?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel). You can find the source code of this web app [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/quote-app).

In the end, it will look something like this:

![Quote App built with Next.js and Famous Quotes API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/ba55ebf9b88a1a0f5b417b615bcd6946b0a7eb0d/guides/posts/build-quote-app/images/cover.png)


In this piece, let's build a quotation application that will provide you with different quotes to make you stay motivated.

How to build a Quote App using Famous Quotes API?


<Lead>

These days APIs can perform most of the features you want to implement in a web application. REST APIs provide you with data; Web APIs let you perform a different function like interacting with the browser, etc. If you build an application that requires data, you can use any public API from the Internet. Here [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) comes into the picture.

</Lead>

[RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) provides you with thousands of these public APIs that you can use in your apps. Many APIs on RapidAPI Hub have free versions available, but you can also buy a premium version if the free version does not satisfy your need.

Today, I am building a Joke application using an API from [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) that will show different jokes to the user. So without any further ado, let’s jump in!

## Stack

We need to choose a stack first to build this application. I have decided to go with the [Jamstack](https://jamstack.org/).

I am going to use [Next.js](https://nextjs.org/) for the frontend and [TailwindCSS](https://tailwindcss.com/) for the styling.

If you don’t know about Next.js, it is a JavaScript framework built on top of React and provides features like server-side rendering, static site generation, etc. Tailwind is a CSS framework that provides utility classes to speed up the development process.

## Choosing The API

Let’s find an API that we can use to some good jokes. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already and then search for “jokes apis” in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

You will see different search results related to jokes APIs. For this piece, I am using [Jokes API by API-Ninjas](https://RapidAPI.com/apininjas/api/jokes-by-api-ninjas?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel).

It is a free API, so you do not need to subscribe to it. However, you will need your RapidAPI key. Go ahead and save the `x-rapidapi-key` so you can use it later.

## Building The UI

You can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal. So let’s do that.

```sh
npx create-next-app -e with-tailwindcss joke-app
```

This command is going to take a minute to set everything up. After generating the boilerplate, you will see a folder with the name `joke-app` has been created. Open this folder in your preferred code editor. I will use [VSCode](https://code.visualstudio.com/) for this project.

### Project Files

When you open the project in your code editor, you will see the following directories and files in the root directory:

-   `pages` directory: Inside it, you will have files `index.js`, `_app.js`, and another directory called `api`. You only need to know about the `index.js` file that is the main entry point in your project.
-   `public` directory: This directory contains icons. You place your static files here to load later in the application.
-   `node_modules`: It’s another directory that contains all the node modules you are using in your application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.

Before we move on to writing the code, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/joke-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are some TailwindCSS configurations I have done specifically for this project. I have added some colors that you do not have by default with TailwindCSS and set some screen sizes.

Now let’s start writing the code. I am going to do it in steps so you can follow along.

### → STEP #1

Open the `pages/index.js` file and remove all the existing code. After this, copy-paste the following code there:

```js
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-secondary pt-20 pb-6 md:text-3xl">
				<span className="text-active">Jokes</span> App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-8 md:text-base md:px-4 md:text-center">
				An App For A Good Laugh
			</h3>
		</div>
	);
}
```

It will create two headings for you with the text “Joke App” and “An App For A Good Laugh”. You can change it to anything you prefer.

### → STEP #2

Now let’s create an area where our joke will be displayed on the screen. Also, we need to create two buttons to go back and forth between different jokes.

For this, copy the following code and paste it in `pages/index.js`:

```js
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-secondary pt-20 pb-6 md:text-3xl">
				<span className="text-active">Jokes</span> App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-8 md:text-base md:px-4 md:text-center">
				An App For A Good Laugh
			</h3>
			<div className="flex flex-col mt-4 w-3/6 h-4/5 md:flex-col md:w-4/6 md:h-full md:mb-12">
				<p className="mb-12 border border-secondary text-secondary font-raleway px-4 py-8 tracking-wide leading-8">
					"Joke"
				</p>
				<div className="flex justify-center md:flex-col md:items-center">
					<button className="outline-none w-48 border border-danger font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-active text-primary transition duration-300 hover:bg-danger hover:text-secondary md:ml-0 md:mt-4">
						Previous
					</button>
					<button className="outline-none w-48 border border-danger font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-active text-primary transition duration-300 hover:bg-danger hover:text-secondary md:ml-0 md:mt-4">
						Next
					</button>
				</div>
			</div>
		</div>
	);
}
```

I am using [TailwindCSS](https://tailwindcss.com/) to add CSS to all these HTML elements.

### → STEP #3

Let’s create some states to store the jokes and the current joke index to go back and forth between all jokes. For this, copy-paste the following code in `pages/index.js`.

```js
import {useState} from 'react';

export default function Home({allJokes}) {
	const [joke, setJoke] = useState(allJokes[0]);
	const [index, setIndex] = useState(0);

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-secondary pt-20 pb-6 md:text-3xl">
				<span className="text-active">Jokes</span> App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-8 md:text-base md:px-4 md:text-center">
				An App For A Good Laugh
			</h3>
			<div className="flex flex-col mt-4 w-3/6 h-4/5 md:flex-col md:w-4/6 md:h-full md:mb-12">
				<p className="mb-12 border border-secondary text-secondary font-raleway px-4 py-8 tracking-wide leading-8">
					{joke.joke}
				</p>
				<div className="flex justify-center md:flex-col md:items-center">
					<button className="outline-none w-48 border border-danger font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-active text-primary transition duration-300 hover:bg-danger hover:text-secondary md:ml-0 md:mt-4">
						Previous
					</button>
					<button
						className="outline-none w-48 border border-danger font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-active text-primary transition duration-300 hover:bg-danger hover:text-secondary md:ml-0 md:mt-4"
						onClick={nextJoke}
					>
						Next
					</button>
				</div>
			</div>
		</div>
	);
}
```

You can see in the above code snippet that now I am rendering the joke from the `joke` state in the paragraph tag.

### → STEP #4

Let’s integrate the API now. For this, first, create a `.env.local` file and paste the following in it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY
```

You need to replace `YOUR-RAPIDAPI-KEY` here with the API key you got when you subscribed to the [Jokes API by API-Ninjas](https://RapidAPI.com/apininjas/api/jokes-by-api-ninjas?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel). It is the value of `x-rapidapi-key` that you saved earlier.

Now download and add `axios` in your project. For this, run the following command in the terminal:

```sh
npm install axios
```

Now import `axios` at the top of the `pages/index.js`.

```js
import axios from ‘axios’;
```

### → STEP #5

RapidAPI Hub provides you with code snippets in different languages for integrating the API. I am going to use the `(JavaScript) Axios` one.

![Fetching data using (JavaScript) Axios](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/ba55ebf9b88a1a0f5b417b615bcd6946b0a7eb0d/guides/posts/build-joke-app/images/code-snippet.png)

Now create a file with `joke.js` inside the `pages/api` directory. It is going to create a REST API endpoint for you. The endpoint point will look like this:

```sh
http://localhost:3000/api/joke
```

Now copy the following code in this file:

```js
import axios from 'axios';

export default async function handler(req, res) {
	if (req.method === 'GET') {
		var options = {
			method: 'GET',
			url: 'https://jokes-by-api-ninjas.p.rapidapi.com/v1/jokes',
			params: {limit: '30'},
			headers: {
				'x-rapidapi-host': 'jokes-by-api-ninjas.p.rapidapi.com',
				'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
			}
		};

		axios
			.request(options)
			.then(function (response) {
				res.status(200).json(response.data);
			})
			.catch(function (error) {
				console.error(error);
			});
	} else {
		res.status(400);
	}
}
```

This code makes an API call to the [Jokes API by API-Ninjas](https://RapidAPI.com/apininjas/api/jokes-by-api-ninjas?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel) on the server and returns the results to the user. It executes when the user makes an API call to the `joke` endpoint I mentioned above.

Once you are done, copy the following code in the `pages/index.js` file:

```js
import axios from 'axios';
import {useState} from 'react';

export default function Home({allJokes}) {
	const [joke, setJoke] = useState(allJokes[0]);
	const [index, setIndex] = useState(0);

	/**
	 *
	 *
	 * Show next joke
	 */
	const nextJoke = () => {
		if (index === 28) {
			return;
		}

		let tempIndex = index;
		tempIndex++;
		setJoke(allJokes[tempIndex]);
		setIndex(tempIndex);
	};

	/**
	 *
	 *
	 * Show previous joke
	 */
	const prevJoke = () => {
		if (index === 0) {
			return;
		}

		let tempIndex = index;
		tempIndex--;
		setJoke(allJokes[tempIndex]);
		setIndex(tempIndex);
	};

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-secondary pt-20 pb-6 md:text-3xl">
				<span className="text-active">Jokes</span> App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-8 md:text-base md:px-4 md:text-center">
				An App For A Good Laugh
			</h3>
			<div className="flex flex-col mt-4 w-3/6 h-4/5 md:flex-col md:w-4/6 md:h-full md:mb-12">
				<p className="mb-12 border border-secondary text-secondary font-raleway px-4 py-8 tracking-wide leading-8">
					{joke.joke}
				</p>
				<div className="flex justify-center md:flex-col md:items-center">
					<button
						className="outline-none w-48 border border-danger font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-active text-primary transition duration-300 hover:bg-danger hover:text-secondary md:ml-0 md:mt-4"
						onClick={prevJoke}
					>
						Previous
					</button>
					<button
						className="outline-none w-48 border border-danger font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-active text-primary transition duration-300 hover:bg-danger hover:text-secondary md:ml-0 md:mt-4"
						onClick={nextJoke}
					>
						Next
					</button>
				</div>
			</div>
			<div className="flex flex-col mt-10 justify-end h-36">
				<p className="block mb-10 text-center text-secondary text-xs">
					Made by RapidAPI DevRel Team -{' '}
					<a
						className="hover:text-active"
						href="https://github.com/RapidAPI/DevRel-Examples-External"
					>
						See more examples like this
					</a>
				</p>
			</div>
		</div>
	);
}

export async function getServerSideProps() {
	const res = await axios.get('http://localhost:3000/api/joke');
	const {data} = res;

	const allJokes = data.slice(1);

	if (!allJokes) {
		return {
			notFound: true
		};
	}

	return {
		props: {
			allJokes
		}
	};
}
```

I am using the Next.js `getServerSideProps` function to fetch the data from the server. It will make my application server-side, and the user will never see a loading state. You can also use `getStaticProps` instead of `getServerSideProps`, and the application will then fetch the data at build time.

I have also created two functions, i.e., `nextJoke` and `prevJoke`, to go back and forth between jokes. These functions are called when the user clicks on the next or previous buttons.

## Wrap Up

That’s it. We have successfully built a [Joke App](https://rapidapi-example-joke-app.vercel.app/) using [Jokes API by API-Ninjas](https://RapidAPI.com/apininjas/api/jokes-by-api-ninjas?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel). You can find the source code of this web app [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/joke-app).

In the end, it will look something like this:

![Joke App built with Next.js and Joke API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/ba55ebf9b88a1a0f5b417b615bcd6946b0a7eb0d/guides/posts/build-joke-app/images/cover.png)


In this piece, I am going to show you how you can  build a joke application that will show different jokes to the user.

How to build a Joke App using JokeAPI?


<Lead>

Today, I am building a public holiday application that will provide you with all the available public holidays in the United States. So without any further ado, let’s jump in!

</Lead>

## Stack

We need to choose a stack first to build this application. I have decided to go with the [Jamstack](https://jamstack.org/).

I am going to use [Next.js](https://nextjs.org/) for the frontend and [TailwindCSS](https://tailwindcss.com/) for the styling.

If you don’t know about Next.js, it is a JavaScript framework built on top of React and provides features like server-side rendering, static site generation, etc. Tailwind is a CSS framework that provides utility classes to speed up the development process.

## Choosing The API

Let’s find an API that we can use to search for public holidays. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already and then search for “holidays” in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

You will see different search results related to holiday APIs. For this piece, I am using [Public Holiday API](https://RapidAPI.com/theapiguy/api/public-holiday/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).

It is a free API, so you do not need to subscribe to it. However, you will need your RapidAPI key. Go ahead and save the `x-rapidapi-key` so you can use it later.

## Building The UI

You can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal. So let’s do that.

```sh
npx create-next-app -e with-tailwindcss public-holiday-app
```

This command is going to take a minute to set everything up. After generating the boilerplate, you will see a folder with the name `public-holiday-app` has been created. Open this folder in your preferred code editor. I will use [VSCode](https://code.visualstudio.com/) for this project.

### Project Files

When you open the project in your code editor, you will see the following directories and files in the root directory:

-   `pages` directory: Inside it, you will have files `index.js`, `_app.js`, and another directory called `api`. You only need to know about the `index.js` file that is the main entry point in your project.
-   `public` directory: This directory contains icons. You place your static files here to load later in the application.
-   `node_modules`: It’s another directory that contains all the node modules you are using in your application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.

Before we move on to writing the code, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/public-holiday-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are some TailwindCSS configurations I have done specifically for this project. I have added some colors that you do not have by default with TailwindCSS and set some screen sizes.

Now let’s start writing the code. I am going to do it in steps so you can follow along.

### → STEP #1

Open the `pages/index.js` file and remove all the existing code. After this, copy-paste the following code there:

```js
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Public <span className="text-active">Holiday</span> App
			</h2>
			<h3 className="text-primary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Take a look at different public holidays of USA
			</h3>
		</div>
	);
}
```

It will create two headings for you with the text “Public Holiday App” and “Take a look at different public holidays in the USA”. You can change it to anything you prefer.

### → STEP #2

Now let’s create a dropdown and a search button. The user will be able to select the year from the dropdown list and use the search button to get the public holidays of that year.

For this, copy the following code and paste it in `pages/index.js`:

```js
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Public <span className="text-active">Holiday</span> App
			</h2>
			<h3 className="text-primary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Take a look at different public holidays of USA
			</h3>
			<div className="flex w-full justify-center md:flex-col md:w-5/6">
				<select
					name="countries"
					autoFocus={true}
					className="outline-none w-2/5 bg-secondary px-4 py-2 rounded-sm font-raleway md:w-full"
				>
					{[
						2021, 2022, 2023, 2024, 2025, 2026, 2027, 2028, 2029,
						2030
					].map(year => {
						return <option value={year}>{year}</option>;
					})}
				</select>
				<button className="outline-none border border-secondary font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-secondary text-primary transition duration-300 hover:bg-light hover:text-black md:ml-0 md:mt-4">
					Search
				</button>
			</div>
		</div>
	);
}
```

This code is going to create a dropdown and button. I have also styled them a little bit using [TailwindCSS](<(https://tailwindcss.com/)>).

### → STEP #3

Let’s create some states to store the year and the holiday information we will receive from the API. For this, copy-paste the following code in `pages/index.js`.

```js
export default function Home() {
	const [year, setYear] = useState(2021);
	const [holidays, setHolidays] = useState(data);

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Public <span className="text-active">Holiday</span> App
			</h2>
			<h3 className="text-primary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Take a look at different public holidays of USA
			</h3>
			<div className="flex w-full justify-center md:flex-col md:w-5/6">
				<select
					name="countries"
					autoFocus={true}
					className="outline-none w-2/5 bg-secondary px-4 py-2 rounded-sm font-raleway md:w-full"
					onChange={e => setYear(e.target.value)}
				>
					{[
						2021, 2022, 2023, 2024, 2025, 2026, 2027, 2028, 2029,
						2030
					].map(year => {
						return <option value={year}>{year}</option>;
					})}
				</select>
				<button className="outline-none border border-secondary font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-secondary text-primary transition duration-300 hover:bg-light hover:text-black md:ml-0 md:mt-4">
					Search
				</button>
			</div>
		</div>
	);
}
```

You can see that I have added an `onChange` event handler to set the state value as soon as the user selects the year.

### → STEP #4

Let’s integrate the API now. For this, first, create a `.env.local` file and paste the following in it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY
```

You need to replace `YOUR-RAPIDAPI-KEY` here with the API key you got when you subscribed to the [Public Holiday API](https://RapidAPI.com/theapiguy/api/public-holiday/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel). It is the value of `x-rapidapi-key` that you saved earlier.

Now download and add `axios` in your project. For this, run the following command in the terminal:

```sh
npm install axios
```

Now import `axios` at the top of the `pages/index.js`.

```js
import axios from ‘axios’;
```

### → STEP #5

RapidAPI Hub provides you with code snippets in different languages for integrating the API. I am going to use the `(JavaScript) Axios` one.

![Fetching data using (JavaScript) Axios](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/1474911ae42073cc6622b4d86d0d1a7290b15b55/guides/posts/build-public-holiday-app/images/code-snippet.png)

Now create a file with the name `holiday.js` inside the `pages/api` directory. It is going to create a REST API endpoint for you. The endpoint point will look like this:

```sh
http://localhost:3000/api/holiday
```

Now copy the following code in this file:

```js
import axios from 'axios';

export default async function handler(req, res) {
	if (req.method === 'GET') {
		const year = req.query.year || 2021;
		const options = {
			method: 'GET',
			url: `https://public-holiday.p.rapidapi.com/${year}/US`,
			headers: {
				'x-rapidapi-host': 'public-holiday.p.rapidapi.com',
				'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
			}
		};

		axios
			.request(options)
			.then(function (response) {
				res.status(200).json(response.data);
			})
			.catch(function (error) {
				console.error(error);
			});
	} else {
		res.status(400);
	}
}
```

This code makes an API call to the [Public Holiday API](https://RapidAPI.com/theapiguy/api/public-holiday/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) on the server and returns the results to the user. It executes when the user makes an API call to the `holiday` endpoint I mentioned above.

I have added a condition in the code that will differentiate whether the API call is made before the website is loaded or afterward.

Once you are done, copy the following code in the `pages/index.js` file:

```js
import {useState} from 'react';
import axios from 'axios';

export default function Home({data}) {
	const [year, setYear] = useState(2021);
	const [holidays, setHolidays] = useState(data);

	/**
	 *
	 *
	 * Fetch US public holidays for a particular year
	 */
	const fetchHolidays = async () => {
		try {
			const res = await axios.get(`/api/holiday`, {
				params: {year}
			});

			setHolidays(res.data);
		} catch (err) {
			console.log(err);
		}
	};

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Public <span className="text-active">Holiday</span> App
			</h2>
			<h3 className="text-primary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Take a look at different public holidays of USA
			</h3>
			<div className="flex w-full justify-center md:flex-col md:w-5/6">
				<select
					name="countries"
					autoFocus={true}
					className="outline-none w-2/5 bg-secondary px-4 py-2 rounded-sm font-raleway md:w-full"
					onChange={e => setYear(e.target.value)}
				>
					{[
						2021, 2022, 2023, 2024, 2025, 2026, 2027, 2028, 2029,
						2030
					].map(year => {
						return <option value={year}>{year}</option>;
					})}
				</select>
				<button
					className="outline-none border border-secondary font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-secondary text-primary transition duration-300 hover:bg-light hover:text-black md:ml-0 md:mt-4"
					onClick={fetchHolidays}
				>
					Search
				</button>
			</div>
			<div className="flex justify-around flex-wrap text-primary font-raleway mt-12 w-4/6 h-4/5  md:flex-col md:w-4/6 md:h-full md:mb-12">
				{holidays.map(holiday => (
					<div
						className="flex items-center flex-col bg-light w-56 h-40 rounded-md mb-12"
						key={holidays.indexOf(holiday)}
					>
						<div className="bg-primary text-background w-full h-24 flex justify-center items-center rounded-md">
							<p>{holiday.localName}</p>
						</div>
						<div className="flex justify-center items-center h-16">
							<p>{holiday.date}</p>
						</div>
					</div>
				))}
			</div>
			<div className="flex flex-col mt-10 justify-center">
				<p className="block mb-10 text-center text-secondary text-xs">
					Made by RapidAPI DevRel Team -{' '}
					<a
						className="hover:text-active"
						href="https://github.com/RapidAPI/DevRel-Examples-External"
					>
						See more examples like this
					</a>
				</p>
			</div>
		</div>
	);
}

export async function getServerSideProps() {
	const res = await axios.get('http://localhost:3000/api/holiday');
	const {data} = res;

	if (!data) {
		return {
			notFound: true
		};
	}

	return {
		props: {
			data
		}
	};
}
```

I am using the Next.js `getServerSideProps` function to fetch the data from the server. It will make my application server-side, and the user will never see a loading state. You can also use `getStaticProps` instead of `getServerSideProps` and the application will then fetch the data at build time.

You can see that I have created a function, `fetchHolidays`, to request the API. I have also created a piece of UI that is rendering on the screen based on the `holidays` state variable’ value.

## Wrap Up

That’s it. We have successfully built an [Public Holiday App](https://rapidapi-example-public-holiday-app.vercel.app/) using [Public Holiday API](https://RapidAPI.com/theapiguy/api/public-holiday/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel). You can find the source code of this web app [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/public-holiday-app).

In the end, it will look something like this:

![Public Holiday Application built with Next.js and Public Holiday API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/1474911ae42073cc6622b4d86d0d1a7290b15b55/guides/posts/build-public-holiday-app/images/cover.png)


In this piece, I am going to show you how you can build a public holiday application using an API from RapidAPI Hub and Next.js.

How to build a Public Holiday App using Public Holiday API?


<Lead>

Sometimes you get a phone number that you are unsure if it is correct. Although many services can validate your number, almost all of them are paid. If you are a developer like me, we can create our application for this.

</Lead>

Today, I am building a phone number validation application to validate any phone number for you. So without any further ado, let’s jump in!

## Stack

We need to choose a stack first to build this application. I have decided to go with the [Jamstack](https://jamstack.org/).

I am going to use [Next.js](https://nextjs.org/) for the frontend and [TailwindCSS](https://tailwindcss.com/) for the styling.

If you don’t know about Next.js, it is a JavaScript framework built on top of React and provides features like server-side rendering, static site generation, etc. Tailwind is a CSS framework that provides utility classes to speed up the development process.

## Choosing The API

Let’s find an API that we can use to validate phone numbers. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already and then search for “phone number validation” in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

You will see different search results related to validation APIs. For this piece, I am using [Phone Validate API](https://rapidapi.com/neutrinoapi/api/phone-validate/?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel).

It is a free API, so you do not need to subscribe to it. However, you will need your RapidAPI key. Go ahead and save the `x-rapidapi-key` so you can use it later.

## Building The UI

You can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal. So let’s do that.

```sh
npx create-next-app -e with-tailwindcss phone-number-validate-app
```

This command is going to take a minute to set everything up. After generating the boilerplate, you will see a folder with the name `phone-number-validate-app` has been created. Open this folder in your preferred code editor. I will use [VSCode](https://code.visualstudio.com/) for this project.

### Project Files

When you open the project in your code editor, you will see the following directories and files in the root directory:

-   `pages` directory: Inside it, you will have files `index.js`, `_app.js`, and another directory called `api`. You only need to know about the `index.js` file that is the main entry point in your project.
-   `public` directory: This directory contains icons. You place your static files here to load later in the application.
-   `node_modules`: It’s another directory that contains all the node modules you are using in your application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.

Before we move on to writing the code, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/phone-number-validate-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are some TailwindCSS configurations I have done specifically for this project. I have added some colors that you do not have by default with TailwindCSS and set some screen sizes.

Now let’s start writing the code. I am going to do it in steps so you can follow along.

### → STEP #1

Open the `pages/index.js` file and remove all the existing code. After this, copy-paste the following code there:

```js
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-5xl text-primary pt-20 pb-6 md:text-3xl">
				Phone Number <span className="text-secondary">Validation</span>{' '}
				App
			</h2>
			<h3 className="text-active text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Check if a Phone Number is valid or not
			</h3>
		</div>
	);
}
```

It will create two headings for you with the text “Phone Number Validation App” and “Check if a Phone Number is valid or not”. You can change it to anything you prefer.

### → STEP #2

Now let’s create an input field and a validate button. The user will be able to type the phone number in the input box and use the validate button to get the validation details.

For this, copy the following code and paste it in `pages/index.js`:

```js
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-5xl text-primary pt-20 pb-6 md:text-3xl">
				Phone Number <span className="text-secondary">Validation</span>{' '}
				App
			</h2>
			<h3 className="text-active text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Check if a Phone Number is valid or not
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<form
					className="flex w-full justify-center md:flex-col md:w-5/6"
					onSubmit={e => fetchValidation(e)}
				>
					<input
						autoFocus={true}
						type="number"
						className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm md:w-full"
						placeholder="Enter the phone number..."
					/>
					<button className="outline-none border border-danger font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-background text-primary transition duration-300 hover:bg-active hover:text-background md:ml-0 md:mt-4">
						Validate
					</button>
				</form>
			</div>
		</div>
	);
}
```

This code is going to create an input field and button. I have also styled them a little bit using [TailwindCSS](<(https://tailwindcss.com/)>).

### → STEP #3

Let’s create some states to store the phone number and the validation details we will receive from the API. For this, copy-paste the following code in `pages/index.js`.

```js
import {useState} from 'react';

export default function Home() {
	const [number, setNumber] = useState('');
	const [res, setRes] = useState(null);

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-5xl text-primary pt-20 pb-6 md:text-3xl">
				Phone Number <span className="text-secondary">Validation</span>{' '}
				App
			</h2>
			<h3 className="text-active text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Check if a Phone Number is valid or not
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<form
					className="flex w-full justify-center md:flex-col md:w-5/6"
					onSubmit={e => fetchValidation(e)}
				>
					<input
						autoFocus={true}
						type="number"
						className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm md:w-full"
						placeholder="Enter the phone number..."
						onChange={e => setNumber(e.target.value)}
					/>
					<button className="outline-none border border-danger font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-background text-primary transition duration-300 hover:bg-active hover:text-background md:ml-0 md:mt-4">
						Validate
					</button>
				</form>
			</div>
		</div>
	);
}
```

You can see that I have added an `onChange` event handler to set the state value as soon as the user types the number.

### → STEP #4

Let’s integrate the API now. For this, first, create a `.env.local` file and paste the following in it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY
```

You need to replace `YOUR-RAPIDAPI-KEY` here with the API key you got when you subscribed to the [Phone Validate API](https://rapidapi.com/neutrinoapi/api/phone-validate/?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel). It is the value of `x-rapidapi-key` that you saved earlier.

Now download and add `axios` in your project. For this, run the following command in the terminal:

```sh
npm install axios
```

Now import `axios` at the top of the `pages/index.js`.

```js
import axios from ‘axios’;
```

### → STEP #5

RapidAPI Hub provides you with code snippets in different languages for integrating the API. I am going to use the `(JavaScript) Axios` one.

![Fetching data using (JavaScript) Axios](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/1474911ae42073cc6622b4d86d0d1a7290b15b55/guides/posts/build-phone-number-validation-app/images/code-snippet.png)

Now create a file with the name `validate.js` inside the `pages/api` directory. It is going to create a REST API endpoint for you. The endpoint point will look like this:

```sh
http://localhost:3000/api/validate
```

Now copy the following code in this file:

```js
import axios from 'axios';

export default async function handler(req, res) {
	if (req.method === 'POST') {
		const options = {
			method: 'POST',
			url: 'https://neutrinoapi-phone-validate.p.rapidapi.com/phone-validate',
			headers: {
				'x-rapidapi-host': 'neutrinoapi-phone-validate.p.rapidapi.com',
				'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
			},
			data: {number: req.body.number}
		};

		axios
			.request(options)
			.then(function (response) {
				res.status(200).json(response.data);
			})
			.catch(function (error) {
				console.error(error);
			});
	} else {
		res.status(400);
	}
}
```

This code makes an API call to the [Phone Validate API](https://rapidapi.com/neutrinoapi/api/phone-validate/?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel) on the server and returns the results to the user. It executes when the user makes an API call to the `validate` endpoint I mentioned above.

Once you are done, copy the following code in the `pages/index.js` file:

```js
import {useState} from 'react';
import axios from 'axios';

export default function Home() {
	const [number, setNumber] = useState('');
	const [res, setRes] = useState(null);

	/**
	 *
	 *
	 * Check if phone number is valid or not
	 */
	const fetchValidation = async e => {
		e.preventDefault();
		try {
			const res = await axios.post(`/api/validate`, {number});
			const {data} = res;
			setRes(data);
		} catch (err) {
			console.log(err);
		}
	};

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-5xl text-primary pt-20 pb-6 md:text-3xl">
				Phone Number <span className="text-secondary">Validation</span>{' '}
				App
			</h2>
			<h3 className="text-active text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Check if a Phone Number is valid or not
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<form
					className="flex w-full justify-center md:flex-col md:w-5/6"
					onSubmit={e => fetchValidation(e)}
				>
					<input
						autoFocus={true}
						type="number"
						className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm md:w-full"
						placeholder="Enter the phone number..."
						onChange={e => setNumber(e.target.value)}
					/>
					<button
						className="outline-none border border-danger font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-background text-primary transition duration-300 hover:bg-active hover:text-background md:ml-0 md:mt-4"
						onClick={fetchValidation}
					>
						Validate
					</button>
				</form>
				{res && (
					<div className="flex flex-col text-primary text-raleway mt-12 w-3/6 h-4/5  md:flex-col md:w-4/6 md:h-full md:mb-12">
						<table className="bg-white w-full text-primary mb-8 md:text-sm md:mx-2">
							<thead className="font-raleway uppercase tracking-wide">
								<tr>
									<th className="border text-left px-4 py-4">
										<span className="text-secondary">
											Information
										</span>
									</th>
									<th className="border text-left px-4 py-4">
										<span className="text-secondary">
											Result
										</span>
									</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td className="border px-4 py-4">Valid</td>
									<td className="border px-4 py-4 capitalize">
										{JSON.stringify(res.valid)}
									</td>
								</tr>
								<tr>
									<td className="border px-4 py-4">
										Country
									</td>
									<td className="border px-4 py-4 capitalize">
										{res.country}
									</td>
								</tr>
								<tr>
									<td className="border px-4 py-4">
										Country Code
									</td>
									<td className="border px-4 py-4">
										{res['country-code3']}
									</td>
								</tr>
								{res['prefix-network'] && (
									<tr>
										<td className="border px-4 py-4">
											Prefix Network
										</td>
										<td className="border px-4 py-4">
											{res['prefix-network']}
										</td>
									</tr>
								)}
								<tr>
									<td className="border px-4 py-4">
										International Number
									</td>
									<td className="border px-4 py-4">
										{res['international-number']}
									</td>
								</tr>
								<tr>
									<td className="border px-4 py-4">
										Local Number
									</td>
									<td className="border px-4 py-4">
										{res['local-number']}
									</td>
								</tr>
								<tr>
									<td className="border px-4 py-4">
										International Calling Code
									</td>
									<td className="border px-4 py-4">
										{res['international-calling-code']}
									</td>
								</tr>
								<tr>
									<td className="border px-4 py-4">Type</td>
									<td className="border px-4 py-4">
										{res.type}
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				)}
			</div>
			{res && (
				<div className="flex flex-col mt-4 justify-center">
					<p className="block mb-10 text-center text-primary text-xs">
						Made by RapidAPI DevRel Team -{' '}
						<a
							className="hover:text-active"
							href="https://github.com/RapidAPI/DevRel-Examples-External"
						>
							See more examples like this
						</a>
					</p>
				</div>
			)}
		</div>
	);
}
```

You can see that I have created a function, `fetchValidation`, to request the API. I have also created a piece of UI that is conditionally rendering on the screen based on the `res` state variable’ value.

## Wrap Up

That’s it. We have successfully built an [Phone Number Validation App](https://rapidapi-example-phone-number-validation-app.vercel.app/) using [Phone Validate API](https://rapidapi.com/neutrinoapi/api/phone-validate/?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel). You can find the source code of this web app [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/phone-number-validate-app).

In the end, it will look something like this:

![Phone Number Validation Application built with Next.js and Phone Validate API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/1474911ae42073cc6622b4d86d0d1a7290b15b55/guides/posts/build-phone-number-validation-app/images/cover.png)


In this piece, I am going to show you how you can build a small phone number validation app using an API from RapidAPI Hub and Next.js.

How to build a Phone Number Validation App using Phone Validate API?

Let's see how we can build a hotel booking app using an API from RapidAPI Hub.

How to build a Hotel App using Hotels API and Next.js?


<Lead>

Today, public APIs provide a fast and convenient way to develop an application. Whether a small tool-based application or a big eCommerce portal, these APIs can be very serviceable.

</Lead>

[RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) lets you choose from thousands of these public APIs for use in your projects. You can explore thousands of these on [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and select one for your next project.

Today, we will be building a web application that will allow users to look up trademarks and check the availability of a trademark keyword. Let's code the app.

## Stack

The stack for our app is going to be as follows. I am going to use [Next.js](https://nextjs.org/) for the client-side of our app and [TailwindCSS](https://tailwindcss.com/) for styling it.

Even if you don’t know about Next.js, being familiar with React will be enough for this guide. Tailwind is a CSS framework that provides utility classes to use directly in the markup, saving time during the development process.

## Choosing The API

Let’s find a trademark API first. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already. Then, search for "Trademark" in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

You will see that we have a lot of options for Trademark-related APIs. For our app, I will use the [USPTO Trademark API](https://rapidapi.com/pentium10/api/uspto-trademark/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).

To use this API, you need to subscribe to it first. You can do this by clicking on the **Subscribe to Test** button.

![Subscribe to Trademark API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-trademark-app/images/subscribe.png)

Once you click the button, you will be redirected to the pricing page, which will show the subscription packages for the API. The free plan allows up to 500 requests per month. We are going to subscribe to the free plan for this guide.

Once subscribed, you will be back on the **Endpoints** page. In the central s,ection, you should see a field named `x-rapidapi-key`. Save its value. We will need it later to call the API.

## Building The UI

We can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal.

```sh
npx create-next-app -e with-tailwindcss trademark-app
```

It will take some time to install the packages. After generating the boilerplate, you will see a folder with the name `trademark-app` has been created. Open this folder in your preferred code editor.

### Project Files

In our project folder, we will have the following folders and files. I will briefly break them down for you:

-   `pages` directory: It has the `index.js` file, which is the entry point of our app, basically the home page. It also has`_app.js` and another directory named `api`, where we will store the requests to our API.
-   `public` directory: It holds assets. You can place your static files here to load later in the application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.

I will be using a particular set of colors for this app. You can use colors of your preference, but if you are interested in mine, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/trademark-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are Tailwind configurations for the colors I will be using.

Our initial UI should look like this.

![Initial UI of Trademark App](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-trademark-app/images/initial-ui.png)

With all that set, it's time to code the app. Let's jump right into it.

### → STEP #1

Open the `pages/index.js` file and remove all the existing code. As you can see in the initial UI, we need an input field, a button and a couple of headings. Let's add these.

```js
export default function Home() {
	return (
		<div className="flex flex-col md:px-12 px-0 relative bg-background font-raleway items-center min-h-screen">
			<h1 className="text-6xl text-active font-bold font-active mt-20">
				Trademark Search
			</h1>
			<h2 className="text-primary text-2xl mt-6">
				Search Trademarks and check the availability of a keyword.
			</h2>

			<div className="sm:mx-auto mt-20 justify-center sm:w-full sm:flex">
				<input
					type="text"
					className="block w-1/3 rounded-sm px-5 py-3 text-base text-background font-semibold focus:outline-none focus:ring-2 focus:ring-active"
					placeholder="Enter your keyword"
				/>

				<div className="mt-4 sm:mt-0 sm:ml-3">
					<button className="block w-full rounded-sm px-5 py-3 bg-active text-base text-background font-bold focus:outline-none focus:ring-2 focus:ring-primary sm:px-10">
						Search
					</button>
				</div>
			</div>
		</div>
	);
}
```

I added the following to `pages/_app.js`.

```js
import Head from 'next/head';
import 'tailwindcss/tailwind.css';

function MyApp({Component, pageProps}) {
	return (
		<>
			<Head>
				<title>RapidAPI Devrel Example - Trademark App</title>
				<link rel="icon" href="/favicon.ico" />
				<link
					href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600;700;800&display=swap"
					rel="stylesheet"
				/>
			</Head>
			<Component {...pageProps} />;
		</>
	);
}

export default MyApp;
```

### → STEP #2

Now, we need to store the user input using the React `useState` hook. We will use `keyword` for storing the input keyword and `response` to keep the API response.

```js
import {useState} from 'react';

export default function Home() {
	const [keyword, setKeyword] = useState(null);
	const [response, setResponse] = useState(null);

	return (
		<div className="flex flex-col md:px-12 px-0 relative bg-background font-raleway items-center min-h-screen">
			<h1 className="text-6xl text-active font-bold font-active mt-20">
				Trademark Search
			</h1>
			<h2 className="text-primary text-2xl mt-6">
				Search Trademarks and check availability of a keyword.
			</h2>

			<div className="sm:mx-auto mt-20 justify-center sm:w-full sm:flex">
				<input
					type="text"
					className="block w-1/3 rounded-sm px-5 py-3 text-base text-background font-semibold focus:outline-none focus:ring-2 focus:ring-active"
					placeholder="Enter your keyword"
					onChange={e => {
						setKeyword(e.target.value);
					}}
				/>

				<div className="mt-4 sm:mt-0 sm:ml-3">
					<button className="block w-full rounded-sm px-5 py-3 bg-active text-base text-background font-bold focus:outline-none focus:ring-2 focus:ring-primary sm:px-10">
						Search
					</button>
				</div>
			</div>
		</div>
	);
}
```

The `onChange` handler on the input field will store the user input in our `keyword` state.

### → STEP #3

Let’s integrate the API now. For this, first, create a `.env.local` file in the root directory of your project and paste the following into it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY
```

Remember the `x-rapidapi-key` I asked you to save earlier? You need to replace `YOUR-RAPIDAPI-KEY` with its value. You get the key after subscribing to the [Trademark API](https://rapidapi.com/pentium10/api/uspto-trademark/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).

Now download and add `axios` to your project. For this, run the following command in the terminal:

```sh
npm install axios
```

And import `axios` in `pages/index.js`.

```js
import axios from ‘axios’;
```

### → STEP #4

The [Trademark API](https://rapidapi.com/pentium10/api/uspto-trademark/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) provides many helpful endpoints, like trademark search, availability, owner lookup, etc. You can see these endpoints on the left pane. For this guide, we will use the `/v1/trademarkSearch` endpoint.

![API Endpoints and (JavaScript) Axios Snippet](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-trademark-app/images/code-snippet.png)

For easy integration, [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) automatically generates snippets in multiple languages and options. We will use the `(JavaScript) Axios` snippet.

Let's set up the API call now. In the `pages/api` directory, create a file `search.js` and use the code snippet as follows:

```js
import axios from 'axios';

export default async function handler(req, res) {
	const options = {
		method: 'GET',
		url: `https://uspto-trademark.p.rapidapi.com/v1/trademarkSearch/${req.query.keyword}/active`,
		headers: {
			'x-rapidapi-host': 'uspto-trademark.p.rapidapi.com',
			'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
		}
	};

	axios
		.request(options)
		.then(function (response) {
			res.status(200).json(response.data);
		})
		.catch(function (error) {
			console.error(error);
		});
}
```

We have specified the parameter `req.query.keyword`. `req.query` is an object that holds the input parameters coming from our client-side. Our API call is ready.

Now we need to create a function, say `getTrademark` in the `pages/index.js` file to send a request to our API `http://localhost:3000/api/search`. This function will be triggered using the search button’s `onClick` handler. Let's make these changes to the index file.

```js
import axios from 'axios';
import {useState} from 'react';

export default function Home() {
	const [keyword, setKeyword] = useState(null);
	const [response, setResponse] = useState(null);

	/*
	 * Make the call to our API to fetch the trademark data.
	 */
	const getTrademark = async () => {
		try {
			const res = await axios.get('api/search/', {
				params: {keyword}
			});
			const {data} = res;
			setResponse(data); // Storing the response in our state.
		} catch (error) {
			console.log(error);
		}
	};

	return (
		<div className="flex flex-col md:px-12 px-0 relative bg-background font-raleway items-center min-h-screen">
			<h1 className="text-6xl text-active font-bold font-active mt-20">
				Trademark Search
			</h1>
			<h2 className="text-primary text-2xl mt-6">
				Search Trademarks and check the availability of a keyword.
			</h2>

			<div className="sm:mx-auto mt-20 justify-center sm:w-full sm:flex">
				<input
					type="text"
					className="block w-1/3 rounded-sm px-5 py-3 text-base text-background font-semibold focus:outline-none focus:ring-2 focus:ring-active"
					placeholder="Enter your keyword"
					onChange={e => {
						setKeyword(e.target.value);
					}}
				/>

				<div className="mt-4 sm:mt-0 sm:ml-3">
					<button
						className="block w-full rounded-sm px-5 py-3 bg-active text-base text-background font-bold focus:outline-none focus:ring-2 focus:ring-primary sm:px-10"
						onClick={() => getTrademark()}
					>
						Search
					</button>
				</div>
			</div>
		</div>
	);
}
```

We are storing the API Response in the `response` state.

### → FINAL STEP

In the final step, we will display the results. You can use the **Test Endpoint** button on the [RapidAPI Hub page](https://rapidapi.com/pentium10/api/uspto-trademark/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) to see the shape of the response.

The API endpoint provides two things:

-   An object with a field `count`.
-   An array of objects with all trademarks related to our keyword.

If the `count` is 0, we will show the keyword to be available. Otherwise, we will display the trademark's details in a table. Here is the final code of our app:

```js
import axios from 'axios';
import {useState} from 'react';

export default function Home() {
	const [keyword, setKeyword] = useState(null);
	const [response, setResponse] = useState(null);

	const getTrademark = async () => {
		try {
			const res = await axios.get('api/search/', {
				params: {keyword}
			});
			const {data} = res;
			setResponse(data);
		} catch (error) {
			console.log(error);
		}
	};

	return (
		<div className="flex flex-col md:px-12 px-0 relative bg-background font-raleway items-center min-h-screen">
			<h1 className="text-6xl text-active font-bold font-active mt-20">
				Trademark Search
			</h1>
			<h2 className="text-primary text-2xl mt-6">
				Search Trademarks and check the availability of a keyword.
			</h2>

			<div className="sm:mx-auto mt-20 justify-center sm:w-full sm:flex">
				<input
					type="text"
					className="block w-1/3 rounded-sm px-5 py-3 text-base text-background font-semibold focus:outline-none focus:ring-2 focus:ring-active"
					placeholder="Enter your keyword"
					onChange={e => {
						setKeyword(e.target.value);
					}}
				/>

				<div className="mt-4 sm:mt-0 sm:ml-3">
					<button
						className="block w-full rounded-sm px-5 py-3 bg-active text-base text-background font-bold focus:outline-none focus:ring-2 focus:ring-primary sm:px-10"
						onClick={() => getTrademark()}
					>
						Search
					</button>
				</div>
			</div>
			{response && (
				<div className="mt-10 max-w-3xl w-full">
					<h3 className="text-primary text-center text-xl">
						The trademark keyword {keyword} is{' '}
						{response.count === 0 && (
							<span className="text-active">available</span>
						)}
						{response.count !== 0 && <span className="text-danger">not available</span>}
					</h3>
					{response.count !== 0 && (
						<div>
							<h3 className="text-primary mt-10 text-base">
								Trademark Details:
							</h3>
							<table className="w-full text-primary font-semibold mt-2 md:text-sm">
								<tbody className="bg-primary rounded-sm divide-y text-background overflow-x-scroll">
									<tr>
										<td className="px-4 py-4">Keyword</td>
										<td className="border-l px-4 py-4">
											{response.items[0].keyword}
										</td>
									</tr>
									<tr>
										<td className="px-4 py-4">Status</td>
										<td className="border-l px-4 py-4 capitalize">
											{response.items[0].status_label}
										</td>
									</tr>
									<tr>
										<td className="px-4 py-4">
											Registration No.
										</td>
										<td className="border-l px-4 py-4">
											{
												response.items[0]
													.registration_number
											}
										</td>
									</tr>
									<tr>
										<td className="px-4 py-4">
											Expiration Date
										</td>
										<td className="border-l px-4 py-4">
											{response.items[0].expiration_date}
										</td>
									</tr>
									<tr>
										<td className="px-4 py-4">Owner</td>
										<td className="border-l px-4 py-4">
											{response.items[0].owners[0].name}
										</td>
									</tr>
								</tbody>
							</table>
						</div>
					)}
				</div>
			)}
		</div>
	);
}
```

This is what our app looks like in its final form:

![Trademark App built with Next.js using USPTO Trademark API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-trademark-app/images/trademark-app.png)

## Wrap Up

All done. Our [trademark searcher](https://rapidapi-example-trademark-app.vercel.app/) is ready. Just like this, you can utilize the remaining endpoints to offer more features in your application. Find the code of this web app [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/trademark-app).


Let's see how to build a trademark search app using an API from RapidAPI Hub.

How to build a Trademark App using Next.js and USPTO Trademark API?


<Lead>

The world has been fighting against COVID-19 since the start of 2020. At that time, there were no vaccines, but fortunately, several companies have developed them. And because of the availability, everyone should get vaccinated as soon as possible.

</Lead>

Today, I am building an application that will provide the COVID-19 vaccine statistics across different countries. So without any further, let’s jump in!

## Stack

We need to choose a stack first to build this application. I have decided to go with the [Jamstack](https://jamstack.org/).

I am going to use [Next.js](https://nextjs.org/) for the client-side and [TailwindCSS](https://tailwindcss.com/) for the styling.

If you don’t know about Next.js, it is a JavaScript framework built on top of React and provides features like server-side rendering, static site generation, etc. Tailwind is a CSS framework that provides utility classes to speed up the development process.

## Choosing The API

Let’s find an API that we can use to fetch the vaccine details. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?tm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already and then search for “covid vaccine” in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

You will see different search results related to all the available APIs that provide this service. For this piece, I am using [Covid 19 World Vaccination Data](https://rapidapi.com/jamesrabels@gmail.com/api/covid-19-world-vaccination-data/?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel).

To use this API, you need to subscribe to it first. You can do this by clicking on **Subscribe to Test** button.

![Subscribe to Covid 19 World Vaccination Data API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/921e2aafdccb1fecf813bb7e92c5c2f2616c0b5f/guides/posts/build-covid-vaccine-stats-app/images/subscribe.png)

Once you click the button, you will be redirected to another page where different available subscription packages will be shown. Let’s go with the free one for now.

After all this, you will be redirected back to the original page. Here you will have a key `x-rapidapi-key`. Save it. It will be used later in the application.

## Building The UI

You can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal. So let’s do that.

```sh
npx create-next-app -e with-tailwindcss covid-vaccine-app
```

This command is going to take a minute to set everything up. After generating the boilerplate, you will see a folder with the name `covid-vaccine-app` has been created. Open this folder in your preferred code editor. I will use [VSCode](https://code.visualstudio.com/) for this project.

### Project Files

When you open the project in your code editor, you will see the following directories and files in the root directory:

-   `pages` directory: Inside it, you will have files `index.js`, `_app.js`, and another directory called `api`. You only need to know about the `index.js` file that is the main entry point in your project.
-   `public` directory: This directory contains icons. You place your static files here to load later in the application.
-   `node_modules`: It’s another directory that contains all the node modules you are using in your application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.
    `readme.md`: It’s a markdown file for documentation.

Before we move on to writing the code, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/covid-vaccine-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are some TailwindCSS configurations I have done specifically for this project. I have added some colors that you do not have by default with TailwindCSS and set some screen sizes.

Now let’s start writing the code. I am going to do it in steps so you can follow along.

### → STEP #1

Open the `pages/index.js` file and remove all the existing code. After this, copy-paste the following code there:

```js
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-secondary pt-20 pb-6 md:text-3xl">
				COVID-19 <span className="text-primary">Vaccine</span> Stats App
			</h2>
			<h3 className="text-lightGrey text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Look up COVID-19 Vaccination Stats Across Different Countries
			</h3>
		</div>
	);
}
```

It will create two headings for you with the text “Time App” and “Get Time-related information according to an area”. You can change it to anything you prefer.

### → STEP #2

Now let’s create a dropdown list and a search button. The user will be able to select the country of their choice from the list and use the search button to get the vaccination details of that country.

For this, create a new folder called `components`. Inside this folder, create a file called `Dropdown.js`. Copy and paste what you will find in [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/covid-vaccine-app/components/Dropdown.js) file in your `Dropdown.js`.

Now copy the following code and paste it in `pages/index.js`:

```js
import Dropdown from '../components/Dropdown';

export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-secondary pt-20 pb-6 md:text-3xl">
				COVID-19 <span className="text-primary">Vaccine</span> Stats App
			</h2>
			<h3 className="text-lightGrey text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Look up COVID-19 Vaccination Stats Across Different Countries
			</h3>
			<div className="flex justify-center items-center mb-8 w-5/6 md:items-center md:flex-col">
				<Dropdown />
				<button className="outline-none border border-secondary font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-secondary text-bc transition duration-300 hover:bg-bc hover:text-black md:ml-0 md:mt-4 md:w-5/6">
					Search
				</button>
			</div>
		</div>
	);
}
```

This code is going to create an input field and button. I have also styled them a little bit using [TailwindCSS](<(https://tailwindcss.com/)>).

### → STEP #3

Let’s create some states to store the country code the user will select and save the response that we will receive from the API. For this, copy-paste the following code in `pages/index.js`.

```js
import {useState} from 'react';
import Dropdown from '../components/Dropdown';

export default function Home() {
	const [countryCode, setCountryCode] = useState('ABW');
	const [res, setRes] = useState(null);

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-secondary pt-20 pb-6 md:text-3xl">
				COVID-19 <span className="text-primary">Vaccine</span> Stats App
			</h2>
			<h3 className="text-lightGrey text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Look up COVID-19 Vaccination Stats Across Different Countries
			</h3>
			<div className="flex justify-center items-center mb-8 w-5/6 md:items-center md:flex-col">
				<Dropdown onChange={setCountryCode} />
				<button className="outline-none border border-secondary font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-secondary text-bc transition duration-300 hover:bg-bc hover:text-black md:ml-0 md:mt-4 md:w-5/6">
					Search
				</button>
			</div>
		</div>
	);
}
```

You can see that I am sending the `setCountryCode` function to the Dropdown component as a prop.

### → STEP #4

Let’s integrate the API now. For this, first, create a `.env.local` file and paste the following in it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR_RAPID_API_KEY
```

You need to replace `YOUR-RAPIDAPI-KEY` here with the API key that I told you to save earlier.

Now download and add `axios` to your project. For this, run the following command in the terminal:

```sh
npm install axios
```

Now import `axios` at the top of the `pages/index.js`.

```js
import axios from ‘axios’;
```

### → STEP #5

We are using the `home` endpoint of the [Covid 19 World Vaccination Data](https://rapidapi.com/jamesrabels@gmail.com/api/covid-19-world-vaccination-data/?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel) to get the vaccination details.

RapidAPI Hub provides you with code snippets in different languages for integrating the API. I am going to use the `(JavaScript) Axios` one.

![Fetching data using (JavaScript) Axios](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/921e2aafdccb1fecf813bb7e92c5c2f2616c0b5f/guides/posts/build-covid-vaccine-stats-app/images/code-snippet.png)

Now create a file with the name `vaccine.js` inside the `pages/api` directory. It is going to create a REST API endpoint for you. The endpoint point will look like this:

```sh
http://localhost:3000/api/vaccine
```

Now copy the following code in this file:

```js
import axios from 'axios';

export default async function handler(req, res) {
	if (req.method === 'GET') {
		if (!req.query.countryCode) {
			const options = {
				method: 'GET',
				url: 'https://covid-19-world-vaccination-data.p.rapidapi.com/',
				params: {iso: 'ABW'},
				headers: {
					'x-rapidapi-host':
						'covid-19-world-vaccination-data.p.rapidapi.com',
					'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
				}
			};

			axios
				.request(options)
				.then(function (response) {
					res.status(200).json(response.data);
				})
				.catch(function (error) {
					console.error(error);
				});
		} else {
			const options = {
				method: 'GET',
				url: 'https://covid-19-world-vaccination-data.p.rapidapi.com/',
				params: {iso: req.query.countryCode},
				headers: {
					'x-rapidapi-host':
						'covid-19-world-vaccination-data.p.rapidapi.com',
					'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
				}
			};

			axios
				.request(options)
				.then(function (response) {
					res.status(200).json(response.data);
				})
				.catch(function (error) {
					console.error(error);
				});
		}
	} else {
		res.status(400);
	}
}
```

This code makes an API call to the [Covid 19 World Vaccination Data](https://rapidapi.com/jamesrabels@gmail.com/api/covid-19-world-vaccination-data/?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel) on the server and returns the results to the user. It executes when the user makes an API call to the `vaccine` endpoint I have mentioned above.

I have added a condition in the code to differentiate whether the API call is made before the website is loaded.

Once you are done, copy the following code in the `pages/index.js` file:

```js
import {useState} from 'react';
import axios from 'axios';
import Dropdown from '../components/Dropdown';

export default function Home({data}) {
	const [countryCode, setCountryCode] = useState('ABW');
	const [res, setRes] = useState(data[data.length - 1]);

	/**
	 *
	 *
	 * Fetch vaccine information of a country
	 */
	const fetchInfo = async () => {
		try {
			const res = await axios.get(`/api/vaccine`, {
				params: {countryCode}
			});

			const {data} = res;
			setRes(data[data.length - 1]);
		} catch (err) {
			console.log(err);
		}
	};

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-secondary pt-20 pb-6 md:text-3xl">
				COVID-19 <span className="text-primary">Vaccine</span> Stats App
			</h2>
			<h3 className="text-lightGrey text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Look up COVID-19 Vaccination Stats Across Different Countries
			</h3>
			<div className="flex justify-center items-center mb-8 w-5/6 md:items-center md:flex-col">
				<Dropdown onChange={setCountryCode} />
				<button
					className="outline-none border border-secondary font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-secondary text-bc transition duration-300 hover:bg-bc hover:text-black md:ml-0 md:mt-4 md:w-5/6"
					onClick={fetchInfo}
				>
					Search
				</button>
			</div>
			<div className="flex flex-col text-raleway mt-6 w-3/6 h-4/5 md:w-5/6 md:h-full md:mb-12">
				<table className="bg-white w-full text-secondary text-lg mb-8 md:text-sm md:mx-2">
					<thead className="font-raleway uppercase tracking-wide">
						<tr>
							<th className="border border-secondary text-primary text-lg font-bold text-left px-4 py-4">
								Information
							</th>
							<th className="border border-secondary text-primary text-lg font-bold text-left px-4 py-4">
								Value
							</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td className="border border-secondary px-4 py-4">
								Country
							</td>
							<td className="border border-secondary px-4 py-4">
								{res.country}
							</td>
						</tr>
						<tr>
							<td className="border border-secondary px-4 py-4">
								Vaccines
							</td>
							<td className="border border-secondary px-4 py-4">
								{res.vaccines}
							</td>
						</tr>
						<tr>
							<td className="border border-secondary px-4 py-4">
								Daily Vaccination Per Million
							</td>
							<td className="border border-secondary px-4 py-4">
								{res.daily_vaccinations_per_million}
							</td>
						</tr>
						<tr>
							<td className="border border-secondary px-4 py-4">
								People Fully Vaccinated
							</td>
							<td className="border border-secondary px-4 py-4">
								{res.people_fully_vaccinated}
							</td>
						</tr>
						<tr>
							<td className="border border-secondary px-4 py-4">
								People Fully Vaccinated Per Hundred
							</td>
							<td className="border border-secondary px-4 py-4">
								{res.people_fully_vaccinated}
							</td>
						</tr>
						<tr>
							<td className="border border-secondary px-4 py-4">
								People Vaccinated
							</td>
							<td className="border border-secondary px-4 py-4">
								{res.people_vaccinated}
							</td>
						</tr>
						<tr>
							<td className="border border-secondary px-4 py-4">
								People Vaccinated Per Hundred
							</td>
							<td className="border border-secondary px-4 py-4">
								{res.people_vaccinated_per_hundred}
							</td>
						</tr>
						<tr>
							<td className="border border-secondary px-4 py-4">
								Total Vaccination
							</td>
							<td className="border border-secondary px-4 py-4">
								{res.total_vaccinations}
							</td>
						</tr>
						<tr>
							<td className="border border-secondary px-4 py-4">
								Total Vaccination Per Hundred
							</td>
							<td className="border border-secondary px-4 py-4">
								{res.total_vaccinations_per_hundred}
							</td>
						</tr>
						<tr>
							<td className="border border-secondary px-4 py-4">
								Source
							</td>
							<td className="border border-secondary px-4 py-4 text-primary underline">
								<a href={res.source_website}>
									{res.source_name}
								</a>
							</td>
						</tr>
					</tbody>
				</table>
				<div className="flex flex-col mt-4 justify-center">
					<p className="block mb-8 text-center text-secondary text-xs">
						Made by RapidAPI DevRel Team -{' '}
						<a
							className="hover:text-primary"
							href="https://github.com/RapidAPI/DevRel-Examples-External"
						>
							See more examples like this
						</a>
					</p>
				</div>
			</div>
		</div>
	);
}

export async function getServerSideProps() {
	const res = await axios.get('http://localhost:3000/api/vaccine');
	const {data} = res;

	if (!data) {
		return {
			notFound: true
		};
	}

	return {
		props: {
			data
		}
	};
}
```

I am using the Next.js `getServerSideProps` function to fetch the data from the server. It will make my application server-side, and the user will never see a loading state. You can also use `getStaticProps` instead of `getServerSideProps`, and the application will then fetch the data at build time.

I have also created a table to display the values that our application will receive from the API.

## Wrap Up

This is it. We have successfully built a [COVID-19 Vaccine Stats App](https://rapidapi-covid-vaccine-stats-app.vercel.app/) using the [Covid 19 World Vaccination Data](https://RapidAPI.com/jamesrabels@gmail.com/api/covid-19-world-vaccination-data/?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel). You can find the code of this web app [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/covid-vaccine-app). It will look something like this:

![COVID Vaccine Stats Application built with Next.js and Covid 19 World Vaccination Data API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/921e2aafdccb1fecf813bb7e92c5c2f2616c0b5f/guides/posts/build-covid-vaccine-stats-app/images/cover.png)


In this piece, I am going to show you how you can build an application that will provide the COVID-19 vaccine statistics across different countries.

How to build a COVID-19 Vaccine Stats App using Covid 19 World Vaccination Data API?


<Lead>

Everyone these days loves animes and watches them a lot. If you are one of them, you would want to have a platform to search for them quickly. For this, instead of looking for one, we can build our own.

</Lead>

So today, I am developing an anime application where you will search for your favorite animes. So without any further ado, let’s jump in.

## Stack

We need to choose a stack first to build this application. I have decided to go with the [Jamstack](https://jamstack.org/).

I am going to use [Next.js](https://nextjs.org/) for the frontend and [TailwindCSS](https://tailwindcss.com/) for the styling.

If you don’t know about Next.js, it is a JavaScript framework built on top of React and provides features like server-side rendering, static site generation, etc. Tailwind is a CSS framework that provides utility classes to speed up the development process.

## Choosing The API

Let’s find an API that we can use to search for anime. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already and then search for “anime” in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

You will see different search results related to anime APIs. For this piece, I am using [Jikan API](https://RapidAPI.com/theapiguy/api/jikan1?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) by [API Guy](https://RapidAPI.com/user/theapiguy?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).

It is a free API, so you do not need to subscribe to it. However, you will need your RapidAPI key. Go ahead and save the `x-rapidapi-key` so you can use it later.

## Building The UI

You can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal. So let’s do that.

```sh
npx create-next-app -e with-tailwindcss anime-app
```

This command is going to take a minute to set everything up. After generating the boilerplate, you will see a folder with the name `anime-app` has been created. Open this folder in your preferred code editor. I will use [VSCode](https://code.visualstudio.com/) for this project.

### Project Files

When you open the project in your code editor, you will see the following directories and files in the root directory:

-   `pages` directory: Inside it, you will have files `index.js`, `_app.js`, and another directory called `api`. You only need to know about the `index.js` file that is the main entry point in your project.
-   `public` directory: This directory contains icons. You place your static files here to load later in the application.
-   `node_modules`: It’s another directory that contains all the node modules you are using in your application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.

Before we move on to writing the code, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/anime-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are some TailwindCSS configurations I have done specifically for this project. I have added some colors that you do not have by default with TailwindCSS and set some screen sizes.

Now create a file called `next.config.js` in the root directory and paste all the content from [here](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/anime-app/next.config.js) to this file. We are doing this because the API will provide us with the image URLs. We will use the Next.js Image component to render the image, and this component needs a domain property in the `next.config.js` file to render an image from a URL.

Now let’s start writing the code. I am going to do it in steps so you can follow along.

### → STEP #1

Open the `pages/index.js` file and remove all the existing code. After this, copy-paste the following code there:

```js
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				<span className="text-active">Anime</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Search and look for your favorite anime
			</h3>
		</div>
	);
}
```

It will create two headings for you with the text “Anime App” and “Search and look for your favorite anime”. You can change it to anything you prefer.

### → STEP #2

Now let’s create an input field and a search button. The user will be able to type in the input field and use the search button to get the anime details.

For this, copy the following code and paste it in `pages/index.js`:

```js
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				<span className="text-active">Anime</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Search and look for your favorite anime
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<form className="flex w-full justify-center md:flex-col md:w-5/6">
					<input
						autoFocus={true}
						type="text"
						className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm font-raleway md:w-full"
						placeholder="Search for your favorite anime..."
					/>
					<button className="outline-none border border-active font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-active text-primary transition duration-300 hover:bg-background hover:text-black md:ml-0 md:mt-4">
						Search
					</button>
				</form>
			</div>
		</div>
	);
}
```

This code is going to create an input field and button. I have also styled them a little bit using [TailwindCSS](<(https://tailwindcss.com/)>).

### → STEP #3

Let’s create some states to store the user input and the anime information we will receive from the API. For this, copy-paste the following code in `pages/index.js`.

```js
import {useState} from 'react';

export default function Home() {
	const [anime, setAnime] = useState('');
	const [searchRes, setSearchRes] = useState(null);

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				<span className="text-active">Anime</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Search and look for your favorite anime
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<form className="flex w-full justify-center md:flex-col md:w-5/6">
					<input
						autoFocus={true}
						type="text"
						className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm font-raleway md:w-full"
						placeholder="Search for your favorite anime..."
						onChange={e => setAnime(e.target.value)}
					/>
					<button className="outline-none border border-active font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-active text-primary transition duration-300 hover:bg-background hover:text-black md:ml-0 md:mt-4">
						Search
					</button>
				</form>
			</div>
		</div>
	);
}
```

You can see that I have added an `onChange` event handler to set the state value as soon as the user writes something in the input field.

### → STEP #4

Let’s integrate the API now. For this, first, create a `.env.local` file and paste the following in it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY
```

You need to replace `YOUR-RAPIDAPI-KEY` here with the API key you got when you subscribed to the [Jikan API](https://RapidAPI.com/theapiguy/api/jikan1?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel). It is the value of `x-rapidapi-key` that you saved earlier.

Now download and add `axios` to your project. For this, run the following command in the terminal:

```sh
npm install axios
```

Now import `axios` at the top of the `pages/index.js`.

```js
import axios from ‘axios’;
```

### → STEP #5

We are using the `Search` endpoint of the [Jikan API](https://RapidAPI.com/theapiguy/api/jikan1?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) to get all anime details.

RapidAPI Hub provides you with code snippets in different languages for integrating the API. I am going to use the `(JavaScript) Axios` one.

![Fetching data using (JavaScript) Axios](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/921e2aafdccb1fecf813bb7e92c5c2f2616c0b5f/guides/posts/build-anime-search-app/images/code-snippet.png)

Now create a file with the name `anime.js` inside the `pages/api` directory. It is going to create a REST API endpoint for you. The endpoint point will look like this:

```sh
http://localhost:3000/api/anime
```

Now copy the following code in this file:

```js
import axios from 'axios';

export default async function handler(req, res) {
	if (req.method === 'GET') {
		const options = {
			method: 'GET',
			url: 'https://jikan1.p.rapidapi.com/search/anime',
			params: {q: req.query.anime},
			headers: {
				'x-rapidapi-host': 'jikan1.p.rapidapi.com',
				'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
			}
		};

		axios
			.request(options)
			.then(function (response) {
				res.status(200).json(response.data);
			})
			.catch(function (error) {
				console.error(error);
			});
	} else {
		res.status(400);
	}
}
```

This code makes an API call to the [Jikan API](https://RapidAPI.com/theapiguy/api/jikan1?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) on the server and returns the results to the user. It executes when the user makes an API call to the `anime` endpoint I mentioned above.

Once you are done, copy the following code in the `pages/index.js` file:

```js
import {useState} from 'react';
import Image from 'next/image';
import Link from 'next/link';
import axios from 'axios';

export default function Home() {
	const [anime, setAnime] = useState('');
	const [searchRes, setSearchRes] = useState(null);

	/**
	 *
	 *
	 * Fetch anime details
	 */
	const fetchAnimeDetails = async e => {
		e.preventDefault();
		try {
			const res = await axios.get(`/api/anime`, {
				params: {anime}
			});
			const {data} = res;
			const {results} = data;

			results = results.slice(0, 10);
			setSearchRes(results);
		} catch (err) {
			console.log(err);
		}
	};

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				<span className="text-active">Anime</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Search and look for your favorite anime
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<form className="flex w-full justify-center md:flex-col md:w-5/6">
					<input
						autoFocus={true}
						type="text"
						className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm font-raleway md:w-full"
						placeholder="Search for your favorite anime..."
						onChange={e => setAnime(e.target.value)}
					/>
					<button
						className="outline-none border border-active font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-active text-primary transition duration-300 hover:bg-background hover:text-black md:ml-0 md:mt-4"
						onClick={e => fetchAnimeDetails(e)}
					>
						Search
					</button>
				</form>
				{searchRes &&
					searchRes.map(animeDetail => (
						<div className="flex flex-col items-center mt-12 w-3/6 h-4/5  md:flex-col md:w-4/6 md:h-full md:mb-12">
							<div className="flex justify-center w-full">
								<Link href={animeDetail.url}>
									<a>
										<Image
											src={animeDetail.image_url}
											width={400}
											height={600}
											alt={animeDetail.title}
										/>
									</a>
								</Link>
							</div>
							<div className="flex flex-col justify-center mt-8 md:mt-6 w-3/6 md:w-full">
								<div className="flex justify-between w-full md:flex-col">
									<p className="text-active uppercase text-raleway font-bold tracking-wider md:text-base">
										Title
									</p>
									<p className="text-secondary w-4/6 text-right md:text-left">
										{animeDetail.title}{' '}
									</p>
								</div>
								<div className="flex justify-between mt-4 w-full md:flex-col">
									<p className="text-active uppercase text-raleway font-bold tracking-wider md:text-base">
										Popularity
									</p>
									<p className="text-secondary">
										{animeDetail.score}{' '}
									</p>
								</div>
								<div className="flex justify-between mt-4 w-full md:flex-col">
									<p className="text-active uppercase text-raleway font-bold tracking-wider md:text-base">
										Rated
									</p>
									<p className="text-secondary">
										{animeDetail.rated}
									</p>
								</div>
								<div className="flex flex-col mt-4 w-full md:flex-col">
									<p className="text-active uppercase text-raleway font-bold tracking-wider mb-2 md:text-base">
										Synopsis
									</p>
									<p className="text-secondary">
										{animeDetail.synopsis}
									</p>
								</div>
							</div>
						</div>
					))}
			</div>
			<div className="flex flex-col mt-10 justify-center">
				<p className="block mt-10 mb-10 text-center text-secondary text-xs">
					Made by RapidAPI DevRel Team -{' '}
					<a
						className="hover:text-active"
						href="https://github.com/RapidAPI/DevRel-Examples-External"
					>
						See more examples like this
					</a>
				</p>
			</div>
		</div>
	);
}
```

You can see that I have created a function, `fetchAnimeDetails`, to request the API. I have also created a piece of UI that is conditionally rendering on the screen based on the `searchRes` state variable’ value.

## Wrap Up

That’s it. We have successfully built an [Anime App](https://rapidapi-example-anime-app.vercel.app/) using [Jikan API](https://RapidAPI.com/theapiguy/api/jikan1?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel). You can find the source code of this web app [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/anime-app).

In the end, it will look something like this:

![Anime Search Application built with Next.js and Jikan API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/921e2aafdccb1fecf813bb7e92c5c2f2616c0b5f/guides/posts/build-anime-search-app/images/cover.png)


Everyone these days loves animes and watches them a lot. If you are one of them, you would want to have a platform to search for them quickly. Let's take a look at how you can build such platform from scratch.

How to build an Anime Search Application using Jikan API?


<Lead>

Sometimes when browsing through the internet, you come across different scripts written in some foreign language. Since it’s not the language you speak, you can not identify it. We can fix this by building a small language detecting application.

</Lead>

So today, I am building a language detection application that will take some text and provide the user with the language name. So without any further ado, let’s jump in.

## Stack

We need to choose a stack first to build this application. I have decided to go with the [Jamstack](https://jamstack.org/).

I am going to use [Next.js](https://nextjs.org/) for the frontend and [TailwindCSS](https://tailwindcss.com/) for the styling.

If you don’t know about Next.js, it is a JavaScript framework built on top of React and provides features like server-side rendering, static site generation, etc. Tailwind is a CSS framework that provides utility classes to speed up the development process.

## Choosing The API

Let’s find an API that we can use to detect text language. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?tm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already and then search for “language detection” in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

You will see different search results related to all the available APIs that provide this service. For this piece, I am using [Microsoft Translator Text API](https://RapidAPI.com/microsoft-azure-org-microsoft-cognitive-services/api/microsoft-translator-text?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel).

To use this API, you need to subscribe to it first. You can do this by clicking on **Subscribe to Test** button.

![Subscribe to IMDb API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/0f687aead197486a85c58dbdbc66ce0c3e0ee2ca/guides/posts/build-language-detection-app/images/subscribe.png)

Once you click the button, you will be redirected to another page where different available subscription packages will be shown. Let’s go with the free one for now.

After all this, you will be redirected back to the original page. Here you will have a key `x-rapidapi-key`. Save it. It will be used later in the application.

## Building The UI

You can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal. So let’s do that.

```sh
npx create-next-app -e with-tailwindcss language-detection-app
```

This command is going to take a minute to set everything up. After generating the boilerplate, you will see a folder with the name `language-detection-app` has been created. Open this folder in your preferred code editor. I will use [VSCode](https://code.visualstudio.com/) for this project.

### Project Files

When you open the project in your code editor, you will see the following directories and files in the root directory:

-   `pages` directory: Inside it, you will have files `index.js`, `_app.js`, and another directory called - `api`. You only need to know about the `index.js` file that is the main entry point in your project.
-   `public` directory: This directory contains icons. You place your static files here to load later in the application.
-   `node_modules`: It’s another directory that contains all the node modules you are using in your application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.

Before we move on to writing the code, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/language-detection-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are some TailwindCSS configurations I have done specifically for this project. I have added some colors that you do not have by default with TailwindCSS and set some screen sizes.

Now let’s start writing the code. I am going to do it in steps so you can follow along.

### → STEP #1

Open the `pages/index.js` file and remove all the existing code. After this, copy-paste the following code there:

```js
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Language <span className="text-danger">Detection</span> App
			</h2>
			<h3 className="text-lightYellow text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				See which language the text is from
			</h3>
		</div>
	);
}
```

It will create two headings for you with the text “Time App” and “Get Time-related information according to an area”. You can change it to anything you prefer.

### → STEP #2

Now let’s create text areas and a detection button. The user will be able to paste content here to detect its language.

Now copy the following code and paste it in `pages/index.js`:

```js
export default function Home() {
  return (
    <div className="flex flex-col items-center relative min-h-screen">
      <h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
        Language <span className="text-danger">Detection</span> App
      </h2>
      <h3 className="text-lightYellow text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
        See which language the text is from
      </h3>
      <div className="flex justify-between w-5/6 h-96 mt-8 md:flex-col md:items-center md:justify-start">
        <textarea
          type="text"
          className="border border-primary outline-none w-2/5 px-4 py-2 rounded-sm font-raleway bg-bc text-primary md:w-full"
          placeholder="Write/paste any content..."
        />
        <div className="flex items-center">
          <button
            className="h-1/6 outline-none border border-danger font-bold font-raleway mx-12 px-12 rounded-sm bg-danger text-bc transition duration-300 hover:bg-bc hover:text-primary md:h-16 md:my-12"
          >
            Detect
          </button>
        </div>
        <textarea
          type="text"
          className="border border-primary outline-none w-2/5  px-4 py-2 rounded-sm font-raleway bg-bc text-primary md:w-full"
          placeholder="Text Language..."
          value=””
        />
      </div>
    </div>
  );
}
```

This code is going to create an input field and button. I have also styled them a little bit using [TailwindCSS](<(https://tailwindcss.com/)>).

### → STEP #3

Let’s create some states to save the text that the user will provide the application. For this, copy-paste the following code in `pages/index.js`.

```js
import {useState} from 'react';

export default function Home() {
	const [text, setText] = useState('');
	const [detectedLang, setDetectedLang] = useState('');

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Language <span className="text-danger">Detection</span> App
			</h2>
			<h3 className="text-lightYellow text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				See which language the text is from
			</h3>
			<div className="flex justify-between w-5/6 h-96 mt-8 md:flex-col md:items-center md:justify-start">
				<textarea
					type="text"
					className="border border-primary outline-none w-2/5 px-4 py-2 rounded-sm font-raleway bg-bc text-primary md:w-full"
					placeholder="Write/paste any content..."
					onChange={e => setText(e.target.value)}
				/>
				<div className="flex items-center">
					<button
						className="h-1/6 outline-none border border-danger font-bold font-raleway mx-12 px-12 rounded-sm bg-danger text-bc transition duration-300 hover:bg-bc hover:text-primary md:h-16 md:my-12"
						onClick={fetchTextInfo}
					>
						Detect
					</button>
				</div>
				<textarea
					type="text"
					className="border border-primary outline-none w-2/5  px-4 py-2 rounded-sm font-raleway bg-bc text-primary md:w-full"
					placeholder="Text Language..."
					value={detectedLang}
				/>
			</div>
		</div>
	);
}
```

You can see that I have added `onChange` event handlers to set the state value as soon as the user writes something in the text area field.

### → STEP #4

Let’s integrate the API now. For this, first, create a `.env.local` file and paste the following in it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR_RAPID_API_KEY
```

You need to replace `YOUR-RAPIDAPI-KEY` here with the API key that I told you to save earlier. It is the value of `x-rapidapi-key`.

Now download and add `axios` to your project. For this, run the following command in the terminal:

```sh
npm install axios
```

Now import `axios` at the top of the `pages/index.js`.

```js
import axios from ‘axios’;
```

### → STEP #5

We are using the `Detect` endpoint of the [Microsoft Translator Text API](https://RapidAPI.com/microsoft-azure-org-microsoft-cognitive-services/api/microsoft-translator-text?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel) to detect the language.

RapidAPI Hub provides you with code snippets in different languages for integrating the API. I am going to use the `(JavaScript) Axios` one.

![Fetching data using (JavaScript) Axios](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/0f687aead197486a85c58dbdbc66ce0c3e0ee2ca/guides/posts/build-language-detection-app/images/code-snippet.png)

Now create a file with the name `detect.js` inside the `pages/api` directory. It is going to create a REST API endpoint for you. The endpoint point will look like this:

```sh
http://localhost:3000/api/detect
```

Now copy the following code in this file:

```js
import axios from 'axios';

export default async function handler(req, res) {
	if (req.method === 'POST') {
		const options = {
			method: 'POST',
			url: 'https://microsoft-translator-text.p.rapidapi.com/Detect',
			params: {'api-version': '3.0'},
			headers: {
				'content-type': 'application/json',
				'x-rapidapi-host': 'microsoft-translator-text.p.rapidapi.com',
				'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
			},
			data: [
				{
					Text: req.body.text
				}
			]
		};

		axios
			.request(options)
			.then(function (response) {
				res.status(200).json(response.data);
			})
			.catch(function (error) {
				console.error(error);
			});
	} else {
		res.status(400);
	}

	if (req.method === 'GET') {
		const options = {
			method: 'GET',
			url: 'https://microsoft-translator-text.p.rapidapi.com/languages',
			params: {'api-version': '3.0'},
			headers: {
				'x-rapidapi-host': 'microsoft-translator-text.p.rapidapi.com',
				'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
			}
		};

		axios
			.request(options)
			.then(function (response) {
				res.status(200).json(response.data);
			})
			.catch(function (error) {
				console.error(error);
			});
	} else {
		res.status(400);
	}
}
```

This code is making an API call to the [Microsoft Translator Text API](https://RapidAPI.com/microsoft-azure-org-microsoft-cognitive-services/api/microsoft-translator-text?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel) on the server and returns the results to the user. It is going to execute when the user makes an API call to the `detect` endpoint I have mentioned above.

You can see that I have written the code for two separate HTTP requests, i.e., POST and GET. It is because we need to fetch all the language codes from the API before our application renders so we can later match the detected language code with these language codes. For this, I will do the server-side rendering.

Once you are done, copy the following code in the `pages/index.js` file:

```js
import {useState} from 'react';
import axios from 'axios';

export default function Home({value: lang}) {
	const [text, setText] = useState('');
	const [detectedLang, setDetectedLang] = useState('');

	/**
	 *
	 *
	 * Detect text language
	 */
	const fetchTextInfo = async () => {
		try {
			setDetectedLang(`Detecting language...`);
			const res = await axios.post(`/api/detect`, {text});
			const {data} = res;
			setDetectedLang(
				`The text is written in ${
					lang.dictionary[data[0].language].name
				} language. And the language's native name is ${
					lang.dictionary[data[0].language].nativeName
				}.`
			);
		} catch (err) {
			setDetectedLang(`Language couldn't be detected.`);
			console.log(err);
		}
	};

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Language <span className="text-danger">Detection</span> App
			</h2>
			<h3 className="text-lightYellow text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				See which language the text is from
			</h3>
			<div className="flex justify-between w-5/6 h-96 mt-8 md:flex-col md:items-center md:justify-start">
				<textarea
					type="text"
					className="border border-primary outline-none w-2/5 px-4 py-2 rounded-sm font-raleway bg-bc text-primary md:w-full"
					placeholder="Write/paste any content..."
					onChange={e => setText(e.target.value)}
				/>
				<div className="flex items-center">
					<button
						className="h-1/6 outline-none border border-danger font-bold font-raleway mx-12 px-12 rounded-sm bg-danger text-bc transition duration-300 hover:bg-bc hover:text-primary md:h-16 md:my-12"
						onClick={fetchTextInfo}
					>
						Detect
					</button>
				</div>
				<textarea
					type="text"
					className="border border-primary outline-none w-2/5  px-4 py-2 rounded-sm font-raleway bg-bc text-primary md:w-full"
					placeholder="Text Language..."
					value={detectedLang}
				/>
			</div>
			<div className="absolute bottom-0 flex justify-center items-end h-52 md:h-44">
				<p className="text-primary pb-12 md:w-60 md:text-center">
					Made by RapidAPI DevRel Team –{' '}
					<a href="https://github.com/RapidAPI/DevRel-Examples-External">
						See Examples Like this
					</a>
				</p>
			</div>
		</div>
	);
}

export async function getServerSideProps() {
	const res = await axios.get('http://localhost:3000/api/detect');
	const {data: value} = res;

	if (!value) {
		return {
			notFound: true
		};
	}

	return {
		props: {
			value
		}
	};
}
```

As mentioned above, I am using the Next.js `getServerSideProps` function to fetch the data from the server at the server-side. You can also use `getStaticProps` instead of `getServerSideProps` and the application will then fetch the data at build time.

You can also see that I have created a function called `fetchTextInfo` that sends the text to the API. When the API comes back with a response, I am then finding the language name using the language code I received through server-side rendering earlier. Then I update the state variable so the user can see what language the text is written in.

## Wrap Up

This is it. We have successfully built a [Language Detection Application](https://rapidapi-example-language-detection-app.vercel.app/) using the [Microsoft Translator Text API](https://RapidAPI.com/microsoft-azure-org-microsoft-cognitive-services/api/microsoft-translator-text?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel). You can find the code of this web app [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/language-detection-app). It will look something like this:

![Language Detection App built with Next.js and Microsoft Translator Text API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/0f687aead197486a85c58dbdbc66ce0c3e0ee2ca/guides/posts/build-language-detection-app/images/cover.png)


In this piece, let's take a look at how you can build a language detection app using an API from RapidAPI Hub and Next.js.

How to build a Language Detection App using Next.js and Microsoft Translator Text API?


You often receive spam emails that sometimes contain harmful content or links. We usually ignore these kinds of emails, but it can also happen that a few critical emails may end up in spam. And having these emails in spam makes us doubt their validity. You can build an application around this use case using an API from [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).

[RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) provides you with thousands of these public APIs that you can use in your apps. Many APIs on [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) have free versions available, but you can also buy a premium version if the free version does not satisfy your need.

Today, I am building an email validator application that will take an email and provide us with different information about its validity. So without any further ado, let’s jump in.

## Stack

We need to choose a stack first to build this application. I have decided to go with the [Jamstack](https://jamstack.org/).

I am going to use [Next.js](https://nextjs.org/) for the client-side and [TailwindCSS](https://tailwindcss.com/) for the styling.

If you don’t know about Next.js, it is a JavaScript framework built on top of React and provides features like server-side rendering, static site generation, etc. Tailwind is a CSS framework that provides utility classes to speed up the development process.

## Choosing The API

Let’s find an API that we can use to fetch the email validity information. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?tm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already and then search for “email validity” in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

You will see different search results related to all the available APIs that provide this service. For this piece, I am using [E-mail Check Invalid or Disposable Domain API](https://rapidapi.com/Top-Rated/api/e-mail-check-invalid-or-disposable-domain?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).

To use this API, you need to subscribe to it first. You can do this by clicking on **Subscribe to Test** button.

![Subscribe to IMDb API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/0f687aead197486a85c58dbdbc66ce0c3e0ee2ca/guides/posts/build-email-validator-app/images/subscribe.png)

Once you click the button, you will be redirected to another page where different available subscription packages will be shown. Let’s go with the free one for now.

After all this, you will be redirected back to the original page. Here you will have a key `x-rapidapi-key`. Save it. It will be used later in the application.

## Building The UI

You can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal. So let’s do that.

```sh
npx create-next-app -e with-tailwindcss email-validator-app
```

This command is going to take a minute to set everything up. After generating the boilerplate, you will see a folder with the name `email-validator-app` has been created. Open this folder in your preferred code editor. I am going to use [VSCode](https://code.visualstudio.com/) for the project.

### Project Files

When you open the project in your code editor, you will see the following directories and files in the root directory:

-   `pages` directory: Inside it, you will have files `index.js`, `_app.js`, and another directory called `api`. You only need to know about the `index.js` file that is the main entry point in your project.
-   `public` directory: This directory contains icons. You place your static files here to load later in the application.
-   `node_modules`: It’s another directory that contains all the node modules you are using in your application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.

Before we move on to writing the code, open [this](​​https://github.com/RapidAPI/DevRel-Examples-External/blob/main/email-validator-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are some TailwindCSS configurations I have done specifically for this project. I have added some colors that you do not have by default with TailwindCSS and set some screen sizes.

Now let’s start writing the code. I am going to do it in steps so you can follow along.

### → STEP #1

Open the `pages/index.js` file and remove all the existing code. After this, copy-paste the following code there:

```js
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Email <span className="text-secondary">Validator</span> App
			</h2>
			<h3 className="text-lightGrey text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Check if an email address exists or not
			</h3>
		</div>
	);
}
```

It will create two headings for you with the text “Email Validator App” and “Check if an email address exists or not”. You can change it to anything you prefer.

### → STEP #2

Now let’s create an input field and a validate button. The user will be able to type in the input field and use the validate button to check the email validity.

For this, copy the following code and paste it in `pages/index.js`:

```js
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Email <span className="text-secondary">Validator</span> App
			</h2>
			<h3 className="text-lightGrey text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Check if an email address exists or not
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<form
					className="flex w-full justify-center md:flex-col md:w-5/6"
					onSubmit={e => checkValidity(e)}
				>
					<input
						autoFocus={true}
						type="email"
						className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm font-raleway md:w-full"
						placeholder="Enter the email address..."
						onChange={e => setEmail(e.target.value)}
					/>
					<button
						className="outline-none border border-danger font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-danger text-primary transition duration-300 hover:bg-bc hover:text-black md:ml-0 md:mt-4"
						onClick={checkValidity}
					>
						Validate
					</button>
				</form>
			</div>
		</div>
	);
}
```

This code is going to create an input field and button. I have also styled them a little bit using [TailwindCSS](<(https://tailwindcss.com/)>).

### → STEP #3

Let’s create some states to store the user input and the response we will receive from the API. For this, copy-paste the following code in `pages/index.js`.

```js
import {useState} from 'react';

export default function Home() {
	const [email, setEmail] = useState('');
	const [res, setRes] = useState(false);

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Email <span className="text-secondary">Validator</span> App
			</h2>
			<h3 className="text-lightGrey text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Check if an email address exists or not
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<form
					className="flex w-full justify-center md:flex-col md:w-5/6"
					onSubmit={e => checkValidity(e)}
				>
					<input
						autoFocus={true}
						type="email"
						className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm font-raleway md:w-full"
						placeholder="Enter the email address..."
						onChange={e => setEmail(e.target.value)}
					/>
					<button
						className="outline-none border border-danger font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-danger text-primary transition duration-300 hover:bg-bc hover:text-black md:ml-0 md:mt-4"
						onClick={checkValidity}
					>
						Validate
					</button>
				</form>
			</div>
		</div>
	);
}
```

You can see that I have added an `onChange` event handler to set the state value as soon as the user writes something in the input field.

### → STEP #4

Let’s integrate the API now. For this, first, create a `.env.local` file and paste the following in it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY
```

You need to replace `YOUR-RAPIDAPI-KEY` here with the API key you got when you subscribed to the [E-mail Check Invalid or Disposable Domain API](https:/RapidAPI.com/Top-Rated/api/e-mail-check-invalid-or-disposable-domain?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel). It is the value of `x-rapidapi-key` that you saved earlier.

Now download and add `axios` to your project. For this, run the following command in the terminal:

```sh
npm install axios
```

Now import `axios` at the top of the `pages/index.js`.

```js
import axios from ‘axios’;
```

### → STEP #5

We will use the `mailcheck` endpoint of the [E-mail Check Invalid or Disposable Domain API](https://RapidAPI.com/Top-Rated/api/e-mail-check-invalid-or-disposable-domain?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) to get the API response.

I am also going to use the code snippet of `(JavaScript) Axios` that [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) provides us.

![Fetching data using (JavaScript) Axios](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/0f687aead197486a85c58dbdbc66ce0c3e0ee2ca/guides/posts/build-email-validator-app/images/code-snippet.png)

Create a file called `validate` in the `pages/api` directory and copy-paste the following code there:

```js
import axios from 'axios';

export default async function handler(req, res) {
	if (req.method === 'GET') {
		const options = {
			method: 'GET',
			url: 'https://mailcheck.p.rapidapi.com/',
			params: {domain: req.query.email},
			headers: {
				'x-rapidapi-host': 'mailcheck.p.rapidapi.com',
				'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
			}
		};

		axios
			.request(options)
			.then(function (response) {
				res.status(200).json(response.data);
			})
			.catch(function (error) {
				console.error(error);
			});
	} else {
		res.status(400);
	}
}
```

Now let’s create a function in the `pages/index.js` file to request the `/api/validate` for the email validity information. You can just copy and replace the following code in `pages/index.js` file:

```js
import {useState} from 'react';
import axios from 'axios';

export default function Home() {
	const [email, setEmail] = useState('');
	const [res, setRes] = useState(false);

	/**
	 *
	 *
	 * Checks validity of en email
	 */
	const checkValidity = async e => {
		e.preventDefault();
		try {
			const res = await axios.get(`/api/validate`, {
				params: {email}
			});
			const {data} = res;
			setRes(data);
		} catch (err) {
			console.log(err);
		}
	};

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Email <span className="text-secondary">Validator</span> App
			</h2>
			<h3 className="text-lightGrey text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Check if an email address exists or not
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<form
					className="flex w-full justify-center md:flex-col md:w-5/6"
					onSubmit={e => checkValidity(e)}
				>
					<input
						autoFocus={true}
						type="email"
						className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm font-raleway md:w-full"
						placeholder="Enter the email address..."
						onChange={e => setEmail(e.target.value)}
					/>
					<button
						className="outline-none border border-danger font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-danger text-primary transition duration-300 hover:bg-bc hover:text-black md:ml-0 md:mt-4"
						onClick={checkValidity}
					>
						Validate
					</button>
				</form>
				{res && (
					<div className="flex flex-col text-primary text-raleway mt-12 w-3/6 h-4/5  md:flex-col md:w-4/6 md:h-full md:mb-12">
						<table className="bg-white w-full text-primary mb-8 md:text-sm md:mx-2">
							<thead className="font-raleway uppercase tracking-wide">
								<tr>
									<th className="border text-left px-4 py-4">
										<span className="text-secondary">
											Information
										</span>
									</th>
									<th className="border text-left px-4 py-4">
										<span className="text-secondary">
											Result
										</span>
									</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td className="border px-4 py-4">Valid</td>
									<td className="border px-4 py-4 capitalize">
										{res.valid.toString()}
									</td>
								</tr>
								<tr>
									<td className="border px-4 py-4">
										Disposable
									</td>
									<td className="border px-4 py-4 capitalize">
										{res.disposable.toString()}
									</td>
								</tr>
								<tr>
									<td className="border px-4 py-4">Domain</td>
									<td className="border px-4 py-4">
										{res.domain}
									</td>
								</tr>
								<tr>
									<td className="border px-4 py-4">Text</td>
									<td className="border px-4 py-4">
										{res.text}
									</td>
								</tr>
								<tr>
									<td className="border px-4 py-4">Reason</td>
									<td className="border px-4 py-4">
										{res.reason}
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				)}
			</div>
		</div>
	);
}
```

You can see that I have created a function, `checkValidity`, to get the API response. I have also created a table that is conditionally rendered on the screen based on the API results.

## Wrap Up

That’s it. We have successfully built a [Email Validator App](https://rapidapi-example-email-validator-app.vercel.app/) using [E-mail Check Invalid or Disposable Domain API](https://RapidAPIcom/Top-Rated/api/e-mail-check-invalid-or-disposable-domain?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel). You can find the source code [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/email-validator-app) of this web app.

In the end, it will look something like this:

![Email Validator App built with Next.js and E-mail Check Invalid or Disposable Domain API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/0f687aead197486a85c58dbdbc66ce0c3e0ee2ca/guides/posts/build-email-validator-app/images/cover.png)


In this piece, I am going to show you how you can build an email validator app using an API from RapidAPI Hub and Next.js.

How to build an Email Validator App Using Next.js and Email Validator API?


<Lead>

Today, public APIs provide a fast and convenient way to develop an application. Whether a small tool-based application or a big eCommerce portal, these APIs can be very serviceable.

</Lead>

[RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) lets you choose from thousands of these public APIs for use in your projects. You can explore thousands of these on RapidAPI Hub and select one for your next project.

Today, we will be building a web application that will display football scores and other information, which we will get from the API. Let's make it.

## Stack

The stack for our app is going to be as follows. I am going to use [Next.js](https://nextjs.org/) for the client-side of our app and [TailwindCSS](https://tailwindcss.com/) for styling it.

Even if you don’t know about Next.js, being familiar with React will be enough for this guide. Tailwind is a CSS framework that provides utility classes to use directly in the markup, saving time during the development process.

## Choosing The API

We need an API that will serve us data related to sports. Let’s find an API that meets our requirements. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already. Then, search for "Sports" in the search field.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

You will see that we have a bunch of options for Sports APIs. I am going to build a football-related app so that I will use [Football Web Pages API](https://rapidapi.com/football-web-pages1-football-web-pages-default/api/football-web-pages1/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).

To use this API, you need to subscribe to it first. You can do this by clicking on the **Subscribe to Test** button.

![Subscribe to the API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-sports-app/images/subscribe.png)

Once you click the button, you will be redirected to the pricing page, which will show the subscription packages for the API. The free plan allows up to 500 requests per day. We are going to subscribe to the free plan for this guide.

Once subscribed, you will be back on the **Endpoints** page. In the central section, you should see a field named `x-rapidapi-key`. Save its value. We will need it later to call the API.

## Building The UI

We can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal.

```sh
npx create-next-app -e with-tailwindcss sports-app
```

It will take some time to install the packages. After generating the boilerplate, you will see a folder with the name `sports-app` has been created. Open this folder in your preferred code editor.

### Project Files

In our project folder, we will have the following folders and files. I will briefly break them down for you:

-   `pages` directory: It has the `index.js` file, which is the entry point of our app, basically the home page. It also has`_app.js` and another directory named `api`, where we will store the requests to our API.
-   `public` directory: It holds assets. You can place your static files here to load later in the application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.

I will be using a particular set of colors for this app. You can use colors of your preference, but if you are interested in mine, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/sports-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are Tailwind configurations for the colors I will be using.

With all that set, it's time to code the app. Let's jump right into it.

### → STEP #1

Open the `pages/index.js` file and remove all the existing code. Let's add the layout.

```js
export default function Home() {
	return (
		<div className="flex flex-col bg-background font-raleway items-center min-h-screen">
			<h1 className="text-6xl text-primary font-bold mt-20">
				Sports <span className="text-active">App</span>
			</h1>
			<h2 className="text-active text-2xl mt-6">
				Next.js app which provides latest Football Scores.
			</h2>
		</div>
	);
}
```

### → STEP #2

Let’s integrate the API now. For this, first, create a `.env.local` file in the root directory of your project and paste the following into it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY
```

Remember the `x-rapidapi-key` I asked you to save earlier? You need to replace `YOUR-RAPIDAPI-KEY` with its value. You get the key after subscribing to the [Cryptocurrency API](https://rapidapi.com/football-web-pages1-football-web-pages-default/api/football-web-pages1/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).

Now download and add `axios` to your project. For this, run the following command in the terminal:

```sh
npm install axios
```

And import `axios` in `pages/index.js`.

```js
import axios from ‘axios’;
```

### → STEP #3

The [Football Web Pages API](https://rapidapi.com/football-web-pages1-football-web-pages-default/api/football-web-pages1/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) provides a lot of valuable endpoints which you can use in your app, like appearances, teams, matches, league tables, etc. You can see these endpoints on the left pane. We will demonstrate one of these endpoints, the `League Table`, which returns data about the current positions of teams in the given league.

![API Endpoints and (JavaScript) Axios Snippet](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-sports-app/images/endpoints.png)

We will send a GET request to get the data. For easy integration, [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) automatically generates snippets in multiple languages and options. As you can see above, we will copy the `(JavaScript) Axios` one.

Next, I am going to create a file named `league.js` in the `pages/api` directory and use the code snippet as follows:

```js
import axios from 'axios';

export default async function handler(req, res) {
	const options = {
		method: 'GET',
		url: 'https://football-web-pages1.p.rapidapi.com/league-table.json',
		params: {comp: req.query.leagueID}, // ID of the league
		headers: {
			'x-rapidapi-host': 'football-web-pages1.p.rapidapi.com',
			'x-rapidapi-key': NEXT_PUBLIC_RAPIDAPI_KEY // Variable for API key we stored in .env.local
		}
	};

	axios
		.request(options)
		.then(function (response) {
			res.status(200).json(response.data);
		})
		.catch(function (error) {
			console.error(error);
		});
}
```

### → STEP #4

Our API call is ready. Now we need to create the UI accordingly. We are requesting a specific league by passing the `leagueID` parameter. So, there should be a way to select different leagues to get their score tables. I will be using buttons to toggle between three leagues. You can also use a select menu with all the leagues supported by the API.

```js
export default function Home() {
	return (
		<div className="flex flex-col bg-background font-raleway items-center min-h-screen">
			<h1 className="text-6xl text-primary font-bold mt-20">
				Sports <span className="text-active">App</span>
			</h1>
			<h2 className="text-active text-2xl mt-6">
				Next.js app which provides latest Football Scores.
			</h2>
			<div className="mt-10 grid grid-cols-3 gap-4">
				<button class="block w-full rounded-md px-5 py-3 bg-primary text-base font-bold text-background focus:outline-none hover:bg-active sm:px-10">
					Premier League
				</button>
				<button className="block w-full rounded-md px-5 py-3 bg-primary text-base font-bold text-background focus:outline-none hover:bg-active sm:px-10">
					Bundesliga
				</button>
				<button className="block w-full rounded-md px-5 py-3 bg-primary text-base font-bold text-background focus:outline-none hover:bg-active sm:px-10">
					Spanish La Liga
				</button>
			</div>
		</div>
	);
}
```

### → STEP #5

We will require two states, one for holding our league selection and one for the response we will get from the API. I will also create a function `getLeague` in the `pages/index.js` file to send the request from the client-side to our API at `http://localhost:3000/api/league`. Finally, we will need a `useEffect` hook to trigger this function whenever we select a different league.

```js
import axios from 'axios';
import {useState, useEffect} from 'react';

export default function Home() {
	const [league, setLeague] = useState(null);
	const [leagueID, setLeagueID] = useState(null);

	// Getter funciton for getting league table data.
	const getLeague = async () => {
		try {
			const res = await axios.get('api/league/', {
				params: {leagueID}
			});
			const {data} = res;
			setLeague(data['league-table']); // Traversing the object to get the league table data.
		} catch (error) {
			console.error(error);
		}
	};
	// Call the getLeague function only when user selects a different league.
	useEffect(() => {
		getLeague();
	}, [leagueID]);

	return (
		<div className="flex flex-col bg-background font-raleway items-center min-h-screen">
			<h1 className="text-6xl text-primary font-bold mt-20">
				Sports <span className="text-active">App</span>
			</h1>
			<h2 className="text-active text-2xl mt-6">
				Next.js app which provides latest Football Scores.
			</h2>
			<div className="mt-10 grid grid-cols-3 gap-4">
				<button
					class="block w-full rounded-md px-5 py-3 bg-primary text-base font-bold text-background focus:outline-none hover:bg-active sm:px-10"
					onClick={() => {
						setLeagueID('1');
					}}
				>
					Premier League
				</button>
				<button
					className="block w-full rounded-md px-5 py-3 bg-primary text-base font-bold text-background focus:outline-none hover:bg-active sm:px-10"
					onClick={() => {
						setLeagueID('92');
					}}
				>
					Bundesliga
				</button>
				<button
					className="block w-full rounded-md px-5 py-3 bg-primary text-base font-bold text-background focus:outline-none hover:bg-active sm:px-10"
					onClick={() => {
						setLeagueID('94');
					}}
				>
					Spanish La Liga
				</button>
			</div>
		</div>
	);
}
```

See the `getLeague` function I have created to get the response from the API. We bind this function to the `useEffect` hook, so that it fires only when `leagueID` changes (using onClick handlers on the buttons). It sends the `leagueID` state, which has the ID of the selected league as a query parameter. You can find these IDs in the API's documentation. Once the response is received, it is stored in the `league` state.

### → FINAL STEP

In the final step, we will display the response. Since we use the `League Table` endpoint, we will display the scores in a table. We have the response object in the `league` state, which has a child `teams`. It is an array of objects having scores of each team in the league. We will map to our table entries as follows:

```js
import axios from 'axios';
import {useState, useEffect} from 'react';

export default function Home() {
	const [league, setLeague] = useState(null);
	const [leagueID, setLeagueID] = useState(null);

	const getLeague = async () => {
		try {
			const res = await axios.get('api/league/', {
				params: {leagueID}
			});
			const {data} = res;
			setLeague(data['league-table']);
		} catch (error) {
			console.error(error);
		}
	};

	useEffect(() => {
		getLeague();
	}, [leagueID]);

	return (
		<div className="flex flex-col relative bg-background font-raleway items-center min-h-screen">
			<h1 className="text-6xl text-primary font-bold mt-20">
				Sports <span className="text-active">App</span>
			</h1>
			<h2 className="text-active text-2xl mt-6">
				Select a league to get its data.
			</h2>

			<div className="mt-10 grid grid-cols-3 gap-4">
				<button
					class="block w-full rounded-md px-5 py-3 bg-primary text-base font-bold text-background focus:outline-none hover:bg-active sm:px-10"
					onClick={() => {
						setLeagueID('1');
					}}
				>
					Premier League
				</button>
				<button
					className="block w-full rounded-md px-5 py-3 bg-primary text-base font-bold text-background focus:outline-none hover:bg-active sm:px-10"
					onClick={() => {
						setLeagueID('92');
					}}
				>
					Bundesliga
				</button>
				<button
					className="block w-full rounded-md px-5 py-3 bg-primary text-base font-bold text-background focus:outline-none hover:bg-active sm:px-10"
					onClick={() => {
						setLeagueID('94');
					}}
				>
					Spanish La Liga
				</button>
			</div>

			{league && (
				<div className="flex flex-col">
					<h2 className="text-3xl my-10 text-active font-bold text-center">
						{league.competition.name}
					</h2>
					<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
						<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
							<div className="overflow-hidden border-b border-active sm:rounded-lg">
								<table className="min-w-full divide-y divide-active text-primary">
									<thead className="bg-gray-50 text-primary opacity-90">
										<tr>
											<th
												scope="col"
												className="px-6 py-3 text-left text-sm font-bold uppercase tracking-wider"
											>
												<span className="sr-only">
													Position
												</span>
											</th>
											<th
												scope="col"
												className="px-6 py-3 text-left text-sm font-bold uppercase tracking-wider"
											>
												Team
											</th>
											<th
												scope="col"
												className="px-6 py-3 text-left text-sm font-bold uppercase tracking-wider"
											>
												Total Matches
											</th>
											<th
												scope="col"
												className="px-6 py-3 text-left text-sm font-bold uppercase tracking-wider"
											>
												Won
											</th>
											<th
												scope="col"
												className="px-6 py-3 text-left text-sm font-bold uppercase tracking-wider"
											>
												Lost
											</th>
											<th
												scope="col"
												className="px-6 py-3 text-left text-sm font-bold uppercase tracking-wider"
											>
												Points
											</th>
										</tr>
									</thead>
									<tbody className="divide-y divide-active">
										{league.teams.map(team => (
											<tr key={team.id}>
												<td className="px-6 py-4 whitespace-nowrap text-sm text-active font-bold text-gray-900">
													{team.position}
												</td>
												<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
													{team.name}
												</td>
												<td className="px-6 py-4 whitespace-nowrap text-center text-sm ">
													{team['all-matches'].played}
												</td>
												<td className="px-6 py-4 whitespace-nowrap text-center text-sm ">
													{team['all-matches'].won}
												</td>
												<td className="px-6 py-4 whitespace-nowrap text-center text-sm ">
													{team['all-matches'].lost}
												</td>
												<td className="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
													{team['total-points']}
												</td>
											</tr>
										))}
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			)}
		</div>
	);
}
```

Finally, this is what our app looks like:

![Sports App built with Next.js and an API from RapidAPI Hub](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-sports-app/images/sports-app.png)

## Wrap Up

All done. Our [sports app](https://rapidapi-example-sports-app.vercel.app/) is ready. Like this, you can utilize the remaining endpoints to create a full-fledged sports application. Find the code of this web app [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/sports-app).


Let's see how we can build a Sports app using an API.

How to build a Sports app in Next.js using a Sports API from RapidAPI Hub?


<Lead>

Today, public APIs provide a fast and convenient way to develop an application. Whether a small tool-based application or a big eCommerce portal, these APIs can be very serviceable.

</Lead>

[RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) lets you choose from thousands of these public APIs for use in your projects. You can explore thousands of these on RapidAPI Hub and select one for your next project.

Today, we will be building a web application that will display the latest news related to Cryptocurrency. It will be a single point of access to news from various sources. Let's build it.

## Stack

The stack for our app is going to be as follows. I am going to use [Next.js](https://nextjs.org/) for the client-side of our app and [TailwindCSS](https://tailwindcss.com/) for styling it.

Even if you don’t know about Next.js, being familiar with React will be enough for this guide. Tailwind is a CSS framework that provides utility classes to use directly in the markup, saving time during the development process.

## Choosing The API

We need an API that will serve us Cryptocurrency related news from multiple sources. Let’s find an API that meets our requirements. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already. Then, search for "Cryptocurrency" in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

You will see that we have a bunch of options for Cryptocurrency APIs. For our app, I will use [Investing - Cryptocurrency Markets API](https://rapidapi.com/apidojo/api/investing-cryptocurrency-markets/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).

To use this API, you need to subscribe to it first. You can do this by clicking on the **Subscribe to Test** button.

![Subscribe to the API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-crypto-news-app/images/subscribe.png)

Once you click the button, you will be redirected to the pricing page, which will show the subscription packages for the API. The free plan allows up to 500 requests per month. We are going to subscribe to the free plan for this guide.

Once subscribed, you will be back on the **Endpoints** page. In the central section, you should see a field named `x-rapidapi-key`. Save its value. We will need it later to call the API.

## Building The UI

We can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal.

```sh
npx create-next-app -e with-tailwindcss crypto-news-app
```

It will take some time to install the packages. After generating the boilerplate, you will see a folder with the name `crypto-news-app` has been created. Open this folder in your preferred code editor.

### Project Files

In our project folder, we will have the following folders and files. I will briefly break them down for you:

-   `pages` directory: It has the `index.js` file, which is the entry point of our app, basically the home page. It also has`_app.js` and another directory named `api` where we will store the requests to our API.
-   `public` directory: It holds assets. You can place your static files here to load later in the application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.

I will be using a particular set of colors for this app. You can use colors of your preference, but if you are interested in mine, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/crypto-news-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are Tailwind configurations for the colors I will be using.

With all that set, it's time to code the app. Let's jump right into it.

### → STEP #1

Open the `pages/index.js` file and remove all the existing code. Let's add the layout.

```js
export default function Home() {
	return (
		<div className="flex flex-col bg-background font-raleway items-center min-h-screen">
			<h1 className="text-6xl text-primary font-bold mt-20">
				Crypto News <span className="text-active">App</span>
			</h1>
			<h2 className="text-active text-2xl mt-6">
				Next.js app which provides information latest news about Crypto
				using Cryptocurrency API.
			</h2>
		</div>
	);
}
```

### → STEP #2

We need a button that will trigger the API call and fetch the latest news from the API. On a side note, if you want to render the news whenever the page is loaded, you can use the `useRef` React hook. But since we are using the free plan, we will go for the button. Let's code it.

```js
export default function Home() {
  return (
      <div className="flex flex-col relative bg-background font-raleway items-center min-h-screen">
        <h1 className="text-6xl text-primary font-bold mt-20">
          Crypto News <span className="text-active">App</span>
        </h1>
        <h2 className="text-active text-2xl mt-6">
          Next.js app which provides information latest news about Crypto using
          Cryptocurrency API
        </h2>

        <div className="mt-12 sm:mx-auto justify-center sm:w-full sm:flex">
          <div className="mt-4 sm:mt-0 sm:ml-3">
            <button
              className="block w-full rounded-md px-5 py-3 bg-active text-base font-bold text-background focus:outline-none focus:ring-2 focus:ring-primary sm:px-10"
            >
              Get Latest News
            </button>
          </div>
      </div>
  );
}
```

This code is going to create the button. I have also styled and made them responsive using [TailwindCSS](<(https://tailwindcss.com/)>). At this point, this is what our app looks like:

![Inital design of the app](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-crypto-news-app/images/initial.png)

### → STEP #3

Let’s create two states, `response` to hold the response from the API, and `page` to implement pagination in our news app.

```js
import { useState } from "react";

export default function Home() {
  const [page, setPage] = useState(1);
  const [response, setResponse] = useState(null);

  return (
    <div className="flex flex-col relative bg-background font-raleway items-center min-h-screen">
      <h1 className="text-6xl text-primary font-bold mt-20">
        Crypto News <span className="text-active">App</span>
      </h1>
      <h2 className="text-active text-2xl mt-6">
        Next.js app which provides information latest news about Crypto using Cryptocurrency API
      </h2>
      <div className="mt-12 sm:mx-auto justify-center sm:w-full sm:flex">
        <div className="mt-4 sm:mt-0 sm:ml-3">
          <button
            className="block w-full rounded-md px-5 py-3 bg-active text-base font-bold text-background focus:outline-none focus:ring-2 focus:ring-primary sm:px-10"
          >
            Get Latest News
          </button>
        </div>
      </div>
  );
}
```

We want the page state to be `1` when initialized.

### → STEP #4

Let’s integrate the API now. For this, first, create a `.env.local` file in the root directory of your project and paste the following into it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY
```

Remember the `x-rapidapi-key` I asked you to save earlier? You need to replace `YOUR-RAPIDAPI-KEY` with its value. You get the key after subscribing to the [Cryptocurrency API](https://rapidapi.com/apidojo/api/investing-cryptocurrency-markets/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).

Now download and add `axios` to your project. For this, run the following command in the terminal:

```sh
npm install axios
```

And import `axios` in `pages/index.js`.

```js
import axios from ‘axios’;
```

### → STEP #5

The [Cryptocurrency API](https://rapidapi.com/apidojo/api/investing-cryptocurrency-markets/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) provides a bunch of very useful endpoints like markets, overviews, conversions, etc. You can see these endpoints on the left pane. For our news app, we are going to use the `get-news` endpoint.

![API Endpoints and (JavaScript) Axios Snippet](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-crypto-news-app/images/code-snippet.png)

We will send a GET request to get the latest news related to Cryptocurrency. The optional parameter `page` will help us implement pagination in our app. For easy integration, [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) automatically generates snippets in multiple languages and options. We will copy the `(JavaScript) Axios` one, as you can see above.

Next, I am going to create a file named `news.js` in the `pages/api` directory and use the code snippet as follows:

```js
import axios from 'axios';

export default async function handler(req, res) {
	const options = {
		method: 'GET',
		url: 'https://investing-cryptocurrency-markets.p.rapidapi.com/coins/get-news',
		params: {
			pair_ID: '1057391', // Setting Bitcoin as the general focus of the news.
			page: req.query.page, // Query parameter sent from the client side.
			time_utc_offset: '28800',
			lang_ID: '1'
		},
		headers: {
			'x-rapidapi-host':
				'investing-cryptocurrency-markets.p.rapidapi.com',
			'x-rapidapi-key': NEXT_PUBLIC_RAPIDAPI_KEY
		}
	};

	axios
		.request(options)
		.then(function (response) {
			res.status(200).json(response.data);
		})
		.catch(function (error) {
			console.error(error);
		});
}
```

We have specified the parameters. Our API call is ready. Now we need to create a function in the `pages/index.js` file to send the request from the client-side to our API at `http://localhost:3000/api/news`. You can just copy and replace the following code in `pages/index.js` file:

```js
import axios from 'axios';
import {useState} from 'react';

export default function Home() {
	const [page, setPage] = useState(1);
	const [response, setResponse] = useState(null);

	// Getter function for getting news from the API.
	const getNews = async () => {
		try {
			const res = await axios.get('api/news/', {
				params: {page}
			});
			const {data} = res;
			setResponse(data.data[0].screen_data.news);
		} catch (error) {
			console.error(error);
		}
	};

	return (
		<div className="flex flex-col relative bg-background font-raleway items-center min-h-screen">
			<h1 className="text-6xl text-primary font-bold mt-20">
				Crypto News <span className="text-active">App</span>
			</h1>
			<h2 className="text-active text-2xl mt-6">
				Next.js app which provides information latest news about Crypto
				using Cryptocurrency API
			</h2>

			<div className="mt-12 sm:mx-auto justify-center sm:w-full sm:flex">
				<div className="mt-4 sm:mt-0 sm:ml-3">
					<button
						className="block w-full rounded-md px-5 py-3 bg-active text-base font-bold text-background focus:outline-none focus:ring-2 focus:ring-primary sm:px-10"
						onClick={() => getNews()}
					>
						Get Latest News
					</button>
				</div>
			</div>
		</div>
	);
}
```

See the `getNews` function I have created to get the response from the API. We are binding this function to the button we created, using the `onClick` event handler. It sends the `page` state holding our page number as the parameter. Once the response is received, it is destructured. `data.data[0].screen_data.news` representing the news array, is stored in the `response` state.

### → FINAL STEP

In the final step, we will display the results and implement pagination. We have the news array in response `state`, which holds all the information we need, such as title, source, related image, and URL. We are going to do the following things:

1. Use a map function to iterate through response, which holds an array of objects. I will be rendering the headline, provider name, related image, and URL for each news article. For their design, I used a grid.

2. Hide the **Get latest news** button once we have the response.

3. Show a **Load next page** button once we have the response. When clicked, it will increment the page state and make the API Call for that page.

Our final code looks like this:

```js
import axios from 'axios';
import {useState} from 'react';

export default function Home() {
	const [page, setPage] = useState(1);
	const [response, setResponse] = useState(null);

	const getNews = async () => {
		try {
			const res = await axios.get('api/news/', {
				params: {page}
			});
			const {data} = res;
			setResponse(data.data[0].screen_data.news);
		} catch (error) {
			console.error(error);
		}
	};

	return (
		<div className="flex flex-col relative bg-background font-raleway items-center min-h-screen">
			<h1 className="text-6xl text-primary font-bold mt-20">
				Crypto News <span className="text-active">App</span>
			</h1>
			<h2 className="text-active text-2xl mt-6">
				Next.js app which provides information latest news about Crypto
				using Cryptocurrency API
			</h2>

			<div className="mt-12 sm:mx-auto justify-center sm:w-full sm:flex">
				<div className="mt-4 sm:mt-0 sm:ml-3">
					{!response && (
						<button
							className="block w-full rounded-md px-5 py-3 bg-active text-base font-bold text-background focus:outline-none focus:ring-2 focus:ring-primary sm:px-10"
							onClick={() => getNews()}
						>
							Get Latest News
						</button>
					)}
				</div>
			</div>
			<div className="mt-10 grid grid-cols-2 gap-16 max-w-5xl">
				{response &&
					response.map(news => {
						return (
							<div className="mt-10 grid justify-items-center">
								<img
									src={news.related_image_big}
									width="300"
									length="300"
									className="rounded-lg"
								></img>
								<a
									className="text-primary text-center hover:text-active transition-colors duation-200"
									key={news.news_ID}
									href={
										news.news_link
											? news.news_link
											: news.third_party_url
									}
								>
									<h3 className="mt-10 text-2xl">
										{news.HEADLINE}
									</h3>
									<p className="mt-4 text-center text-lg opacity-60">
										{news.news_provider_name}
									</p>
								</a>
							</div>
						);
					})}
			</div>

			{response && (
				<div className="flex flex-col mt-10 justify-center">
					<button
						className="block text-active text-base font-bold"
						onClick={() => {
							setPage(page + 1);
							getNews();
						}}
					>
						Load next page
					</button>
				</div>
			)}
		</div>
	);
}
```

This is what our app looks like:

![Crypto News App built with Next.js and Cryptocurrency API from RapidAPI Hub](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-crypto-news-app/images/crypto-news-1.png)

![Crypto News App built with Next.js and Cryptocurrency API from RapidAPI Hub](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-crypto-news-app/images/crypto-news-2.png)

## Wrap Up

All done. Our [crypto news app](https://rapidapi-example-crypto-news-app.vercel.app/) is ready. Like this, you can utilize the remaining endpoints to create a full-fledged Cryptocurrency focused application. Find the code of this web app [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/crypto-news-app).


Let's see how we can build a Crypto News app using a Cryptocurrency API.

How to build a Crypto News Next.js app using a Cryptocurrency API from RapidAPI Hub?


<Lead>

Sometimes you want to analyze how the content you are writing sounds like. If you are a developer like me, you can build an application for this. There are multiple APIs available on [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) that you can use for this purpose.

</Lead>

Today, I am building a Text Sentiment Analysis application that will let the user know how their text sounds. Is it positive, negative, or neutral? So without any further ado, let’s jump in.

## Stack

We need to choose a stack first to build this application. I have decided to go with the [Jamstack](https://jamstack.org/).

I am going to use [Next.js](https://nextjs.org/) for the client-side and [TailwindCSS](https://tailwindcss.com/) for the styling.

If you don’t know about Next.js, it is a JavaScript framework built on top of React and provides features like server-side rendering, static site generation, etc. Tailwind is a CSS framework that provides utility classes to speed up the development process.

## Choosing The API

Let’s find an API that we can use to get the sentiment analysis. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already and then search for “text” in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

You will see different search results related to text APIs. For this piece, I am using [Text Analysis API](https://rapidapi.com/gaurmanojkumar530/api/text-analysis12/?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel).

It is a free API, so you do not need to subscribe to it. However, you will need your RapidAPI key. Go ahead and save the `x-rapidapi-key` so you can use it later.

## Building The UI

You can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal. So let’s do that.

```sh
npx create-next-app -e with-tailwindcss text-sentiment-analysis-app
```

This command is going to take a minute to set everything up. After generating the boilerplate, you will see a folder with the name `text-sentiment-analysis-app` has been created. Open this folder in your preferred code editor. I will use [VSCode](https://code.visualstudio.com/) for this project.

### Project Files

When you open the project in your code editor, you will see the following directories and files in the root directory:

-   `pages` directory: Inside it, you will have files `index.js`, `_app.js`, and another directory called `api`. You only need to know about the `index.js` file that is the main entry point in your project.
-   `public` directory: This directory contains icons. You place your static files here to load later in the application.
-   `node_modules`: It’s another directory that contains all the node modules you are using in your application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.
    `readme.md`: It’s a markdown file for documentation.

Before we move on to writing the code, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/text-sentiment-analysis-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are some TailwindCSS configurations I have done specifically for this project. I have added some colors that you do not have by default with TailwindCSS and set some screen sizes.

Now let’s start writing the code. I am going to do it in steps so you can follow along.

### → STEP #1

Open the `pages/index.js` file and remove all the existing code. After this, copy-paste the following code there:

```js
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Text <span className="text-secondary">Sentiment</span> Analysis
				App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Check how your text sounds
			</h3>
		</div>
	);
}
```

It will create two headings for you with the text “Text Sentiment Analysis App” and “Check how your text sounds”. You can change it to anything you prefer.

### → STEP #2

Now let’s create some text areas where users will be able to write the content and a button that will request the API to analyze our content.

For this, copy the following code and paste it in `pages/index.js`:

```js
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Text <span className="text-secondary">Sentiment</span> Analysis
				App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Check how your text sounds
			</h3>
			<div className="flex justify-between w-5/6 h-96 mt-8 md:flex-col md:items-center md:justify-start">
				<textarea
					type="text"
					className="border border-primary outline-none w-2/5 px-4 py-2 rounded-sm font-raleway md:w-full"
					placeholder="Write/paste any content..."
				/>
				<div className="flex items-center">
					<button className="h-1/6 outline-none border border-secondary font-bold font-raleway mx-12 px-12 rounded-sm bg-secondary text-primary transition duration-300 hover:bg-bc hover:text-black md:h-16 md:my-12">
						Analyse
					</button>
				</div>
				<textarea
					type="text"
					className="border border-primary outline-none w-2/5  px-4 py-2 rounded-sm font-raleway md:w-full"
					placeholder="Analysis..."
					value=""
				/>
			</div>
		</div>
	);
}
```

This code is going to create an input field and button. I have also styled them a little bit using [TailwindCSS](<(https://tailwindcss.com/)>).

### → STEP #3

Let’s create some states to store the content and analysis that we will receive from the API. For this, copy-paste the following code in `pages/index.js`.

```js
import {useState} from 'react';
import axios from 'axios';

export default function Home() {
	const [content, setContent] = useState('');
	const [analysis, setAnalysis] = useState('');

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Text <span className="text-secondary">Sentiment</span> Analysis
				App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Check how your text sounds
			</h3>
			<div className="flex justify-between w-5/6 h-96 mt-8 md:flex-col md:items-center md:justify-start">
				<textarea
					type="text"
					className="border border-primary outline-none w-2/5 px-4 py-2 rounded-sm font-raleway md:w-full"
					placeholder="Write/paste any content..."
					onChange={e => setContent(e.target.value)}
				/>
				<div className="flex items-center">
					<button className="h-1/6 outline-none border border-secondary font-bold font-raleway mx-12 px-12 rounded-sm bg-secondary text-primary transition duration-300 hover:bg-bc hover:text-black md:h-16 md:my-12">
						Analyse
					</button>
				</div>
				<textarea
					type="text"
					className="border border-primary outline-none w-2/5  px-4 py-2 rounded-sm font-raleway md:w-full"
					placeholder="Analysis..."
				/>
			</div>
		</div>
	);
}
```

You can see that I have added an `onChange` event handler to set the state value as soon as the user writes something in the text area field.

### → STEP #4

Let’s integrate the API now. For this, first, create a `.env.local` file and paste the following in it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR_RAPID_API_KEY
```

You need to replace `YOUR-RAPIDAPI-KEY` here with the API key that I told you to save earlier. It is the value of `x-rapidapi-key` that you saved earlier.

Now download and add `axios` to your project. For this, run the following command in the terminal:

```sh
npm install axios
```

Now import `axios` at the top of the `pages/index.js`.

```js
import axios from ‘axios’;
```

### → STEP #5

We are using the `summarize-text` endpoint of the [Text Analysis API](https://rapidapi.com/gaurmanojkumar530/api/text-analysis12/?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel) to analyze the text.

Create a file called `superhero.js` in the `pages/api` directory and copy-paste the following code there:

RapidAPI Hub provides you with code snippets in different languages for integrating the API. I am going to use the `(JavaScript) Axios` one.

![Fetching data using (JavaScript) Axios](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/69c8f1df4e21e2772c6a1f18bf344016296ef10d/guides/posts/build-text-sentiment-analysis-app/images/code-snippet.png)

Now create a file with the name `analyse.js` inside the `pages/api` directory. It is going to create a REST API endpoint for you. The endpoint point will look like this:

```sh
http://localhost:3000/api/analyse
```

Now copy the following code in this file:

```js
import axios from 'axios';

export default async function handler(req, res) {
	if (req.method === 'POST') {
		const options = {
			method: 'POST',
			url: 'https://text-analysis12.p.rapidapi.com/sentiment-analysis/api/v1.1',
			headers: {
				'content-type': 'application/json',
				'x-rapidapi-host': 'text-analysis12.p.rapidapi.com',
				'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
			},
			data: {language: 'english', text: req.body.content}
		};

		axios
			.request(options)
			.then(function (response) {
				res.status(200).json(response.data);
			})
			.catch(function (error) {
				console.error(error);
			});
	} else {
		res.status(400);
	}
}
```

This code is making an API call to the [Text Analysis API](https://rapidapi.com/gaurmanojkumar530/api/text-analysis12/?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel) on the server and returns the results to the user. It is going to execute when the user makes an API call to the `analyse` endpoint I have mentioned above.

Once you are done, copy the following code in the `pages/index.js` file:

```js
import {useState} from 'react';
import axios from 'axios';

export default function Home() {
	const [content, setContent] = useState('');
	const [analysis, setAnalysis] = useState('');

	/**
	 *
	 *
	 * Fetch Analysis of the content
	 */
	const fetchAnalysis = async () => {
		try {
			setAnalysis(`Analysing content...`);
			const res = await axios.post(`/api/analyse`, {
				content
			});
			const {data} = res;

			const msg = `Your text sounds ${
				data.sentiment
			}. It has ${Math.floor(
				data.aggregate_sentiment.pos * 100
			)}% positivity, and ${Math.floor(
				data.aggregate_sentiment.neg * 100
			)}% negativity. It has a neutral level of ${Math.floor(
				data.aggregate_sentiment.neu * 100
			)}%.`;
			setAnalysis(msg);
		} catch (err) {
			setAnalysis(`Couldn't analyse the content.`);
			console.log(err);
		}
	};

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Text <span className="text-secondary">Sentiment</span> Analysis
				App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Check how your text sounds
			</h3>
			<div className="flex justify-between w-5/6 h-96 mt-8 md:flex-col md:items-center md:justify-start">
				<textarea
					type="text"
					className="border border-primary outline-none w-2/5 px-4 py-2 rounded-sm font-raleway md:w-full"
					placeholder="Write/paste any content..."
					onChange={e => setContent(e.target.value)}
				/>
				<div className="flex items-center">
					<button
						className="h-1/6 outline-none border border-secondary font-bold font-raleway mx-12 px-12 rounded-sm bg-secondary text-primary transition duration-300 hover:bg-bc hover:text-black md:h-16 md:my-12"
						onClick={fetchAnalysis}
					>
						Analyse
					</button>
				</div>
				<textarea
					type="text"
					className="border border-primary outline-none w-2/5  px-4 py-2 rounded-sm font-raleway md:w-full"
					placeholder="Analysis..."
					value={analysis}
					readOnly
				/>
			</div>
			<div className="absolute bottom-0 flex justify-center items-end h-52 md:h-44">
				<p className="text-primary pb-12 md:w-60 md:text-center">
					Made by RapidAPI DevRel Team –{' '}
					<a href="https://github.com/RapidAPI/DevRel-Examples-External">
						See Examples Like this
					</a>
				</p>
			</div>
		</div>
	);
}
```

You can see that I have created a function, `fetchAnalysis`, to request the API. The API response I receive is between 0 and 1. So I am multiplying the response by 100 to get the percentage, and then I am showing the results to the user.

## Wrap Up

That’s it. We have successfully built a [Text Sentiment Analysis App](https://rapidapi-text-sentiment-analysis-app.vercel.app/) using [Text Analysis API](https://rapidapi.com/gaurmanojkumar530/api/text-analysis12/?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel). You can find the source code of this web app [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/text-sentiment-analysis-app).

In the end, it will look something like this:

![Text Sentimental Analysis App built with Next.js and Text Sentiment Analysis API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/69c8f1df4e21e2772c6a1f18bf344016296ef10d/guides/posts/build-text-sentiment-analysis-app/images/cover.png)


Sometimes you want to analyze how the content you are writing sounds like. If you are a developer like me, you can build an application for this. Let's do just that in this piece.

How to build a Text Sentiment Analysis App using Next.js and Text Sentiment Analysis API?


<Lead>

When working remotely, we often need to know from which timezone someone is working. And if you have a global team, you often find yourself looking up different timezones to schedule a meeting. This is one of the many examples where we need to know the date and time of a particular time zone.

</Lead>

Today, I am building a UTC app that will provide your timezone according to an area. So without any further ado, let’s jump in.

## Stack

We need to choose a stack first to build this application. I have decided to go with the [Jamstack](https://jamstack.org/).

I am going to use [Next.js](https://nextjs.org/) for the client-side and [TailwindCSS](https://tailwindcss.com/) for the styling.

If you don’t know about Next.js, it is a JavaScript framework built on top of React and provides features like server-side rendering, static site generation, etc. Tailwind is a CSS framework that provides utility classes to speed up the development process.

## Choosing The API

Let’s find an API that we can use to get the UTC timezone information. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already and then search for “utc time” in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

You will see different search results related to all the available APIs that provide information related to timezones. For this piece, I am using [World Time API](https://rapidapi.com/brianiswu/api/world-time2/?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel).

It is a free API, so you do not need to subscribe to it. However, you will need your RapidAPI key. Go ahead and save the `x-rapidapi-key` so you can use it later.

## Building The UI

You can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal. So let’s do that.

```sh
npx create-next-app -e with-tailwindcss time-app
```

This command is going to take a minute to set everything up. After generating the boilerplate, you will see a folder with the name `time-app` has been created. Open this folder in your preferred code editor. I will use [VSCode](https://code.visualstudio.com/) for this project.

### Project Files

When you open the project in your code editor, you will see the following directories and files in the root directory:

-   `pages` directory: Inside it, you will have files `index.js`, `_app.js`, and another directory called `api`. You only need to know about the `index.js` file that is the main entry point in your project.
-   `public` directory: This directory contains icons. You place your static files here to load later in the application.
-   `node_modules`: It’s another directory that contains all the node modules you are using in your application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.

Before we move on to writing the code, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/time-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are some TailwindCSS configurations I have done specifically for this project. I have added some colors that you do not have by default with TailwindCSS and set some screen sizes.

Now let’s start writing the code. I am going to do it in steps so you can follow along.

### → STEP #1

Open the `pages/index.js` file and remove all the existing code. After this, copy-paste the following code there:

```js
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				<span className="text-danger">Time</span> App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-4 md:text-base md:px-4 md:text-center">
				Get Time-related information according to an area
			</h3>
		</div>
	);
}
```

It will create two headings for you with the text “Time App” and “Get Time-related information according to an area”. You can change it to anything you prefer.

### → STEP #2

Now let’s create a dropdown list and a search button. The user will be able to select the timezone of their choice from the list and use the search button to get all the details

For this, create a new folder called `components`. Inside this folder, create a file called `Timezone.js`. Copy and paste what you will find in [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/time-app/components/Timezone.js) file in your `Timezone.js`.

Now copy the following code and paste it in `pages/index.js`:

```js
import Timezone from '../components/Timezone';

export default function Home({value}) {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				<span className="text-danger">Time</span> App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Get Time-related information according to your area
			</h3>
			<div className="flex w-full justify-center md:flex-col md:w-5/6 ">
				<Timezone />
				<button className="outline-none border border-danger font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-danger text-primary transition duration-300 hover:bg-bc hover:text-black md:ml-0 md:mt-4">
					Search
				</button>
			</div>
		</div>
	);
}
```

This code is going to create an input field and button. I have also styled them a little bit using [TailwindCSS](<(https://tailwindcss.com/)>).

### → STEP #3

Let’s create some states to store the UTC time and date that we will receive from the API. For this, copy-paste the following code in `pages/index.js`.

```js
import {useState} from 'react';
import Timezone from '../components/Timezone';

export default function Home({value}) {
	const [res, setRes] = useState(value);
	const [utcTime, setUtcTime] = useState(null);
	const [utcDate, setUtcDate] = useState(null);
	const [timezone, setTimezone] = useState('Africa/Abidjan');

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				<span className="text-danger">Time</span> App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Get Time-related information according to your area
			</h3>
			<div className="flex w-full justify-center md:flex-col md:w-5/6 ">
				<Timezone onChange={setTimezone} />
				<button className="outline-none border border-danger font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-danger text-primary transition duration-300 hover:bg-bc hover:text-black md:ml-0 md:mt-4">
					Search
				</button>
			</div>
		</div>
	);
}
```

You can see that I am sending `setTimezone` function to the Timezone component as a prop.

### → STEP #4

Let’s integrate the API now. For this, first, create a `.env.local` file and paste the following in it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR_RAPID_API_KEY
```

You need to replace `YOUR-RAPIDAPI-KEY` here with the API key that I told you to save earlier. It is the value of `x-rapidapi-key` that you saved earlier.

Now download and add `axios` to your project. For this, run the following command in the terminal:

```sh
npm install axios
```

Now import `axios` at the top of the `pages/index.js`.

```js
import axios from ‘axios’;
```

### → STEP #5

We are using the `Timezone for Location` endpoint of the [World Time API](https://rapidapi.com/brianiswu/api/world-time2/?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel) to get the UTC information.

RapidAPI Hub provides you with code snippets in different languages for integrating the API. I am going to use the `(JavaScript) Axios` one.

![Fetching data using (JavaScript) Axios](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/69c8f1df4e21e2772c6a1f18bf344016296ef10d/guides/posts/build-time-app/images/code-snippet.png)

Now create a file with the name `time.js` inside the `pages/api` directory. It is going to create a REST API endpoint for you. The endpoint point will look like this:

```sh
http://localhost:3000/api/time
```

Now copy the following code in this file:

```js
import axios from 'axios';

export default async function handler(req, res) {
	if (req.method === 'GET') {
		if (req.query.timezone) {
			const newTimezone = req.query.timezone.split('/');
			const options = {
				method: 'GET',
				url: `https://world-time2.p.rapidapi.com/timezone/${newTimezone[0]}/${newTimezone[1]}`,
				headers: {
					'x-rapidapi-host': 'world-time2.p.rapidapi.com',
					'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
				}
			};

			axios
				.request(options)
				.then(function (response) {
					res.status(200).json(response.data);
				})
				.catch(function (error) {
					console.error(error);
				});
		} else {
			var options = {
				method: 'GET',
				url: 'https://world-time2.p.rapidapi.com/timezone/Africa/Abidjan',
				headers: {
					'x-rapidapi-host': 'world-time2.p.rapidapi.com',
					'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
				}
			};

			axios
				.request(options)
				.then(function (response) {
					res.status(200).json(response.data);
				})
				.catch(function (error) {
					console.error(error);
				});
		}
	} else {
		res.status(400);
	}
}
```

This code is making an API call to the [World Time API](https://rapidapi.com/brianiswu/api/world-time2/?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel) on the server and returns the results to the user. It is going to execute when the user makes an API call to the `time` endpoint I have mentioned above.

I have added a condition in the code that will differentiate whether the API call is made before the website is loaded or afterward.

Once you are done, copy the following code in the `pages/index.js` file:

```js
import {useState, useEffect} from 'react';
import Timezone from '../components/Timezone';
import axios from 'axios';

export default function Home({value}) {
	const [res, setRes] = useState(value);
	const [utcTime, setUtcTime] = useState(null);
	const [utcDate, setUtcDate] = useState(null);
	const [timezone, setTimezone] = useState('Africa/Abidjan');

	useEffect(() => {
		splitDataTime();
	}, []);

	/**
	 *
	 *
	 * split data and time.
	 */
	const splitDataTime = () => {
		const date = value.utc_datetime.slice(0, 10);
		const time = value.utc_datetime.slice(11, 16);

		setUtcDate(date);
		setUtcTime(time);
	};

	/**
	 *
	 *
	 * fetch time information
	 */
	const fetchTimeInfo = async () => {
		try {
			const res = await axios.get(`/api/time`, {
				params: {timezone}
			});

			splitDataTime();
			setRes(res.data);
		} catch (err) {
			console.log(err);
		}
	};

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				<span className="text-danger">Time</span> App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Get Time-related information according to an area
			</h3>
			<div className="flex w-full justify-center md:flex-col md:w-5/6 ">
				<Timezone onChange={setTimezone} />
				<button
					className="outline-none border border-danger font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-danger text-primary transition duration-300 hover:bg-bc hover:text-black md:ml-0 md:mt-4"
					onClick={fetchTimeInfo}
				>
					Search
				</button>
			</div>
			<div className="flex flex-col text-primary text-raleway mt-12 w-3/6 h-4/5  md:flex-col md:w-4/6 md:h-full md:mb-12">
				<table className="bg-white w-full text-primary mb-8 md:text-sm md:mx-2">
					<thead className="font-raleway uppercase tracking-wide">
						<tr>
							<th className="border text-left px-4 py-4">
								<span className="text-danger">Information</span>
							</th>
							<th className="border text-left px-4 py-4">
								<span className="text-danger">Value</span>
							</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td className="border px-4 py-4">Timezone</td>
							<td className="border px-4 py-4">{res.timezone}</td>
						</tr>
						<tr>
							<td className="border px-4 py-4">UTC Time</td>
							<td className="border px-4 py-4">{utcTime}</td>
						</tr>
						<tr>
							<td className="border px-4 py-4">UTC Date</td>
							<td className="border px-4 py-4">{utcDate}</td>
						</tr>
						<tr>
							<td className="border px-4 py-4">UTC Offset</td>
							<td className="border px-4 py-4">
								{res.utc_offset}
							</td>
						</tr>
						<tr>
							<td className="border px-4 py-4">Client IP</td>
							<td className="border px-4 py-4">
								{res.client_ip}
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div className="absolute bottom-0 flex justify-center items-end h-52 md:h-44">
				<p className="text-primary pb-12 md:w-60 md:text-center">
					Made by RapidAPI DevRel Team –{' '}
					<a href="https://github.com/RapidAPI/DevRel-Examples-External">
						See Examples Like this
					</a>
				</p>
			</div>
		</div>
	);
}

export async function getServerSideProps() {
	const res = await axios.get('http://localhost:3000/api/time');
	const {data: value} = res;

	if (!value) {
		return {
			notFound: true
		};
	}

	return {
		props: {
			value
		}
	};
}
```

I am using the Next.js `getServerSideProps` function to fetch the data from the server. It will make my application server-side, and the user will never see a loading state. You can also use `getStaticProps` instead of `getServerSideProps` and the application will then fetch the data at build time.

If you look at the code, you will notice two things. First, I am using React’s `useEffect` hook to manipulate the data that I am receiving from the API. For this, I am calling `splitDataTime` function in `useEffect`. It is because the UTC date and time in the API response is a single string. But since these are two separate fields in our app, I am slicing the string to get the desired results. Afterward, I am updating the state variable.

The second thing you will see is that I have added a table to display the values that our application will fetch from the API.

## Wrap Up

This is it. We have successfully built a [UTC Time application](https://rapidapi-example-time-app.vercel.app/) using the [World Time API](https://rapidapi.com/brianiswu/api/world-time2/?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel) API. You can find the code of this web app [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/time-app). It will look something like this:

![Time App built with Next.js and World Time API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/69c8f1df4e21e2772c6a1f18bf344016296ef10d/guides/posts/build-time-app/images/cover.png)


When working remotely, we often need to know from which timezone someone is working. And if you have a global team, you often find yourself looking up different timezones to schedule a meeting. In this piece, let's build a time app using an API from RapidAPI Hub and Next.js.

How to build a Time app using Next.js and World Time API?


<Lead>

Are you a Marvel enthusiast or a DC lover? Are you also a developer who likes superheroes? Let’s build an app together using an API where people can search for their favorite heroes. Also, instead of combing through the Internet, we can use [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) to search for the API.

</Lead>

[RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) provides you with thousands of these public APIs that you can use in your apps. Many APIs on [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) have free versions available, but you can also buy a premium version if the free version does not satisfy your need.

Today, I am building a superhero application where users can search for their favorite superhero’s real name and other abilities, etc.

## Stack

We need to choose a stack first to build this application. I have decided to go with the [Jamstack](https://jamstack.org/).

I am going to use [Next.js](https://nextjs.org/) for the client-side and [TailwindCSS](https://tailwindcss.com/) for the styling.

If you don’t know about Next.js, it is a JavaScript framework built on top of React and provides features like server-side rendering, static site generation, etc. Tailwind is a CSS framework that provides utility classes to speed up the development process.

## Choosing The API

Let’s find an API that we can use to fetch the superhero information. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already and then search for “superhero” in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

You will see different search results related to all the available superhero APIs. For this piece, I am using [SuperHero Search API](https://rapidapi.com/jakash1997/api/superhero-search/?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel).

To use this API, you need to subscribe to it first. You can do this by clicking on **Subscribe to Test** button.

![Subscribe to Superhero Search API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/1449e060cd1efbe498eb5db1f31b78efe9afdf14/guides/posts/build-superhero-app/images/subscribe.png)

Once you click the button, you will be redirected to another page where different available subscription packages will be shown. Let’s go with the free one for now.

After all this, you will be redirected back to the original page. Here you will have a key `x-rapidapi-key`. Save it. It will be used later in the application.

## Building The UI

You can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal. So let’s do that.

```sh
npx create-next-app -e with-tailwindcss superhero-app
```

This command is going to take a minute to set everything up. After generating the boilerplate, you will see a folder with the name `superhero-app` has been created. Open this folder in your preferred code editor. I will use [VSCode](https://code.visualstudio.com/) for this project.

### Project Files

When you open the project in your code editor, you will see the following directories and files in the root directory:

-   `pages` directory: Inside it, you will have files `index.js`, `_app.js`, and another directory called `api`. You only need to know about the `index.js` file that is the main entry point in your project.
-   `public` directory: This directory contains icons. You place your static files here to load later in the application.
-   `node_modules`: It’s another directory that contains all the node modules you are using in your application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.

Before we move on to writing the code, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/superhero-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are some TailwindCSS configurations I have done specifically for this project. I have added some colors that you do not have by default with TailwindCSS and set some screen sizes.

Now create a file called `next.config.js` and paste all the content from [here](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/superhero-app/next.config.js) to this file. We are doing this because the API will provide us with the image URLs. We will use the Next.js Image component to render the image, and this component needs a domain property in the `next.config.js` file to render an image from a URL.

Now let’s start writing the code. I am going to do it in steps so you can follow along.

### → STEP #1

Open the `pages/index.js` file and remove all the existing code. After this, copy-paste the following code there:

```js
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				<span className="text-active">Superhero</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Search for your favorite superhero
			</h3>
		</div>
	);
}
```

It will create two headings for you with the text “Superhero App” and “Search for your favorite superhero”. You can change it to anything you prefer.

### → STEP #2

Now let’s create an input field and a search button. The user will be able to type in the input field and use the search button to get the superhero details.

For this, copy the following code and paste it in `pages/index.js`:

```js
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				<span className="text-active">Superhero</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Search for your favorite superhero
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<form className="flex w-full justify-center md:flex-col md:w-5/6 ">
					<input
						autoFocus={true}
						type="text"
						className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm font-raleway md:w-full"
						placeholder="Enter the name of superhero..."
					/>
					<button className="outline-none border border-active font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-active text-primary transition duration-300 hover:bg-background hover:text-black md:ml-0 md:mt-4">
						Search
					</button>
				</form>
			</div>
		</div>
	);
}
```

This code is going to create an input field and button. I have also styled them a little bit using [TailwindCSS](<(https://tailwindcss.com/)>).

### → STEP #3

Let’s create some states to store the user input and the superhero information we will receive from the API. For this, copy-paste the following code in `pages/index.js`.

```js
import {useState} from 'react';

export default function Home() {
	const [name, setName] = useState('');
	const [superheroInfo, setSuperheroInfo] = useState(null);

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				<span className="text-active">Superhero</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Search for your favorite superhero
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<form className="flex w-full justify-center md:flex-col md:w-5/6 ">
					<input
						autoFocus={true}
						type="text"
						className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm font-raleway md:w-full"
						placeholder="Enter the name of superhero..."
						onChange={e => setName(e.target.value)}
					/>
					<button
						className="outline-none border border-active font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-active text-primary transition duration-300 hover:bg-background hover:text-black md:ml-0 md:mt-4"
						onClick={fetchSuperheroInfo}
					>
						Search
					</button>
				</form>
			</div>
		</div>
	);
}
```

You can see that I have added an `onChange` event handler to set the state value as soon as the user writes something in the input field.

### → STEP #4

Let’s integrate the API now. For this, first, create a `.env.local` file and paste the following in it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY
```

You need to replace `YOUR-RAPIDAPI-KEY` here with the API key you got when you subscribed to the [SuperHero Search API](https://rapidapi.com/jakash1997/api/superhero-search/?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel). It is the value of `x-rapidapi-key` that you saved earlier.

Now download and add `axios` to your project. For this, run the following command in the terminal:

```sh
npm install axios
```

Now import `axios` at the top of the `pages/index.js`.

```js
import axios from ‘axios’;
```

### → STEP #5

We are using the `Search` endpoint of the [SuperHero Search API](https://rapidapi.com/jakash1997/api/superhero-search/?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel) to search for superheroes and fetch their details.

I am also going to use the code snippet of `(JavaScript) Axios` that [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) provides us.

![Fetching data using (JavaScript) Axios](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/1449e060cd1efbe498eb5db1f31b78efe9afdf14/guides/posts/build-superhero-app/images/code-snippet.png)

Create a file called `superhero.js` in the `pages/api` directory and copy-paste the following code there:

```js
import axios from 'axios';

export default async function handler(req, res) {
	if (req.method === 'GET') {
		const options = {
			method: 'GET',
			url: 'https://superhero-search.p.rapidapi.com/api/',
			params: {hero: req.query.name},
			headers: {
				'x-rapidapi-host': 'superhero-search.p.rapidapi.com',
				'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
			}
		};

		axios
			.request(options)
			.then(function (response) {
				res.status(200).json(response.data);
			})
			.catch(function (error) {
				console.error(error);
			});
	} else {
		res.status(400);
	}
}
```

Now let’s create a function in the `pages/index.js` file to request the `/api/superhero` for the word meaning. You can just copy and replace the following code in `pages/index.js` file:

```js
import {useState} from 'react';
import Image from 'next/image';
import axios from 'axios';

export default function Home() {
	const [name, setName] = useState('');
	const [superheroInfo, setSuperheroInfo] = useState(null);

	/**
	 *
	 *
	 * Fetch superhero info
	 */
	const fetchSuperheroInfo = async e => {
		e.preventDefault();
		try {
			const res = await axios.get(`/api/superhero`, {
				params: {name}
			});
			const {data} = res;
			setSuperheroInfo(data);
		} catch (err) {
			console.log(err);
		}
	};

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				<span className="text-active">Superhero</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Search for your favorite superhero
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<form className="flex w-full justify-center md:flex-col md:w-5/6 ">
					<input
						autoFocus={true}
						type="text"
						className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm font-raleway md:w-full"
						placeholder="Enter the name of superhero..."
						onChange={e => setName(e.target.value)}
					/>
					<button
						className="outline-none border border-active font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-active text-primary transition duration-300 hover:bg-background hover:text-black md:ml-0 md:mt-4"
						onClick={fetchSuperheroInfo}
					>
						Search
					</button>
				</form>
				{superheroInfo && (
					<div className="flex mt-12 w-3/6 h-4/5 border border-primary md:flex-col md:w-4/6 md:h-full md:mb-12">
						<Image
							src={superheroInfo.images.lg}
							width={220}
							height={300}
							alt="{movieInfo.title}"
						/>
						<div className="flex flex-col justify-center ml-8 md:mt-6 w-3/6">
							<div className="flex justify-between w-full md:flex-col">
								<p className="text-active uppercase text-raleway font-bold tracking-wider md:text-base">
									Real Name
								</p>
								<p className="text-secondary">
									{superheroInfo.biography.fullName}{' '}
								</p>
							</div>
							<div className="flex justify-between mt-4 w-full md:flex-col">
								<p className="text-active uppercase text-raleway font-bold tracking-wider md:text-base">
									Superhero Name
								</p>
								<p className="text-secondary">
									{superheroInfo.name}{' '}
								</p>
							</div>
							<div className="flex justify-between mt-4 w-full md:flex-col">
								<p className="text-active uppercase text-raleway font-bold tracking-wider md:text-base">
									Intelligence
								</p>
								<p className="text-secondary">
									{`${superheroInfo.powerstats.intelligence}/100`}
								</p>
							</div>
							<div className="flex justify-between mt-4 w-full md:flex-col">
								<p className="text-active uppercase text-raleway font-bold tracking-wider md:text-base">
									Strength
								</p>
								<p className="text-secondary">{`${superheroInfo.powerstats.strength}/100`}</p>
							</div>
							<div className="flex justify-between mt-4 w-full md:flex-col">
								<p className="text-active uppercase text-raleway font-bold tracking-wider md:text-base">
									Speed
								</p>
								<p className="text-secondary">{`${superheroInfo.powerstats.speed}/100`}</p>
							</div>
							<div className="flex justify-between mt-4 w-full md:flex-col">
								<p className="text-active uppercase text-raleway font-bold tracking-wider md:text-base">
									Durability
								</p>
								<p className="text-secondary">{`${superheroInfo.powerstats.durability}/100`}</p>
							</div>
						</div>
					</div>
				)}
			</div>
			<div className="absolute bottom-0 flex justify-center items-end h-36 md:h-44">
				<p className="text-primary pb-12 md:w-60 md:text-center">
					Made by RapidAPI DevRel Team –{' '}
					<a href="https://github.com/RapidAPI/DevRel-Examples-External">
						<span className="transition duration-300 hover:text-secondary">
							See Examples Like this
						</span>
					</a>
				</p>
			</div>
		</div>
	);
}
```

You can see that I have created a function, `fetchSuperheroInfo`, to request the API. I have also created a piece of UI that is conditionally rendering on the screen based on the `superheroInfo` state variable’ value.

## Wrap Up

That’s it. We have successfully built a [Superhero App](https://rapidapi-example-superhero-app.vercel.app/) using [SuperHero Search API](https://rapidapi.com/jakash1997/api/superhero-search/?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel). You can find the source code of this web app[here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/superhero-app).

In the end, it will look something like this:

![Superhero App built with Next.js and Superhero Search API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/1449e060cd1efbe498eb5db1f31b78efe9afdf14/guides/posts/build-superhero-app/images/cover.png)


Are you a Marvel enthusiast or a DC lover? Are you also a developer who likes superheroes? Let’s build an app together using an API from RapidAPI Hub where people can search for their favorite heroes.

How to build a Superhero App using Next.js and SuperHero Search API?


<Lead>

GraphQL APIs allow developers to build highly performant production-ready apps. However, GraphQL APIs are a tad bit different from other types like REST in terms of implementation.

</Lead>

[RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) lets you choose from thousands of public APIs for use in your projects. These also include GraphQL APIs, and you can explore thousands of them on [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).

Today, we will be building a web application using the Next.js framework and fetching data from a GraphQL API. The app will allow us to get details like currency, flag, and capital of any given country. Let's build it.

## Stack

The stack for our app is going to be as follows. I am going to use [Next.js](https://nextjs.org/) for the client-side of our app and [TailwindCSS](https://tailwindcss.com/) for styling it.

Even if you don’t know about Next.js, being familiar with React will be enough for this guide. Tailwind is a CSS framework that provides utility classes to use directly in the markup, saving time during the development process.

## Choosing The API

There are many GraphQL APIs available on [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel). [Create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) on it if you haven’t already. Then, you can look for [GraphQL APIs](https://rapidapi.com/search/graphql?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

For our app, I will use [GeoDB Cities API](https://rapidapi.com/wirefreethought/api/geodb-cities-graphql/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel), which can serve the global city, region, and country data.

To use this API, you need to subscribe to it first. You can do this by clicking on the **Subscribe to Test** button.

![Subscribe to GeoDB API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-graphql-app/images/subscribe.png)

Once you click the button, you will be redirected to the pricing page, which will show the subscription packages for the API. The free plan allows up to 1000 requests per day with restricted features, and we will use it for this guide.

Once subscribed, you will be back on the **Endpoints** page. In the central section, you should see a field named `x-rapidapi-key`. Save its value. We will need it later to call the API.

## Building The UI

We can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your countryNameinal.

```sh
npx create-next-app -e with-tailwindcss graphql-app
```

It will take some time to install the packages. After generating the boilerplate, you will see a folder with the name `graphql-app` has been created. Open this folder in your preferred code editor.

### Project Files

In our project folder, we will have the following folders and files. I will briefly break them down for you:

-   `pages` directory: It has the `index.js` file, which is the entry point of our app, basically the home page. It also has`_app.js` and another directory named `api`, where we will store the requests to our API.
-   `public` directory: It holds assets. You can place your static files here to load later in the application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.

I will be using a particular set of colors for this app. You can use colors of your preference, but if you are interested in mine, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/graphql-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are Tailwind configurations for the colors I will be using.

With all that set, it's time to code the app. Let's jump right into it.

### → STEP #1

Open the `pages/index.js` file and remove all the existing code. Let's add the layout.

```js
export default function Home() {
	return (
		<div className="flex flex-col relative bg-background font-raleway items-center min-h-screen ">
			<h1 className="text-6xl text-primary font-bold mt-10">
				Example GraphQl <span className="text-active">App</span>
			</h1>
			<h2 className="text-active text-2xl mt-6">
				Next.js app which provides information about a given country
				using a GraphQl API.
			</h2>
		</div>
	);
}
```

### → STEP #2

We want to add the functionality of searching for any country. So we will need an input field where the query will go, and it will be submitted by clicking a button. Let's add both of these.

```js
export default function Home() {
	return (
		<div className="flex flex-col relative bg-background font-raleway items-center min-h-screen ">
			<h1 className="text-6xl text-primary font-bold mt-10">
				Example GraphQl <span className="text-active">App</span>
			</h1>
			<h2 className="text-active text-2xl mt-6">
				Next.js app which provides information about a given country
				using a GraphQl API.
			</h2>
			<div className="mt-12 sm:mx-auto justify-center sm:w-full sm:flex">
				<input
					type="text"
					className="block w-1/3 border border-transparent rounded-md px-5 py-3 text-base text-background shadow-sm focus:outline-none focus:border-transparent focus:ring-2 focus:ring-active"
					placeholder="Search for any country using full name or first few letters"
				/>
				<div className="mt-4 sm:mt-0 sm:ml-3">
					<button className="block w-full rounded-md px-5 py-3 bg-active text-base font-bold text-background focus:outline-none focus:ring-2 focus:ring-primary sm:px-10">
						Search
					</button>
				</div>
			</div>
		</div>
	);
}
```

This code is going to create the search field and the submit button. I have also styled and made them responsive using [TailwindCSS](<(https://tailwindcss.com/)>).

### → STEP #3

Let’s create two states, `countryName` to store the search input and `response` to hold the response from the API.

```js
import {useState} from 'react';

export default function Home() {
	const [countryName, setCountryName] = useState(null);
	const [response, setResponse] = useState(null);

	return (
		<div className="flex flex-col relative bg-background font-raleway items-center min-h-screen ">
			<h1 className="text-6xl text-primary font-bold mt-10">
				Example GraphQl <span className="text-active">App</span>
			</h1>
			<h2 className="text-active text-2xl mt-6">
				Next.js app, which provides information about a given country
				using a GraphQl API.
			</h2>

			<div className="mt-12 sm:mx-auto justify-center sm:w-full sm:flex">
				<input
					type="text"
					className="block w-1/3 border border-transparent rounded-md px-5 py-3 text-base text-background shadow-sm focus:outline-none focus:border-transparent focus:ring-2 focus:ring-active"
					placeholder="Search for any country using full name or first few letters"
					onChange={e => setCountryName(e.target.value)}
				/>

				<div className="mt-4 sm:mt-0 sm:ml-3">
					<button
						className="block w-full rounded-md px-5 py-3 bg-active text-base font-bold text-background focus:outline-none focus:ring-2 focus:ring-primary sm:px-10"
						onClick={() => getSearchResults()}
					>
						Search
					</button>
				</div>
			</div>
		</div>
	);
}
```

I am using the `setCountryName(e.target.value)` to save the value of the input field in the state we just created, using the `onChange` event handler.

### → STEP #4

Let’s integrate the API now. For this, first, create a `.env.local` file in the root directory of your project and paste the following into it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY
```

Remember the `x-rapidapi-key` I asked you to save earlier? You need to replace `YOUR-RAPIDAPI-KEY` with its value in this file. You get the key after subscribing to the [GeoDB API](https://rapidapi.com/wirefreethought/api/geodb-cities-graphql/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).

Now download and add `axios` to your project. For this, run the usual command in the terminal:

```sh
npm install axios
```

And import `axios` in `pages/index.js`.

```js
import axios from ‘axios’;
```

### → STEP #5

Before we use the API, we need to find out what kind of a query is required for our use case, fetching a given country’s details. Since it is based on GraphQL, you can go and check its [GraphQL schema here](https://wirefreethought.github.io/geodb-cities-graphql-schema-docs/). I will summarize it for you. We can find a country by passing the required country's name as `namePrefix` to the `Countries` endpoint. It provides an array of objects named `edges`, which holds information of all countries that match our input. Then, we can traverse through the object to get our required data.

Our GraphQL query should look something like this:

```graphql
{
	countries(namePrefix: "Ame") {
		edges {
			node {
				name
				capital
				flagImageUri
				currencyCodes
			}
		}
	}
}
```

Let's test it. On the [endpoints page](https://rapidapi.com/wirefreethought/api/geodb-cities-graphql/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel), scroll down to find a text section where you can enter your GraphQL query. Copy the GraphQL query we created above and paste it here.

![Testing our Query for GeoDB API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-graphql-app/images/testing-endpoint.png)

[RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) automatically generates snippets in multiple languages and options. Copy the `(JavaScript) Axios` one. Now, go ahead and click the `Test Endpoint` button. You will get the following response:

![Response](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-graphql-app/images/response.png)

Our query was successful, and we received the details for our input **"Ame"**. Now, it is time to integrate it into our app. I am going to create a file named `countries.js` in the `pages/api` directory and use the JavaScript (Axios) code snippet we copied above. as follows:

```js
import axios from 'axios';

export default async function handler(req, res) {
	const options = {
		method: 'POST',
		url: 'https://geodb-cities-graphql.p.rapidapi.com/',
		headers: {
			'content-type': 'application/json',
			'x-rapidapi-host': 'geodb-cities-graphql.p.rapidapi.com',
			'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
		},
		data: {
			query: `{
        countries(namePrefix: "Ame") {
          edges {
            node {
              name
              capital
              flagImageUri
              currencyCodes
            }
          }
        }
      }`
		}
	};

	axios
		.request(options)
		.then(function (response) {
			res.status(200).json(response.data);
		})
		.catch(function (error) {
			console.error(error);
			res.status(response.status);
		});
}
```

Done. But do you see the problem here? It is the hard-coded input value. We need to pass it dynamically from the client side. However, in GraphQL queries, we can not simply replace "Ame" with our input value from the client. Instead, we will have to make the following changes to the `data` object:

```js
    data: {
      query: `query getCountry($prefix: String!){
        countries(namePrefix: $prefix) {
          edges {
            node {
              name
              capital
              flagImageUri
              currencyCodes
            }
          }
        }
      }`,
      variables: {
        prefix: req.query.countryName,
      },
    },
```

We create a query function `getCountry`, which takes a parameter `prefix` of type string. Then, inside the data object, we create another child named `variables` we can pass our client's input variable.

Finally, our API call is ready. Now we need to write a function in the `pages/index.js` file to send the request from the client-side to our API at `http://localhost:3000/api/countries`. You can just copy and replace the following code in `pages/index.js` file:

```js
import axios from 'axios';
import {useState} from 'react';

export default function Home() {
	const [countryName, setCountryName] = useState(null);
	const [response, setResponse] = useState(null);

	/**
	 * Fetches search results for the input country name
	 */
	const getSearchResults = async () => {
		try {
			const res = await axios.get('api/countries/', {
				params: {countryName}
			});
			const {data} = res;
			setResponse(data.data.countries.edges);
		} catch (error) {
			console.error(error);
		}
	};

	return (
		<div className="flex flex-col relative bg-background font-raleway items-center min-h-screen ">
			<h1 className="text-6xl text-primary font-bold mt-10">
				Example GraphQl <span className="text-active">App</span>
			</h1>
			<h2 className="text-active text-2xl mt-6">
				Next.js app which provides information about a given country
				using a GraphQl API.
			</h2>

			<div className="mt-12 sm:mx-auto justify-center sm:w-full sm:flex">
				<input
					type="text"
					className="block w-1/3 border border-transparent rounded-md px-5 py-3 text-base text-background shadow-sm focus:outline-none focus:border-transparent focus:ring-2 focus:ring-active"
					placeholder="Search for any country using full name or first few letters"
					onChange={e => setCountryName(e.target.value)}
				/>

				<div className="mt-4 sm:mt-0 sm:ml-3">
					<button
						className="block w-full rounded-md px-5 py-3 bg-active text-base font-bold text-background focus:outline-none focus:ring-2 focus:ring-primary sm:px-10"
						onClick={() => getSearchResults()}
					>
						Search
					</button>
				</div>
			</div>
		</div>
	);
}
```

See the `getSearchResults` function I have created to get the response. It sends the `countryName` state holding our text input as the parameter. Once the response is received, it is stored in the `response` state. We bind this function to the search button we created, using the `onClick` event handler.

### → FINAL STEP

In the final step, we will display the results. The API returns an object having all the details for our query. We are going to use a map function to iterate through this array of objects. I will be displaying the country's full name, capital, currency code, and image of its flag. For the design, I used a grid to organize cards for each country. This is our client-side code in its final form:

```js
import axios from "axios";
import { useState } from "react";

export default function Home() {
  const [countryName, setCountryName] = useState(null);
  const [response, setResponse] = useState(null);

  const getSearchResults = async () => {
    try {
      const res = await axios.get("api/countries/", {
        params: { countryName },
      });
      const { data } = res;
      setResponse(data.data.countries.edges);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div className="flex flex-col relative bg-background font-raleway items-center min-h-screen ">
      <h1 className="text-6xl text-primary font-bold mt-10">
        Example GraphQl <span className="text-active">App</span>
      </h1>
      <h2 className="text-active text-2xl mt-6">
        Next.js app which provides information about a given country using a
        GraphQl API.
      </h2>

      <div className="mt-12 sm:mx-auto justify-center sm:w-full sm:flex">
        <input
          type="text"
          className="block w-1/3 border border-transparent rounded-md px-5 py-3 text-base text-background shadow-sm focus:outline-none focus:border-transparent focus:ring-2 focus:ring-active"
          placeholder="Search for any country using full name or first few letters"
          onChange={(e) => setCountryName(e.target.value)}
        />

        <div className="mt-4 sm:mt-0 sm:ml-3">
          <button
            className="block w-full rounded-md px-5 py-3 bg-active text-base font-bold text-background focus:outline-none focus:ring-2 focus:ring-primary sm:px-10"
            onClick={() => getSearchResults()}
          >
            Search
          </button>
        </div>
      </div>

      {response && (
        <div className="mt-16">
          <h3 className="text-secondary text-ceter text-2xl">Search Results</h3>
          <div className="mt-6 grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 gap-8">
            {response.map((item) => (
              <div key={item.node.name} className="mt-6 pt-6 grid">
                <div className="bg-secondary rounded-lg px-4 pb-8">
                  <div className="-mt-6">
                    <div className="flex items-center justify-center">
                      <span className=" rounded-md shadow-lg">
                        <img
                          src={item.node.flagImageUri}
                          width={140}
                          height={140}
                          alt="flag"
                        />
                      </span>
                    </div>
                    <div className="text-center justify-center items-center text-background">
                      <h3 className="mt-2 text-2xl text-center font-bold tracking-tight">
                        {item.node.name}
                      </h3>
                      <span className="ml-2 mt-2 mb-4 text-base font-bold block">
                        {item.node.capital}
                      </span>
                      Currency:
                      <span className="ml-2 font-bold text-base">
                        {item.node.currencyCodes[0]}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
      )}
    </div>
  );
}
```

And this is what our app looks like:

![Next.js App built using GeoDB, a GraphQL API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-graphql-app/images/graphql-app.png)

## Wrap Up

All done. Our [GraphQL app](https://rapidapi-example-graphql-app.vercel.app/) is ready. Find the code of this web app [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/graphql-app).


Let's see how we can fetch and use data from GraphQL in a Next.js app.

How to build a Next.js app using a GraphQL API?


<Lead>

[RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) provides you with thousands of these public APIs that you can use in your apps. Many APIs on [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) have free versions available, but you can also buy a premium version if the free version does not satisfy your need.

</Lead>

Today, I am building a dictionary application that will take a word from the user and bring back its meaning using an API. So without any further ado, let’s jump in.

## Stack

We need to choose a stack first to build this application. I have decided to go with the [Jamstack](https://jamstack.org/).

I am going to use [Next.js](https://nextjs.org/) for the client-side and [TailwindCSS](https://tailwindcss.com/) for the styling.

If you don’t know about Next.js, it is a JavaScript framework built on top of React and provides features like server-side rendering, static site generation, etc. Tailwind is a CSS framework that provides utility classes to speed up the development process.

## Choosing The API

Let’s find an API that we can use to fetch the meaning of a word. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already and then search for “dictionary apis” in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

You will see different search results related to all the available spell check APIs. For this piece, I am using [Dictionary by API-Ninjas](https://rapidapi.com/apininjas/api/dictionary-by-api-ninjas/?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel).

It is a free API, so you do not need to subscribe to it. Although, you will need your RapidAPI key. Go ahead and save the `x-rapidapi-key` so you can use it later.

## Building The UI

You can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal. So let’s do that.

```sh
npx create-next-app -e with-tailwindcss dictionary-app
```

This command is going to take a minute to set everything up. After generating the boilerplate, you will see a folder with the name `dictionary-app` has been created. Open this folder in your preferred code editor. I will use [VSCode](https://code.visualstudio.com/) for this project.

### Project Files

When you open the project in your code editor, you will see the following directories and files in the root directory:

-   `pages` directory: Inside it, you will have files `index.js`, `_app.js`, and another directory called `api`. You only need to know about the `index.js` file that is the main entry point in your project.
-   `public` directory: This directory contains icons. You place your static files here to load later in the application.
-   `node_modules`: It’s another directory that contains all the node modules you are using in your application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.

Before we move on to writing the code, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/dictionary-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are some TailwindCSS configurations I have done specifically for this project. I have added some colors that you do not have by default with TailwindCSS and set some screen sizes.

Now let’s start writing the code. I am going to do it in steps so you can follow along.

### → STEP #1

Open the `pages/index.js` file and remove all the existing code. After this, copy-paste the following code there:

```js
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				<span className="text-secondary">Dictionary</span> App
			</h2>
			<h3 className="text-lightGrey text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Check Meaning of any word
			</h3>
		</div>
	);
}
```

It will create two headings for you with the text “Dictionary App” and “Check Meaning of any word”. You can change it to anything you prefer.

### → STEP #2

Now let’s create an input field and a search button. The user will be able to type in the input field and use the search button to get the word’s meaning.

For this, copy the following code and paste it in `pages/index.js`:

```js
export default function Home() {
  return (
    <div className="flex flex-col items-center relative min-h-screen">
      <h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
        <span className="text-secondary">Dictionary</span> App
      </h2>
      <h3 className="text-lightGrey text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
        Check Meaning of any word
      </h3>
      <div className="flex flex-col justify-between items-center w-full md:items-center">
        <form
          onSubmit=””
          className="flex w-full justify-center md:flex-col md:w-5/6 "
        >
          <input
            autoFocus={true}
            type="text"
            className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm font-raleway md:w-full"
            placeholder="Enter any word..."
          />
          <button
            className="outline-none border border-danger font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-danger text-primary transition duration-300 hover:bg-bc hover:text-black md:ml-0 md:mt-4"
          >
            Search
          </button>
        </form>
      </div>
    </div>
  );
}
```

This code is going to create an input field and button. I have also styled them a little bit using [TailwindCSS](<(https://tailwindcss.com/)>).

### → STEP #3

Let’s create some states to store the user input and the meaning we will receive from the API. For this, copy-paste the following code in `pages/index.js`.

```js
import {useState} from 'react';

export default function Home() {
	const [word, setWord] = useState('');
	const [wordInfo, setWordInfo] = useState(null);

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				<span className="text-secondary">Dictionary</span> App
			</h2>
			<h3 className="text-lightGrey text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Check Meaning of any word
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<form
					onSubmit={e => fetchInfo(e)}
					className="flex w-full justify-center md:flex-col md:w-5/6 "
				>
					<input
						autoFocus={true}
						type="text"
						className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm font-raleway md:w-full"
						placeholder="Enter any word..."
						onChange={e => setWord(e.target.value)}
					/>
					<button className="outline-none border border-danger font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-danger text-primary transition duration-300 hover:bg-bc hover:text-black md:ml-0 md:mt-4">
						Search
					</button>
				</form>
			</div>
		</div>
	);
}
```

You can see that I have added an `onChange` event handler to set the state value as soon as the user writes something in the input field.

### → STEP #4

Let’s integrate the API now. For this, first, create a `.env.local` file and paste the following in it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY
```

You need to replace `YOUR-RAPIDAPI-KEY` with the API key I told you to save earlier in the article.

Now download and add `axios` to your project. For this, run the following command in the terminal:

```sh
npm install axios
```

Now import `axios` at the top of the `pages/index.js`.

```js
import axios from ‘axios’;
```

### → STEP #5

We are using the `/v1/dictionary` endpoint of the [Dictionary by API-Ninjas](https://rapidapi.com/apininjas/api/dictionary-by-api-ninjas/?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel) to get the meaning of the word.

I am also going to use the code snippet of `(JavaScript) Axios` that [RapidAPI Hub](https://rapidapi.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) provides us.

![Fetching data using (JavaScript) Axios](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/5a1b6f8094c17bf4c799171dc1147f73f5652b4c/guides/posts/build-dictionary-app/images/code-snippet.png)

Create a file called `info.js` in the `pages/api` directory and copy-paste the following code there:

```js
import axios from 'axios';

export default async function handler(req, res) {
	if (req.method === 'GET') {
		const options = {
			method: 'GET',
			url: 'https://dictionary-by-api-ninjas.p.rapidapi.com/v1/dictionary',
			params: {word: req.query.word},
			headers: {
				'x-rapidapi-host': 'dictionary-by-api-ninjas.p.rapidapi.com',
				'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
			}
		};

		axios
			.request(options)
			.then(function (response) {
				res.status(200).json(response.data);
			})
			.catch(function (error) {
				console.error(error);
			});
	} else {
		res.status(400);
	}
}
```

Now let’s create a function in the `pages/index.js` file to request the `/api/info` for the word meaning. You can just copy and replace the following code in `pages/index.js` file:

```js
import {useState} from 'react';
import axios from 'axios';

export default function Home() {
	const [word, setWord] = useState('');
	const [wordInfo, setWordInfo] = useState(null);

	/**
	 *
	 *
	 * Fetch word information
	 */
	const fetchInfo = async e => {
		e.preventDefault();
		try {
			const res = await axios.get(`/api/info`, {
				params: {word}
			});
			const {data} = res;
			const {definition} = data;

			// split the response string into an array using regex
			const newDefinition = definition.split(/1. |2. | 3. /);
			setWordInfo(newDefinition);
		} catch (err) {
			console.log(err);
		}
	};

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				<span className="text-secondary">Dictionary</span> App
			</h2>
			<h3 className="text-lightGrey text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Check Meaning of any word
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<form
					onSubmit={e => fetchInfo(e)}
					className="flex w-full justify-center md:flex-col md:w-5/6 "
				>
					<input
						autoFocus={true}
						type="text"
						className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm font-raleway md:w-full"
						placeholder="Enter any word..."
						onChange={e => setWord(e.target.value)}
					/>
					<button
						className="outline-none border border-danger font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-danger text-primary transition duration-300 hover:bg-bc hover:text-black md:ml-0 md:mt-4"
						onClick={fetchInfo}
					>
						Search
					</button>
				</form>
				{wordInfo && (
					<div className="flex flex-col text-primary text-raleway mt-12 w-3/6 h-4/5  md:flex-col md:w-4/6 md:h-full md:mb-12">
						<table className="bg-white w-full text-primary mb-8 md:text-sm md:mx-2">
							<thead className="font-raleway uppercase tracking-wide">
								<tr>
									<th className="border text-left px-4 py-4">
										<span className="text-secondary">
											{word}
										</span>
									</th>
									<th className="border text-left px-4 py-4">
										<span className="text-secondary">
											Definition
										</span>
									</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td className="border px-4 py-4">1.</td>
									<td className="border px-4 py-4">
										{wordInfo[1]}
									</td>
								</tr>
								<tr>
									<td className="border px-4 py-4">2.</td>
									<td className="border px-4 py-4">
										{wordInfo[2]}
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				)}
			</div>
			<div className="absolute bottom-0 flex justify-center items-end h-36 md:h-44">
				<p className="text-primary pb-12 md:w-60 md:text-center">
					Made by RapidAPI DevRel Team –{' '}
					<a href="https://github.com/RapidAPI/DevRel-Examples-External">
						<span className="transition duration-300 hover:text-secondary">
							See Examples Like this
						</span>
					</a>
				</p>
			</div>
		</div>
	);
}
```

You can see that I have created a function, `fetchInfo`, to get the meaning of the word. I have also used a little bit of regex to split the long string we receive as a response from the API into smaller strings.

I have also created a piece of UI that is conditionally rendering on the screen.

## Wrap Up

That’s it. We have successfully built a [Dictionary App](https://rapidapi-example-dictionary-app.vercel.app/) using [Dictionary by API-Ninjas](https://rapidapi.com/apininjas/api/dictionary-by-api-ninjas/?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel). You can find the source code [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/dictionary-app) of this web app.

In the end, it will look something like this:

![Dictionary app built with Next.js and Dictionary API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/5a1b6f8094c17bf4c799171dc1147f73f5652b4c/guides/posts/build-dictionary-app/images/cover.png)


In this piece, I am going to show you how you can build a dictionary app using an API from RapidAPI Hub and Next.js.

How to build a Dictionary app using Next.js and dictionary API?


<Lead>

Sometimes you only want to see the content of a particular website. Maybe you are reading, and you don’t want to get distracted by ads or other parts of the website. There are multiple APIs on [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) that you can use to build something similar.

</Lead>

[RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) provides you with thousands of these public APIs that you can use in your apps. Many APIs on [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) have free versions available, but you can also buy a premium version if the free version does not satisfy your need.

Today, I am building a text extraction application that will take a URL to some article, extracts it, and then show the user the extracted article. So without any further ado, let’s jump in.

## Stack

We need to choose a stack first to build this application. I have decided to go with the [Jamstack](https://jamstack.org/).

I am going to use [Next.js](https://nextjs.org/) for the client-side and [TailwindCSS](https://tailwindcss.com/) for the styling.

If you don’t know about Next.js, it is a JavaScript framework built on top of React and provides features like server-side rendering, static site generation, etc. Tailwind is a CSS framework that provides utility classes to speed up the development process.

## Choosing The API

Let’s find an API that we can use to extract text from a webpage. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already and then search for “text extraction” in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

You will see different search results related to all the available text extraction APIs. For this piece, I am using [TextAPI](https://rapidapi.com/textapi/api/textapi/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).

To use this API, you need to subscribe to it first. You can do this by clicking on **Subscribe to Test** button.

![Subscribe to TextAPI](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/0d11cda06c5d2888a6cf5d6e31949d649c055d52/guides/posts/build-text-extraction-app/images/subscribe.png)

Once you click the button, you will be redirected to another page where different available subscription packages will be shown. Let’s go with the free one for now.

After all this, you will be redirected back to the original page. Here you will have a key `x-rapidapi-key`. Save it. It will be used later in the application.

## Building The UI

You can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal. So let’s do that.

```sh
npx create-next-app -e with-tailwindcss text-extraction-app
```

This command is going to take a minute to set everything up. After generating the boilerplate, you will see a folder with the name `text-extraction-app` has been created. Open this folder in your preferred code editor. I am going to use [VSCode](https://code.visualstudio.com/) for the project.

### Project Files

When you open the project in your code editor, you will see the following directories and files in the root directory:

-   `pages` directory: Inside it, you will have files `index.js`, `_app.js`, and another directory called `api`. You only need to know about the `index.js` file that is the main entry point in your project.
-   `public` directory: This directory contains icons. You place your static files here to load later in the application.
-   `node_modules`: It’s another directory that contains all the node modules you are using in your application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.

Before we move on to writing the code, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/text-extraction-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are some TailwindCSS configurations I have done specifically for this project. I have added some colors that you do not have by default with TailwindCSS and set some screen sizes.

Now let’s start writing the code. I am going to do it in steps so you can follow along.

### → STEP #1

Open the `pages/index.js` file and remove all the existing code. After this, copy-paste the following code there:

```js
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-secondary pt-20 pb-6 md:text-3xl">
				Text <span className="text-active">Extraction</span> App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Quickly Extract Text of Any Webpage
			</h3>
		</div>
	);
}
```

It will create two headings for you with the text “Text Extraction App” and “Quickly Extract Text of Any Webpage”. You can change it to anything you prefer.

### → STEP #2

Now let’s create an input field and extract button. The user will use the input field to provide the URL of an article. The extract button will send the URL to the API and get the extracted article.

For this, copy the following code and paste it in `pages/index.js`:

```js
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-secondary pt-20 pb-6 md:text-3xl">
				Text <span className="text-active">Extraction</span> App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Quickly Extract Text of Any Webpage
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<div className="flex w-full justify-center md:flex-col md:w-5/6">
					<input
						type="text"
						className="border border-primary outline-none w-2/5 px-4 py-2 rounded-sm bg-lightGrey text-secondary font-bold font-raleway md:w-full"
						placeholder="Paste the article link..."
					/>
					<button className="outline-none border border-active font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-active text-primary transition duration-300 hover:bg-bc hover:text-secondary hover:border-secondary md:h-16 md:my-12 md:ml-0">
						Extract Text
					</button>
				</div>
			</div>
		</div>
	);
}
```

This code is going to create an input field and button. I have also styled them a little bit using [TailwindCSS](<(https://tailwindcss.com/)>).

### → STEP #3

Let’s create some states to store the user input and the extracted article that we will receive from the API. For this, copy-paste the following code in `pages/index.js`.

```js
import {useState} from 'react';

export default function Home() {
	const [url, setUrl] = useState('');
	const [extractedText, setExtractedText] = useState(null);

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-secondary pt-20 pb-6 md:text-3xl">
				Text <span className="text-active">Extraction</span> App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Quickly Extract Text of Any Webpage
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<div className="flex w-full justify-center md:flex-col md:w-5/6">
					<input
						type="text"
						className="border border-primary outline-none w-2/5 px-4 py-2 rounded-sm bg-lightGrey text-secondary font-bold font-raleway md:w-full"
						placeholder="Paste the article link..."
						onChange={e => setUrl(e.target.value)}
					/>
					<button className="outline-none border border-active font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-active text-primary transition duration-300 hover:bg-bc hover:text-secondary hover:border-secondary md:h-16 md:my-12 md:ml-0">
						Extract Text
					</button>
				</div>
			</div>
		</div>
	);
}
```

You can see that I have added an `onChange` event handler to set the state value as soon as the user writes something in the input field.

### → STEP #4

Let’s integrate the API now. For this, first, create a `.env.local` file and paste the following in it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY
```

You need to replace `YOUR-RAPIDAPI-KEY` here with the API key you got when you subscribed to the [TextAPI](https://rapidapi.com/textapi/api/textapi/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel). It is the value of `x-rapidapi-key` that you saved earlier.

Now download and add `axios` to your project. For this, run the following command in the terminal:

```sh
npm install axios
```

Now import `axios` at the top of the `pages/index.js`.

```js
import axios from ‘axios’;
```

### → STEP #5

We are going to use the `Extract Text [From Webpage]` endpoint of the [TextAPI](https://rapidapi.com/textapi/api/textapi/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) to get the extracted article.

I am also going to use the code snippet of `(JavaScript) Axios` that [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) provides us.

![Fetching data using (JavaScript) Axios](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/0d11cda06c5d2888a6cf5d6e31949d649c055d52/guides/posts/build-text-extraction-app/images/code-snippet.png)

Create a file called `extract` in the `pages/api` directory and copy-paste the following code there:

```js
import axios from 'axios';

export default async function handler(req, res) {
	if (req.method === 'GET') {
		const options = {
			method: 'GET',
			url: 'https://textapis.p.rapidapi.com/text',
			params: {
				url: req.query.url
			},
			headers: {
				'x-rapidapi-host': 'textapis.p.rapidapi.com',
				'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
			}
		};

		axios
			.request(options)
			.then(function (response) {
				res.status(200).json(response.data);
			})
			.catch(function (error) {
				console.error(error);
				res.status(response.status);
			});
	} else {
		res.status(400);
	}
}
```

Now let’s create a function in the `pages/index.js` file to request the `/api/extract` to get spell check details. You can just copy and replace the following code in `pages/index.js` file:

```js
import {useState} from 'react';
import axios from 'axios';

export default function Home() {
	const [url, setUrl] = useState('');
	const [extractedText, setExtractedText] = useState(null);

	/**
	 *
	 *
	 * Fetch extracted content from the url
	 */
	const fetchExtractedContent = async () => {
		try {
			const res = await axios.get(`/api/extract`, {
				params: {url}
			});
			const {data} = res;
			const {text} = data;

			setExtractedText(text);
		} catch (err) {
			console.log(err);
		}
	};

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-secondary pt-20 pb-6 md:text-3xl">
				Text <span className="text-active">Extraction</span> App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Quickly Extract Text of Any Webpage
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<div className="flex w-full justify-center md:flex-col md:w-5/6">
					<input
						type="text"
						className="border border-primary outline-none w-2/5 px-4 py-2 rounded-sm bg-lightGrey text-secondary font-bold font-raleway md:w-full"
						placeholder="Paste the article link..."
						onChange={e => setUrl(e.target.value)}
					/>
					<button
						className="outline-none border border-active font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-active text-primary transition duration-300 hover:bg-bc hover:text-secondary hover:border-secondary md:h-16 md:my-12 md:ml-0"
						onClick={fetchExtractedContent}
					>
						Extract Text
					</button>
				</div>

				{extractedText && (
					<textarea
						type="text"
						className="bg-lightGrey text-secondary border border-primary outline-none w-3/5 h-96 mt-12 px-4 py-2 rounded-sm font-raleway md:w-5/6 md:mt-2 md: h-48"
						value={extractedText}
					/>
				)}
			</div>
			<div className="absolute bottom-0 flex justify-center items-end h-52 md:h-44">
				<p className="text-secondary pb-12 md:w-60 md:text-center">
					Made by RapidAPI DevRel Team –{' '}
					<a href="https://github.com/RapidAPI/DevRel-Examples-External">
						<span className="transition duration-300 hover:text-active">
							See Examples Like this
						</span>
					</a>
				</p>
			</div>
		</div>
	);
}
```

You can see that I have created a function, `fetchExtractedContent`, for fetching the article from the webpage. I have also created a piece of UI that is conditionally rendering on the screen based on the value of `extractedText` state variable.

## Wrap Up

That’s it. We have successfully built a [Text Extraction App](https://rapidapi-example-text-extraction-app.vercel.app/) using TextAPI](https://rapidapi.com/textapi/api/textapi/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel). You can find the source code [here](​​https://github.com/RapidAPI/DevRel-Examples-External/tree/main/text-extraction-app) of this web app.

In the end, it will look something like this:

![Text Extraction App built with Next.js and TextAPI](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/0d11cda06c5d2888a6cf5d6e31949d649c055d52/guides/posts/build-text-extraction-app/images/cover.png)


Sometimes you only want to see the content of a particular website. Maybe you are reading, and you don’t want to get distracted by ads or other parts of the website. Let's build a text extraction application in this piece.

How to build a Text Extraction App using Next.js and TextAPI?


<Lead>

You often have to write detailed documents at work. They can be proposals, guides, some documentation, etc. You need to ensure that you are not making any spelling errors in such important documents. If you are a developer like me, you can create your own web application for this task using any API from the Internet.

</Lead>

[RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) provides you with thousands of these public APIs that you can use in your apps. Many APIs on [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) have free versions available, but you can also buy a premium version if the free version does not satisfy your need.

Today, I am building a spell checker application that will take some content and show you if you have made any spelling mistakes or not. So without any further ado, let’s jump in!

## Stack

We need to choose a stack first to build this application. I have decided to go with the [Jamstack](https://jamstack.org/).

I am going to use [Next.js](https://nextjs.org/) for the client-side and [TailwindCSS](https://tailwindcss.com/) for the styling.

If you don’t know about Next.js, it is a JavaScript framework built on top of React and provides features like server-side rendering, static site generation, etc. Tailwind is a CSS framework that provides utility classes to speed up the development process.

## Choosing The API

Let’s find an API that we can use to get the spelling information. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already and then search for “spell checker” in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

You will see different search results related to all the available spell check APIs. For this piece, I am using [JSpell Checker API](https://rapidapi.com/page-scholar-inc-page-scholar-inc-default/api/jspell-checker/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).

To use this API, you need to subscribe to it first. You can do this by clicking on **Subscribe to Test** button.

![Subscribe to JSpell Checker API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/7a04292c776f657636cc5ec14a42081b899d0a41/guides/posts/build-spell-checker-app/images/subscribe.png)

Once you click the button, you will be redirected to another page where different available subscription packages will be shown. Let’s go with the free one for now.

After all this, you will be redirected back to the original page. Here you will have a key `x-rapidapi-key`. Save it. It will be used later in the application.

## Building The UI

You can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal. So let’s do that.

```sh
npx create-next-app -e with-tailwindcss spell-checker-app
```

This command is going to take a minute to set everything up. After generating the boilerplate, you will see a folder with the name `spell-checker-app` has been created. Open this folder in your preferred code editor. I am going to use [VSCode](https://code.visualstudio.com/) for the project.

### Project Files

When you open the project in your code editor, you will see the following directories and files in the root directory:

-   `pages` directory: Inside it, you will have files `index.js`, `_app.js`, and another directory called `api`. You only need to know about the - - - `index.js` file that is the main entry point in your project.
-   `public` directory: This directory contains icons. You place your static files here to load later in the application.
-   `node_modules`: It’s another directory that contains all the node modules you are using in your application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.

Before we move on to writing the code, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/spell-checker-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are some TailwindCSS configurations I have done specifically for this project. I have added some colors that you do not have by default with TailwindCSS and set some screen sizes.

Now let’s start writing the code. I am going to do it in steps so you can follow along.

### → STEP #1

Open the `pages/index.js` file and remove all the existing code. After this, copy-paste the following code there:

```js
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Spell <span className="text-active">Checker</span> App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Quickly See All Your Spelling Errors
			</h3>
		</div>
	);
}
```

It will create two headings for you with the text “Spell Checker App” and “Quickly See All Your Spelling Errors”. You can change it to anything you prefer.

### → STEP #2

Now let’s create a text area field and check the button. The text area will be the place where the user will paste or write content. The check button will allow the user to see if they have made any spelling mistakes or not.

For this, copy the following code and paste it in `pages/index.js`:

```js
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Spell <span className="text-active">Checker</span> App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Quickly See All Your Spelling Errors
			</h3>
			<div className="flex justify-between w-5/6 h-96 mt-8 md:flex-col md:items-center md:justify-start">
				<textarea
					type="text"
					className="border border-primary outline-none w-2/5 px-4 py-2 rounded-sm font-raleway md:w-full"
					placeholder="Write/paste any content..."
				/>
				<div className="flex items-center">
					<button className="h-1/6 outline-none border border-active font-bold font-raleway mx-12 px-12 rounded-sm bg-active text-primary transition duration-300 hover:bg-bc hover:text-black hover:border-primary md:h-16 md:my-12">
						Check
					</button>
				</div>
			</div>
		</div>
	);
}
```

This code is going to create an input field and button. I have also styled them a little bit using [TailwindCSS](<(https://tailwindcss.com/)>).

### → STEP #3

Let’s create some states to store the user input and the spelling error information that we will receive from the API. We also need to create a flag as a state variable that will be set to true if there is a spelling mistake and false if there is not.

For this, copy-paste the following code in `pages/index.js`.

```js
import {useState} from 'react';

export default function Home() {
	const [content, setContent] = useState('');
	const [spellCheckData, setSpellCheckData] = useState([]);
	const [spellErr, setSpellErr] = useState(true);

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Spell <span className="text-active">Checker</span> App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Quickly See All Your Spelling Errors
			</h3>
			<div className="flex justify-between w-5/6 h-96 mt-8 md:flex-col md:items-center md:justify-start">
				<textarea
					type="text"
					className="border border-primary outline-none w-2/5 px-4 py-2 rounded-sm font-raleway md:w-full"
					placeholder="Write/paste any content..."
				/>
				<div className="flex items-center">
					<button className="h-1/6 outline-none border border-active font-bold font-raleway mx-12 px-12 rounded-sm bg-active text-primary transition duration-300 hover:bg-bc hover:text-black hover:border-primary md:h-16 md:my-12">
						Check
					</button>
				</div>
			</div>
		</div>
	);
}
```

You can see that I have added an `onChange` event handler to set the state value as soon as the user writes something in the input field.

### → STEP #4

Let’s integrate the API now. For this, first, create a `.env.local` file and paste the following in it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY
```

You need to replace `YOUR-RAPIDAPI-KEY` here with the API key you got when you subscribed to the [JSpell Checker API](https://rapidapi.com/page-scholar-inc-page-scholar-inc-default/api/jspell-checker/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel). It is the value of `x-rapidapi-key` that you saved earlier.

Now download and add `axios` to your project. For this, run the following command in the terminal:

```sh
npm install axios
```

Now import `axios` at the top of the `pages/index.js`.

```js
import axios from ‘axios’;
```

### → STEP #5

We are going to use the `check` endpoint of the [JSpell Checker API](https://rapidapi.com/page-scholar-inc-page-scholar-inc-default/api/jspell-checker/?utm_source=guides.rapidapi.com&utm_medium=DevRel&utm_campaign=DevRel) to get the spell check information.

Create a file called `check` in the `pages/api` directory and copy-paste the following code there:

```js
import axios from 'axios';

export default async function handler(req, res) {
	if (req.method === 'POST') {
		var options = {
			method: 'POST',
			url: 'https://jspell-checker.p.rapidapi.com/check',
			headers: {
				'x-rapidapi-host': 'jspell-checker.p.rapidapi.com',
				'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
			},
			data: {
				language: 'enUS',
				fieldvalues: req.body.content,
				config: {
					forceUpperCase: false,
					ignoreIrregularCaps: false,
					ignoreFirstCaps: true,
					ignoreNumbers: true,
					ignoreUpper: false,
					ignoreDouble: false,
					ignoreWordsWithNumbers: true
				}
			}
		};

		axios
			.request(options)
			.then(function (response) {
				res.status(200).json(response.data);
			})
			.catch(function (error) {
				console.error(error);
				res.status(response.status);
			});
	} else {
		res.status(400);
	}
}
```

Now let’s create a function in the `pages/index.js` file to request the `/api/check` to get spell check details. You can just copy and replace the following code in `pages/index.js` file:

```js
import {useState} from 'react';
import axios from 'axios';

export default function Home() {
	const [content, setContent] = useState('');
	const [spellCheckData, setSpellCheckData] = useState([]);
	const [spellErr, setSpellErr] = useState(true);

	/**
	 *
	 *
	 * Fetch Spell Errors and Suggestions
	 */
	const fetchSpellErrSugg = async () => {
		try {
			const res = await axios.post(`/api/check`, {
				content
			});
			const {data} = res;

			if (data.spellingErrorCount === 0) {
				setSpellErr(false);
			}
			{
				const {elements} = data;
				setSpellCheckData(elements[0].errors);
				setSpellErr(true);
			}
		} catch (err) {
			console.log(err);
		}
	};

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Spell <span className="text-active">Checker</span> App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Quickly See All Your Spelling Errors
			</h3>
			<div className="flex justify-between w-5/6 h-96 mt-8 md:flex-col md:items-center md:justify-start">
				<textarea
					type="text"
					className="border border-primary outline-none w-2/5 px-4 py-2 rounded-sm font-raleway md:w-full"
					placeholder="Write/paste any content..."
					onChange={e => setContent(e.target.value)}
				/>
				<div className="flex items-center">
					<button
						className="h-1/6 outline-none border border-active font-bold font-raleway mx-12 px-12 rounded-sm bg-active text-primary transition duration-300 hover:bg-bc hover:text-black hover:border-primary md:h-16 md:my-12"
						onClick={fetchSpellErrSugg}
					>
						Check
					</button>
				</div>
				{spellErr ? (
					<div className="h-96 w-2/5 overflow-scroll md:w-full">
						<table className="bg-white w-full text-primary border-danger border md:text-sm md:mx-2">
							<thead className="font-raleway uppercase tracking-wide">
								<tr>
									<th className="border-danger border text-left px-4 py-4">
										Word
									</th>
									<th className="border-danger border text-left px-4 py-4">
										Suggestions
									</th>
								</tr>
							</thead>
							<tbody>
								{spellCheckData.map(obj => {
									return (
										<tr key={spellCheckData.indexOf(obj)}>
											<td className="border-danger border px-4 py-4">
												{obj.word}
											</td>
											<td className="border-danger border px-4 py-4">
												{`${obj.suggestions[0]}, ${obj.suggestions[1]}, ${obj.suggestions[2]}, ${obj.suggestions[3]}`}
											</td>
										</tr>
									);
								})}
							</tbody>
						</table>
					</div>
				) : (
					<h2 className="font-raleway font-bold text-3xl text-secondary pt-20 pb-6 md:text-3xl">
						No Spelling Error.{' '}
					</h2>
				)}
			</div>
		</div>
	);
}
```

You can see that I have created a function, `fetchSpellErrSugg`, for getting spell check details. I have also created a piece of UI that is conditionally rendering on the screen. A table will be shown on the screen by default. If there is no spelling mistake, the user will see a message that there is no spelling error.

## Wrap Up

That’s it. We have successfully built a [Spell Checker App](https://rapidapi-example-spell-checker.vercel.app/) using [JSpell Checker API](https://rapidapi.com/page-scholar-inc-page-scholar-inc-default/api/jspell-checker/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel). You can find the source code [here](​​https://github.com/RapidAPI/DevRel-Examples-External/blob/main/spell-checker-app) of this web app.

In the end, it will look something like this:

![Spell Checker App built with Next.js and JSpell Checker API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/7a04292c776f657636cc5ec14a42081b899d0a41/guides/posts/build-spell-checker-app/images/cover.png)


You often have to write detailed documents at work. They can be proposals, guides, some documentation, etc. You need to ensure that you are not making any spelling errors in such important documents. Let's build a spell checker app in this piece.

How to build a Spell Checker App Using Next.js and JSpell Checker API?


<Lead>

Every now and then we need to paraphrase some piece of content. There are a bunch of applications on the internet for this that you can use. You can also build your own application using any paraphrasing APIs. Instead of googling the appropriate API to use, you can look it up on [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).

</Lead>

[RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) provides you with thousands of these public APIs that you can use in your apps. Many APIs on [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) have free versions available, but you can also buy a premium version if the free version does not satisfy your need.

Today, I am building a web application that will paraphrase a piece of content provided to it. So without any further ado, let’s jump in.

## Stack

We need to choose a stack first to build this application. I have decided to go with the [Jamstack](https://jamstack.org/).

I am going to use [Next.js](https://nextjs.org/) for the client-side and [TailwindCSS](https://tailwindcss.com/) for the styling.

If you don’t know about Next.js, it is a JavaScript framework built on top of React and provides features like server-side rendering, static site generation, etc. Tailwind is a CSS framework that provides utility classes to speed up the development process.

## Choosing The API

Let’s find an API that we can use to paraphrase some content. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already and then search for “paraphrase” in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

You will see different search results related to all the available movie APIs. For this piece, I am using [Rewriter/Paraphraser/Text Changer (Multi-Language) API](https://rapidapi.com/smodin/api/rewriter-paraphraser-text-changer-multi-language?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel). To use this API, you need to subscribe to it first. You can do this by clicking on **Subscribe to Test** button.

![Subscribe to Rewriter/Paraphraser/Text Changer (Multi-Language) API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/7a04292c776f657636cc5ec14a42081b899d0a41/guides/posts/build-paraphrase-app/images/subscribe.png)

Once you click the button, you will be redirected to another page where different available subscription packages will be shown. Let’s go with the free one for now.

After all this, you will be redirected back to the original page. Here you will have a key `x-rapidapi-key`. Save it. It will be used later in the application.

## Building The UI

You can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal. So let’s do that.

```sh
npx create-next-app -e with-tailwindcss paraphrase-app
```

This command is going to take a minute to set everything up. After generating the boilerplate, you will see a folder with the name `paraphrase-app` has been created. Open this folder in your preferred code editor. I am going to use [VSCode](https://code.visualstudio.com/) for the project.

### Project Files

When you open the project in your code editor, you will see the following directories and files in the root directory:

-   `pages` directory: Inside it, you will have files `index.js`, `_app.js`, and another directory called `api`. You only need to know about the - - - `index.js` file that is the main entry point in your project.
-   `public` directory: This directory contains icons. You place your static files here to load later in the application.
-   `node_modules`: It’s another directory that contains all the node modules you are using in your application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.

Before we move on to writing the code, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/paraphrase-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are some TailwindCSS configurations I have done specifically for this project. I have added some colors that you do not have by default with TailwindCSS and set some screen sizes.

Now let’s start writing the code. I am going to do it in steps so you can follow along.

### → STEP #1

Open the `pages/index.js` file and remove all the existing code. After this, copy-paste the following code there:

```js
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				<span className="text-secondary">Paraphrase</span> App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Paraphrase any piece of content easily
			</h3>
		</div>
	);
}
```

It will create two headings for you with the text “Paraphrase App” and “Paraphrase any piece of content easily”. You can change it to anything you prefer.

### → STEP #2

Now let’s create two text areas, one for user content and the other for paraphrased content, and the paraphrase button. For this, copy the following code and paste it in `pages/index.js`:

```js
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				<span className="text-secondary">Paraphrase</span> App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Paraphrase any piece of content easily
			</h3>
			<div className="flex justify-between w-5/6 h-96 mt-8 md:flex-col md:items-center md:justify-start">
				<textarea
					type="text"
					className="border border-primary outline-none w-2/5 px-4 py-2 rounded-sm font-raleway md:w-full"
					placeholder="Write/paste any content..."
				/>
				<div className="flex items-center">
					<button className="h-1/6 outline-none border border-secondary font-bold font-raleway mx-12 px-12 rounded-sm bg-secondary text-primary transition duration-300 hover:bg-bc hover:text-black md:h-16 md:my-12">
						Paraphrase
					</button>
				</div>
				<textarea
					type="text"
					className="border border-primary outline-none w-2/5  px-4 py-2 rounded-sm font-raleway md:w-full"
					placeholder="Paraphrased content"
				/>
			</div>
		</div>
	);
}
```

This code is going to create two text areas and a button. I have also styled them a little bit using [TailwindCSS](<(https://tailwindcss.com/)>).

### → STEP #3

Let’s create some states to store the user content and the paraphrased content that we will receive from the API. For this, copy-paste the following code in `pages/index.js`.

```js
import {useState} from 'react';

export default function Home() {
	const [content, setContent] = useState(null);
	const [paraphrased, setParaphrased] = useState('');

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				<span className="text-secondary">Paraphrase</span> App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Paraphrase any piece of content easily
			</h3>
			<div className="flex justify-between w-5/6 h-96 mt-8 md:flex-col md:items-center md:justify-start">
				<textarea
					type="text"
					className="border border-primary outline-none w-2/5 px-4 py-2 rounded-sm font-raleway md:w-full"
					placeholder="Write/paste any content..."
					onChange={e => setContent(e.target.value)}
				/>
				<div className="flex items-center">
					<button className="h-1/6 outline-none border border-secondary font-bold font-raleway mx-12 px-12 rounded-sm bg-secondary text-primary transition duration-300 hover:bg-bc hover:text-black md:h-16 md:my-12">
						Paraphrase
					</button>
				</div>
				<textarea
					type="text"
					className="border border-primary outline-none w-2/5  px-4 py-2 rounded-sm font-raleway md:w-full"
					placeholder="Paraphrase content"
					value={paraphrased}
				/>
			</div>
		</div>
	);
}
```

You can see that I have added an `onChange` event handler to set the state value as soon as the user writes something in the input field. I am also setting the value of the text area that will show paraphrase content to the state variable `paraphrased`. It is going to show the paraphrased content when this state variable will update.

### → STEP #4

Let’s integrate the API now. For this, first, create a `.env.local` file and paste the following in it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY
```

You need to replace `YOUR-RAPIDAPI-KEY` here with the API key you got when you subscribed to the [Rewriter/Paraphraser/Text Changer (Multi-Language) API](https://rapidapi.com/smodin/api/rewriter-paraphraser-text-changer-multi-language?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel). It is the value of `x-rapidapi-key` that you saved earlier.

Now download and add `axios` to your project. For this, run the following command in the terminal:

```sh
npm install axios
```

Now import `axios` at the top of the `pages/index.js`.

```js
import axios from ‘axios’;
```

### → STEP #5

We are going to use the `Rewriter Endpoint` endpoint of the [Rewriter/Paraphraser/Text Changer (Multi-Language) API](https://rapidapi.com/smodin/api/rewriter-paraphraser-text-changer-multi-language?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel) to get the paraphrased content.

I am also going to use the code snippet of `(JavaScript) Axios` that [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) provides us.

![Fetching data using (JavaScript) Axios](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/7a04292c776f657636cc5ec14a42081b899d0a41/guides/posts/build-paraphrase-app/images/code-snippet.png)

Create a file called `paraphrase.js` in the `pages/api` directory and copy-paste the following code there:

```js
import axios from 'axios';

export default async function handler(req, res) {
	if (req.method === 'GET') {
		const options = {
			method: 'POST',
			url: 'https://rewriter-paraphraser-text-changer-multi-language.p.rapidapi.com/rewrite',
			headers: {
				'content-type': 'application/json',
				'x-rapidapi-host':
					'rewriter-paraphraser-text-changer-multi-language.p.rapidapi.com',
				'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
			},
			data: {language: 'en', strength: 3, text: req.query.content}
		};

		axios
			.request(options)
			.then(function (response) {
				res.status(200).json(response.data);
			})
			.catch(function (error) {
				console.error(error);
				res.status(response.status);
			});
	} else {
		res.status(400);
	}
}
```

Now let’s create a function in the `pages/index.js` file to request the `/api/paraphrase` to get the paraphrased content. You can just copy and replace the following code in `pages/index.js` file:

```js
import {useState} from 'react';
import axios from 'axios';

export default function Home() {
	const [content, setContent] = useState(null);
	const [paraphrased, setParaphrased] = useState('');

	/**
	 *
	 *
	 * Fetch the paraphrased content
	 */
	const fetchParaPhrasedText = async () => {
		try {
			setParaphrased(`Generating paraphrased article...`);
			const res = await axios.get(`/api/paraphrase`, {
				params: {content}
			});
			const {data} = res;
			setParaphrased(data.rewrite);
		} catch (err) {
			setParaphrased(`Couldn't generate paraphrased content.`);
			console.log(err);
		}
	};

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				<span className="text-secondary">Paraphrase</span> App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Paraphrase any piece of content easily
			</h3>
			<div className="flex justify-between w-5/6 h-96 mt-8 md:flex-col md:items-center md:justify-start">
				<textarea
					type="text"
					className="border border-primary outline-none w-2/5 px-4 py-2 rounded-sm font-raleway md:w-full"
					placeholder="Write/paste any content..."
					onChange={e => setContent(e.target.value)}
				/>
				<div className="flex items-center">
					<button
						className="h-1/6 outline-none border border-secondary font-bold font-raleway mx-12 px-12 rounded-sm bg-secondary text-primary transition duration-300 hover:bg-bc hover:text-black md:h-16 md:my-12"
						onClick={fetchParaPhrasedText}
					>
						Paraphrase
					</button>
				</div>
				<textarea
					type="text"
					className="border border-primary outline-none w-2/5  px-4 py-2 rounded-sm font-raleway md:w-full"
					placeholder="Paraphrased content"
					value={paraphrased}
				/>
			</div>
			<div className="absolute bottom-0 flex justify-center items-end h-52 md:h-44">
				<p className="text-primary pb-12 md:w-60 md:text-center">
					Made by RapidAPI DevRel Team –{' '}
					<a href="https://github.com/RapidAPI/DevRel-Examples-External">
						See Examples Like this
					</a>
				</p>
			</div>
		</div>
	);
}
```

You can see that I have created a function, `fetchParaPhrasedText`, for getting paraphrased content. It will fetch the content from the API and then show it to the user in the paraphrased text area.

## Wrap Up

That’s it. We have successfully built a [Paraphrase App](https://rapidapi-example-paraphrase-app.vercel.app/) using [Rewriter/Paraphraser/Text Changer (Multi-Language) API](https://rapidapi.com/smodin/api/rewriter-paraphraser-text-changer-multi-language?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel). You can find the source code [here](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/paraphrase-app) of this web app.

In the end, it will look something like this:

![Paraphrase App built with Next.js and Rewriter/Paraphraser/Text Changer (Multi-Language) API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/7a04292c776f657636cc5ec14a42081b899d0a41/guides/posts/build-paraphrase-app/images/cover.png)


Every now and then we need to paraphrase some piece of content. There are a bunch of applications on the internet for this that you can use. Let's build our own application just for this using an API from RapidAPI and Next.js.

How to build a Paraphrase App using Next.js and Paraphrase API?


<Lead>

There are a lot of different movie APIs available on the Internet. Instead of looking for them, you can visit [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and search for them. You will find a lot of different API options there.

</Lead>

[RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) provides you with thousands of these public APIs that you can use in your apps. Many APIs on [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) have free versions available, but you can also buy a premium version if the free version does not satisfy your need.

Today, I am building a web application that will show the details of a movie like its runtime, the year it was released, poster, etc., to the user. So without any further ado, let’s jump in.

## Stack

We need to choose a stack first to build this application. I have decided to go with the [Jamstack](https://jamstack.org/).

I am going to use [Next.js](https://nextjs.org/) for the client-side and [TailwindCSS](https://tailwindcss.com/) for the styling.

If you don’t know about Next.js, it is a JavaScript framework built on top of React and provides features like server-side rendering, static site generation, etc. Tailwind is a CSS framework that provides utility classes to speed up the development process.

## Choosing The API

Let’s find an API that we can use to fetch the movie information. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already and then search for “movies” in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

You will see different search results related to all the available movie APIs. For this piece, I am using [IMDb API](https://rapidapi.com/apidojo/api/imdb8/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) by [Api Dojo](https://rapidapi.com/user/apidojo?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).

To use this API, you need to subscribe to it first. You can do this by clicking on **Subscribe to Test** button.

![Subscribe to IMDb API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/7a04292c776f657636cc5ec14a42081b899d0a41/guides/posts/build-movie-details-app/images/subscribe.png)

Once you click the button, you will be redirected to another page where different available subscription packages will be shown. Let’s go with the free one for now.

After all this, you will be redirected back to the original page. Here you will have a key `x-rapidapi-key`. Save it. It will be used later in the application.

## Building The UI

You can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal. So let’s do that.

```sh
npx create-next-app -e with-tailwindcss movie-details-app
```

This command is going to take a minute to set everything up. After generating the boilerplate, you will see a folder with the name `movie-details-app` has been created. Open this folder in your preferred code editor. I am going to use [VSCode](https://code.visualstudio.com/) for the project.

### Project Files

When you open the project in your code editor, you will see the following directories and files in the root directory:

-   `pages` directory: Inside it, you will have files `index.js`, `_app.js`, and another directory called `api`. You only need to know about the - - - `index.js` file that is the main entry point in your project.
-   `public` directory: This directory contains icons. You place your static files here to load later in the application.
-   `node_modules`: It’s another directory that contains all the node modules you are using in your application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.

Before we move on to writing the code, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/movie-details-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are some TailwindCSS configurations I have done specifically for this project. I have added some colors that you do not have by default with TailwindCSS and set some screen sizes.

Now create a file called `next.config.js` and paste all the content from [here](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/movie-details-app/next.config.js) to this file. We are doing this because the API will provide us with the image URLs. We will use the Next.js Image component to render the image, and this component needs a domain property in the `next.config.js` file to render an image from a URL.

Now let’s start writing the code. I am going to do it in steps so you can follow along.

### → STEP #1

Open the `pages/index.js` file and remove all the existing code. After this, copy-paste the following code there:

```js
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Movie <span className="text-secondary">Details</span> App
			</h2>
			<h3 className="text-lightGrey text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Get info about any movie
			</h3>
		</div>
	);
}
```

It will create two headings for you with the text “Movie Details App” and “Get Info About Any Movie”. You can change it to anything you prefer.

### → STEP #2

Now let’s create an input field and search button. For this, copy the following code and paste it in `pages/index.js`:

```js
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Movie <span className="text-secondary">Details</span> App
			</h2>
			<h3 className="text-lightGrey text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Get info about any movie
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<div className="flex w-full justify-center md:flex-col md:w-5/6 ">
					<input
						type="text"
						className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm font-raleway md:w-full"
						placeholder="Search for any movie..."
					/>
					<button className="outline-none border border-danger font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-danger text-primary transition duration-300 hover:bg-bc hover:text-black md:ml-0 md:mt-4">
						Search
					</button>
				</div>
			</div>
		</div>
	);
}
```

This code is going to create an input field and button. I have also styled them a little bit using [TailwindCSS](<(https://tailwindcss.com/)>).

### → STEP #3

Let’s create some states to store the user input and the movie information we will receive from the API. For this, copy-paste the following code in `pages/index.js`.

```js
import {useState} from 'react';

export default function Home() {
	const [movieName, setMovieName] = useState(null);
	const [movieInfo, setMovieInfo] = useState(null);

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Movie <span className="text-secondary">Details</span> App
			</h2>
			<h3 className="text-lightGrey text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Get info about any movie
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<div className="flex w-full justify-center md:flex-col md:w-5/6 ">
					<input
						type="text"
						className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm font-raleway md:w-full"
						placeholder="Search for any movie..."
						onChange={e => setMovieName(e.target.value)}
					/>
					<button className="outline-none border border-danger font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-danger text-primary transition duration-300 hover:bg-bc hover:text-black md:ml-0 md:mt-4">
						Search
					</button>
				</div>
			</div>
		</div>
	);
}
```

You can see that I have added an `onChange` event handler to set the state value as soon as the user writes something in the input field.

### → STEP #4

Let’s integrate the API now. For this, first, create a `.env.local` file and paste the following in it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY
```

You need to replace `YOUR-RAPIDAPI-KEY` here with the API key you got when you subscribed to the [IMDb API](https://rapidapi.com/apidojo/api/imdb8/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel). It is the value of `x-rapidapi-key` that you saved earlier.

Now download and add `axios` to your project. For this, run the following command in the terminal:

```sh
npm install axios
```

Now import `axios` at the top of the `pages/index.js`.

```js
import axios from ‘axios’;
```

### → STEP #5

We are going to use the `title/find` endpoint of the [IMDb API](https://rapidapi.com/apidojo/api/imdb8/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) to get the details of the movie user want to see.

I am also going to use the code snippet of `(JavaScript) Axios` that [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) provides us.

![Fetching data using (JavaScript) Axios](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/7a04292c776f657636cc5ec14a42081b899d0a41/guides/posts/build-movie-details-app/images/code-snippet.png)

Create a file called `movie` in the `pages/api` directory and copy-paste the following code there:

```js
import axios from 'axios';

export default async function handler(req, res) {
	if (req.method === 'GET') {
		const options = {
			method: 'GET',
			url: 'https://imdb8.p.rapidapi.com/title/find',
			params: {q: req.query.movieName},
			headers: {
				'x-rapidapi-host': 'imdb8.p.rapidapi.com',
				'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
			}
		};

		axios
			.request(options)
			.then(function (response) {
				res.status(200).json(response.data);
			})
			.catch(function (error) {
				console.error(error);
				res.status(response.status);
			});
	} else {
		res.status(400);
	}
}
```

Now let’s create a function in the `pages/index.js` file to request the `http://localhost:3000/api/movie` for the movie details. You can just copy and replace the following code in `pages/index.js` file:

```js
import {useState} from 'react';
import Image from 'next/image';
import Link from 'next/link';
import axios from 'axios';

export default function Home() {
	const [movieName, setMovieName] = useState(null);
	const [movieInfo, setMovieInfo] = useState(null);

	/**
	 *
	 *
	 * Fetch Movie Info from the IMDB
	 */
	const fetchMovieInfo = async () => {
		try {
			const res = await axios.get(`http://localhost:3000/api/movie`, {
				params: {movieName}
			});
			const {data} = res;
			const {results} = data;
			setMovieInfo(results[0]);
		} catch (err) {
			console.log(err);
		}
	};

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Movie <span className="text-secondary">Details</span> App
			</h2>
			<h3 className="text-lightGrey text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Get info about any movie
			</h3>
			<div className="flex flex-col justify-between items-center w-full md:items-center">
				<div className="flex w-full justify-center md:flex-col md:w-5/6 ">
					<input
						type="text"
						className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm font-raleway md:w-full"
						placeholder="Search for any movie..."
						onChange={e => setMovieName(e.target.value)}
					/>
					<button
						className="outline-none border border-danger font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-danger text-primary transition duration-300 hover:bg-bc hover:text-black md:ml-0 md:mt-4"
						onClick={fetchMovieInfo}
					>
						Search
					</button>
				</div>
				{movieInfo && (
					<div className="flex mt-12 w-3/6 h-4/5 border border-primary md:flex-col md:w-4/6 md:h-full md:mb-12">
						<Image
							src={movieInfo.image.url}
							width={220}
							height={300}
							alt={movieInfo.title}
						/>
						<div className="flex flex-col justify-center ml-8 md:mt-6">
							<h2 className="text-primary text-xl text-raleway font-bold tracking-wider md:text-base">
								<span className="text-secondary uppercase">
									Title:{' '}
								</span>{' '}
								{movieInfo.title}
							</h2>
							<h2 className="text-primary text-xl text-raleway font-bold mt-8 tracking-wider md:text-base md:mt-6">
								<span className="text-secondary uppercase">
									Year:{' '}
								</span>{' '}
								{movieInfo.year}
							</h2>
							<h2 className="text-primary text-xl text-raleway font-bold mt-8 tracking-wider md:text-base md:mt-6">
								<span className="text-secondary uppercase">
									Run Time:{' '}
								</span>{' '}
								{movieInfo.runningTimeInMinutes}
							</h2>
							<Link href={`https://www.imdb.com${movieInfo.id}`}>
								<a>
									<button className="outline-none border border-danger font-bold font-raleway mt-8 px-12 py-2 rounded-sm bg-danger text-primary transition duration-300 hover:bg-bc hover:text-black md:ml-0 md:my-4">
										Visit on IMDB
									</button>
								</a>
							</Link>
						</div>
					</div>
				)}
			</div>
		</div>
	);
}
```

You can see that I have created a function, `fetchMovieInfo`, for getting movie details. I have also created a piece of UI that is conditionally rendering on the screen. If the state variable, `movieInfo`, changes from null to the movie details object, it renders on the screen with data from the `movieInfo` object.

## Wrap Up

That’s it. We have successfully built a [Movie Details App](https://rapidapi-example-movie-details-app.vercel.app/) using [IMDb API](https://rapidapi.com/apidojo/api/imdb8/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel). You can find the source code [here](​​https://github.com/RapidAPI/DevRel-Examples-External/blob/main/movie-details-app) of this web app.

In the end, it will look something like this:

![Movie Details App built with Next.js and IMDb API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/7a04292c776f657636cc5ec14a42081b899d0a41/guides/posts/build-movie-details-app/images/cover.png)


There are a lot of different movie APIs available on the Internet. Instead of looking for them, you can visit RapidAPI Hub and search for "movies" to see all the available APIs. Let's build a small movie app in this piece.

How to build a Movie Details App using Next.js and IMDb API?


<Lead>

Today, public APIs provide a fast and convenient way to develop an application. Whether a small tool-based application or a big eCommerce portal, these APIs can be very serviceable.

</Lead>

[RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) lets you choose from thousands of these public APIs for use in your projects. You can explore thousands of these on [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and select one for your next project.

Today, we will be building a web application that is about music. We will see how we can implement features provided by the likes of Shazam in our own music app. Let's build it.

## Stack

The stack for our app is going to be as follows. I am going to use [Next.js](https://nextjs.org/) for the client-side of our app and [TailwindCSS](https://tailwindcss.com/) for styling it.

Even if you don’t know about Next.js, being familiar with React will be enough for this guide. Tailwind is a CSS framework that provides utility classes to use directly in the markup, saving time during the development process.

## Choosing The API

Let’s find an API that provides Shazam-like features. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already. Then, search for "Shazam" in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

You will see that we have a lot of options for Shazam-related APIs. For our app, I am going to use the most popular one, [Shazam API](https://rapidapi.com/apidojo/api/shazam/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).

To use this API, you need to subscribe to it first. You can do this by clicking on the **Subscribe to Test** button.

![Subscribe to Shazam API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-music-app/images/subscribe.png)

Once you click the button, you will be redirected to the pricing page, which will show the subscription packages for the API. The free plan allows up to 500 requests per month. We are going to subscribe to the free plan for this guide.

Once subscribed, you will be back on the **Endpoints** page. In the central section, you should see a field named `x-rapidapi-key`. Save its value. We will need it later to call the API.

## Building The UI

We can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal.

```sh
npx create-next-app -e with-tailwindcss music-app
```

It will take some time to install the packages. After generating the boilerplate, you will see a folder with the name `music-app` has been created. Open this folder in your preferred code editor.

### Project Files

In our project folder, we will have the following folders and files. I will briefly break them down for you:

-   `pages` directory: It has the `index.js` file, which is the entry point of our app, basically the home page. It also has`_app.js` and another directory named `api` where we will store the requests to our API.
-   `public` directory: It holds assets. You can place your static files here to load later in the application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.

I will be using a particular set of colors for this app. You can use colors of your preference, but if you are interested in mine, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/music-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are Tailwind configurations for the colors I will be using.

With all that set, it's time to code the app. Let's jump right into it.

### → STEP #1

Open the `pages/index.js` file and remove all the existing code. Let's add the layout.

```js
export default function Home() {
	return (
		<div className="flex flex-col relative bg-background font-raleway items-center min-h-screen ">
			<h1 className="text-6xl text-primary font-bold mt-20">
				Music <span className="text-active">App</span>
			</h1>
			<h2 className="text-active text-2xl mt-6">
				Discover music using the Shazam API from RapidAPI Hub.
			</h2>
		</div>
	);
}
```

### → STEP #2

We want to add the functionality of searching for any music or artists using Shazam. So we will need an input field where the query will go. The query will be submitted by clicking a button, so let's add both of these.

```js
export default function Home() {
	return (
		<div className="flex flex-col relative bg-background font-raleway items-center min-h-screen ">
			<h1 className="text-6xl text-primary font-bold mt-20">
				Music <span className="text-active">App</span>
			</h1>
			<h2 className="text-active text-2xl mt-6">
				Discover music using the Shazam API from RapidAPI Hub.
			</h2>

			<div className="mt-12 sm:mx-auto justify-center sm:w-full sm:flex">
				<input
					type="text"
					className="block w-1/3 border border-transparent rounded-md px-5 py-3 text-base text-background shadow-sm focus:outline-none focus:border-transparent focus:ring-2 focus:ring-active"
					placeholder="Search for a song or an artist"
				/>
				<div className="mt-4 sm:mt-0 sm:ml-3">
					<button className="block w-full rounded-md px-5 py-3 bg-active text-base font-medium text-primary focus:outline-none focus:ring-2 focus:ring-primary sm:px-10">
						Search
					</button>
				</div>
			</div>
		</div>
	);
}
```

This code is going to create the search field and the submit button. I have also styled and made them responsive using [TailwindCSS](<(https://tailwindcss.com/)>).

### → STEP #3

Let’s create two states, `term` to store the user input and `response` to hold the response from the API.

```js
import {useState} from 'react';

export default function Home() {
	const [term, setTerm] = useState(null);
	const [response, setResponse] = useState(null);

	return (
		<div className="flex flex-col relative bg-background font-raleway items-center min-h-screen ">
			<h1 className="text-6xl text-primary font-bold mt-20">
				Music <span className="text-active">App</span>
			</h1>
			<h2 className="text-active text-2xl mt-6">
				Discover music using the Shazam API from RapidAPI Hub.
			</h2>

			<div className="mt-12 sm:mx-auto justify-center sm:w-full sm:flex">
				<input
					type="text"
					className="block w-1/3 border border-transparent rounded-md px-5 py-3 text-base text-background shadow-sm focus:outline-none focus:border-transparent focus:ring-2 focus:ring-active"
					placeholder="Search for a song or an artist"
					onChange={e => setTerm(e.target.value)} // Updating the state with input field value.
				/>

				<div className="mt-4 sm:mt-0 sm:ml-3">
					<button className="block w-full rounded-md px-5 py-3 bg-active text-base font-medium text-primary focus:outline-none focus:ring-2 focus:ring-primary sm:px-10">
						Search
					</button>
				</div>
			</div>
		</div>
	);
}
```

I am using the `setTerm(e.target.value)` to save the value of the input field in the state we just created, using the `onChange` event handler.

### → STEP #4

Let’s integrate the API now. For this, first, create a `.env.local` file in the root directory of your project and paste the following into it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY
```

Remember the `x-rapidapi-key` I asked you to save earlier? You need to replace `YOUR-RAPIDAPI-KEY` with its value. You get the key after subscribing to the [Shazam API](https://rapidapi.com/apidojo/api/shazam/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).

Now download and add `axios` to your project. For this, run the following command in the terminal:

```sh
npm install axios
```

And import `axios` in `pages/index.js`.

```js
import axios from ‘axios’;
```

### → STEP #5

The [Shazam API](https://rapidapi.com/apidojo/api/shazam/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) provides a bunch of very useful endpoints like list recommendations, song detection and global charts. You can see these endpoints on the left pane. For this guide, we are going to use the `search` endpoint.

![API Endpoints and (JavaScript) Axios Snippet](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-music-app/images/code-snippet.png)

We will send a GET request to search for songs and artists that match the input term. For easy integration, [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) automatically generates snippets in multiple languages and options. We are going to copy the `(JavaScript) Axios` one as you can see above.

Next, I am going to create a file named `search.js` in the `pages/api` directory and use the code snippet as follows:

```js
import axios from 'axios';

export default async function handler(req, res) {
	const options = {
		method: 'GET',
		url: 'https://shazam.p.rapidapi.com/search',
		params: {
			term: req.query.term,
			locale: 'en-US',
			offset: '0',
			limit: '10'
		}, // Parameters
		headers: {
			'x-rapidapi-host': 'shazam.p.rapidapi.com',
			'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY // Our API Key
		}
	};

	axios
		.request(options)
		.then(function (response) {
			res.status(200).json(response.data);
		})
		.catch(function (error) {
			console.error(error);
		});
}
```

We have specified the parameters. Our API call is ready. Now we need to create a function in the `pages/index.js` file to send the request from the client-side to our API at `http://localhost:3000/api/search`. You can just copy and replace the following code in `pages/index.js` file:

```js
import axios from 'axios';
import {useState} from 'react';

export default function Home() {
	const [term, setTerm] = useState(null);
	const [response, setResponse] = useState(null);

	/**
	 * Fetches search results for the input term
	 */
	const getSearchResults = async () => {
		try {
			const res = await axios.get('api/search/', {
				params: {term}
			});
			const {data} = res; // Destructuring response to extract data
			setResponse(data.tracks.hits); // Setting the response state
		} catch (error) {
			console.log(error);
		}
	};

	return (
		<div className="flex flex-col relative bg-background font-raleway items-center min-h-screen ">
			<Head>
				<title>RapidAPI Devrel Example - Music App</title>
				<link rel="icon" href="/favicon.ico" />
				<link
					href="https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;600;700;800&display=swap"
					rel="stylesheet"
				/>
			</Head>

			<h1 className="text-6xl text-primary font-bold mt-20">
				Music <span className="text-active">App</span>
			</h1>
			<h2 className="text-active text-2xl mt-6">
				Discover music using the Shazam API from RapidAPI Hub.
			</h2>

			<div className="mt-12 sm:mx-auto justify-center sm:w-full sm:flex">
				<input
					type="text"
					className="block w-1/3 border border-transparent rounded-md px-5 py-3 text-base text-background shadow-sm focus:outline-none focus:border-transparent focus:ring-2 focus:ring-active"
					placeholder="Search for a song or an artist"
					onChange={e => setTerm(e.target.value)}
				/>

				<div className="mt-4 sm:mt-0 sm:ml-3">
					<button
						className="block w-full rounded-md px-5 py-3 bg-active text-base font-medium text-primary focus:outline-none focus:ring-2 focus:ring-primary sm:px-10"
						onClick={() => getSearchResults()}
					>
						Search
					</button>
				</div>
			</div>
		</div>
	);
}
```

See the `getSearchResults` function I have created to get the response. It sends the `term` state holding our text input as the parameter. After receiving the response, it is stored in the `response` state. We are binding this function to the button we created, using the `onClick` event handler.

### → FINAL STEP

In the final step, we will display the results. The API returns an object having a number of songs that match our query. `data.tracks.hits` represents an array of objects, one object for each song. Each object has all the information you will need about the given song from its name to cover images.

We are going to use a map function to iterate through this array of objects. I will be displaying the title, subtitle, Shazam URL, and cover image of each song. For the design, I used a grid to organize cards for each song. Our final code looks like this:

```js
import axios from 'axios';
import {useState} from 'react';

export default function Home() {
	const [term, setTerm] = useState(null);
	const [response, setResponse] = useState(null);

	const getSearchResults = async () => {
		try {
			const res = await axios.get('api/search/', {
				params: {term}
			});
			const {data} = res;
			setResponse(data.tracks.hits);
		} catch (error) {
			console.log(error);
		}
	};

	return (
		<div className="flex flex-col relative bg-background font-raleway items-center min-h-screen ">
			<h1 className="text-6xl text-primary font-bold mt-20">
				Music <span className="text-active">App</span>
			</h1>
			<h2 className="text-active text-2xl mt-6">
				Discover music using the Shazam API from RapidAPI Hub.
			</h2>

			<div className="mt-12 sm:mx-auto justify-center sm:w-full sm:flex">
				<input
					type="text"
					className="block w-1/3 border border-transparent rounded-md px-5 py-3 text-base text-background shadow-sm focus:outline-none focus:border-transparent focus:ring-2 focus:ring-active"
					placeholder="Search for a song or an artist"
					onChange={e => setTerm(e.target.value)}
				/>

				<div className="mt-4 sm:mt-0 sm:ml-3">
					<button
						className="block w-full rounded-md px-5 py-3 bg-active text-base font-medium text-primary focus:outline-none focus:ring-2 focus:ring-primary sm:px-10"
						onClick={() => getSearchResults()}
					>
						Search
					</button>
				</div>
			</div>

			{response && (
				<div className="mt-16">
					<h3 className="text-secondary text-2xl">Search Results</h3>
					<div className="mt-6 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
						{response.map(song => (
							<div key={song.track.title} className="pt-6">
								<div className="flow-root bg-light rounded-lg px-4 pb-8">
									<div className="-mt-6">
										<div className="flex items-center justify-center">
											<span className="p-3 rounded-md shadow-lg">
												<img
													src={
														song.track.images
															.coverart
													}
													width={140}
													height={140}
													alt={song.track.title}
												/>
											</span>
										</div>
										<div className="text-center justify-center items-center">
											<h3 className="mt-2 text-lg text-center font-medium text-primary tracking-tight">
												{song.track.title}
											</h3>
											<span className="mt-2 mb-4 max-w-xs text-sm text-secondary block">
												{song.track.subtitle}
											</span>
											<a
												className="mt-5 text-sm text-active"
												href={song.track.url}
											>
												Open in Shazam
											</a>
										</div>
									</div>
								</div>
							</div>
						))}
					</div>
				</div>
			)}
		</div>
	);
}
```

This is what our app looks like:

![Music App built with Next.js and Shazam API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-music-app/images/music-app.png)

## Wrap Up

All done. Our [music app](https://rapidapi-example-music-app.vercel.app/) is ready. Just like this, you can utilize the remaining endpoints to create a full-fledged music application. Find the code of this web app [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/music-app).


Let's see how we can build a music app using Shazam API.

How to build a Music App app using Shazam API and Next.js?


<Lead>

Today, public APIs provide a fast and convenient way to develop an application. Whether a small tool-based application or a big eCommerce portal, these APIs can be very serviceable.

</Lead>

[RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) lets you choose from thousands of these public APIs for use in your projects. You can explore thousands of these on [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and select one for your next project.

In this guide, we will be building an application that generates QR Codes for any text input. QR codes allow you to share information quickly and seamlessly. They are used everywhere, from payment portals to social apps like Snapchat and WhatsApp. Let's build our own today.

## Stack

Let's decide the stack for our app. I am going to use [Next.js](https://nextjs.org/) for the client-side of our app and [TailwindCSS](https://tailwindcss.com/) for styling it.

Even if you don’t know about Next.js, being familiar with React will be enough for this guide. Tailwind is a CSS framework that provides utility classes to use directly in the markup, saving time during the development process.

## Choosing The API

Let’s find an API that we can send input to and get a QR Code as a response. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already. Then, search for "QR Code" in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

You will see that we have a lot of options for QR Code related APIs. For our app, I am going to use [qrcode utils API](https://rapidapi.com/digicatech/api/qrcodeutils/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).

To use this API, you need to subscribe to it first. You can do this by clicking on **Subscribe to Test** button.

![Subscribe to qrcode utils API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-qrcode-app/images/subscribe.png)

Once you click the button, you will be redirected to the pricing page to see the subscription packages for the API. We are going to subscribe to the free plan for this guide.

Once subscribed, you will be back on the **Endpoints** page. In the central section, you should see a field named `x-rapidapi-key`. Save its value. We will need it later to call the API.

## Building The UI

We can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal.

```sh
npx create-next-app -e with-tailwindcss qrcode-generator-app
```

It will take some time to install the packages. After generating the boilerplate, you will see a folder with the name `qrcode-generator-app` has been created. Open this folder in your preferred code editor.

### Project Files

In our project folder, we will have the following folders and files. I will briefly break them down for you:

-   `pages` directory: It has the `index.js` file, which is the entry point of our app, basically the home page. It also has`_app.js` and another directory named `api` where we will store the requests to our API.
-   `public` directory: It holds assets. You can place your static files here to load later in the application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.

I will be using a particular set of colors for this app. You can use colors of your preference, but if you are interested in mine, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/qrcode-generator-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are Tailwind configurations for the colors I will be using.

With all that set, it's time to code the app. Let's jump right into it.

### → STEP #1

Open the `pages/index.js` file and remove all the existing code. Let's add the layout.

```js
export default function Home() {
	return (
		<div className="flex flex-col relative bg-grey font-mono items-center min-h-screen border-t-2 border-active">
			<h1 className="text-6xl font-bold text-primary mt-20">
				QR Code <span className="text-active">Generator</span>
			</h1>
			<h2 className="text-active text-2xl mt-6">
				Generate a QR Code for sharing your content.
			</h2>
		</div>
	);
}
```

### → STEP #2

The next thing we need is an input field where the text will go. There should also be a button to generate the QR Code. Let's add these.

```js
export default function Home() {
	return (
		<div className="flex flex-col relative bg-grey font-mono items-center min-h-screen border-t-2 border-active">
			<h1 className="text-6xl font-bold text-primary mt-20">
				QR Code <span className="text-active">Generator</span>
			</h1>
			<h2 className="text-active text-2xl mt-6">
				Generate a QR Code for sharing your content.
			</h2>
			<input
				type="text"
				placeholder="Enter a link, number or any text to generate the QR Code"
				className="mt-10 text-sm w-1/2 p-4 rounded"
			></input>
			<button className="mt-6 p-4 bg-active hover:opacity-90 rounded text-primary font-bold inline-flex">
				Generate QR Code
			</button>
		</div>
	);
}
```

This code is going to create an input field and a button. I have also styled them a little bit using [TailwindCSS](<(https://tailwindcss.com/)>).

### → STEP #3

Let’s create some states to store the user input and the response from the API.

```js
import {useState} from 'react';

export default function Home() {
	// States
	const [input, setInput] = useState(null);
	const [response, setResponse] = useState(null);
	return (
		<div className="flex flex-col relative bg-grey font-mono items-center min-h-screen border-t-2 border-active">
			<h1 className="text-6xl font-bold text-primary mt-20">
				QR Code <span className="text-active">Generator</span>
			</h1>
			<h2 className="text-active text-2xl mt-6">
				Generate a QR Code for sharing your content.
			</h2>
			<input
				type="text"
				placeholder="Enter a link, number or any text to generate the QR Code"
				className="mt-10 text-sm w-1/2 p-4 rounded"
				onChange={e => setInput(e.target.value)}
			></input>
			<button className="mt-6 p-4 bg-active hover:opacity-90 rounded text-primary font-bold inline-flex">
				Generate QR Code
			</button>
		</div>
	);
}
```

Also, I am using the `setInput(e.target.value)` to save the value of the input field in the state we just created, using the `onChange` event handler.

### → STEP #4

Let’s integrate the API now. For this, first, create a `.env.local` file and paste the following in it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY
```

Remember the `x-rapidapi-key` I asked you to save earlier? You need to replace `YOUR-RAPIDAPI-KEY` with its value. You get the key after subscribing to the [qrcode utils API](https://rapidapi.com/digicatech/api/qrcodeutils/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).

Now download and add `axios` to your project. For this, run the following command in the terminal:

```sh
npm install axios
```

And import `axios` in `pages/index.js`.

```js
import axios from ‘axios’;
```

### → STEP #5

We are going to send a GET request to get the QR Code for our input. For easy integration, [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) automatically generates snippets in multiple languages and options. We are going to use the `(JavaScript) Axios` one.

![Fetching data using (JavaScript) Axios](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-qrcode-app/images/code-snippet.png)

Next, I am going to create a file named `qrcode.js` in the `pages/api` directory and use the code snippet there as follows:

```js
import axios from 'axios';

export default async function handler(req, res) {
	if (req.method === 'GET') {
		const options = {
			method: 'GET',
			url: 'https://qrcodeutils.p.rapidapi.com/qrcodefree',
			params: {
				text: req.query.input,
				validate: 'true',
				size: '150',
				type: 'svg', // type: svg, png etc
				level: 'M' // level of validation
			},
			headers: {
				'x-rapidapi-host': 'qrcodeutils.p.rapidapi.com',
				'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
			}
		};

		axios
			.request(options)
			.then(function (response) {
				res.status(200).json(response.data);
			})
			.catch(function (error) {
				console.error(error);
			});
	} else {
		res.status(400);
	}
}
```

We have also specified the parameters. Our API call is ready. Let’s create a function in the `pages/index.js` file to send the request from the client-side to our API at `http://localhost:3000/api/qrcode` for the QR code. You can just copy and replace the following code in `pages/index.js` file:

```js
import axios from 'axios';
import {useState} from 'react';

export default function Home() {
	const [input, setInput] = useState(null);
	const [response, setResponse] = useState(null);

	/**
	 * Fetches QR Code of the text input
	 */
	const getQrcode = async () => {
		try {
			const res = await axios.get('api/qrcode/', {
				params: {input}
			});
			setResponse(res.data);
		} catch (error) {
			console.log(error);
		}
	};

	return (
		<div className="flex flex-col relative bg-grey font-mono items-center min-h-screen border-t-2 border-active">
			<Head>
				<title>QR Code Generator</title>
				<link rel="icon" href="/favicon.ico" />
			</Head>

			<h1 className="text-6xl font-bold text-primary mt-20">
				QR Code <span className="text-active">Generator</span>
			</h1>
			<h2 className="text-active text-2xl mt-6">
				Generate a QR Code for sharing your content.
			</h2>
			<input
				type="text"
				placeholder="Enter a link, number or any text to generate the QR Code"
				className="mt-10 text-sm w-1/2 p-4 rounded"
				onChange={e => setInput(e.target.value)}
			></input>
			<button
				className="mt-6 p-4 bg-active hover:opacity-90 rounded text-primary font-bold inline-flex"
				onClick={() => getQrcode()}
			>
				Generate QR Code
			</button>
		</div>
	);
}
```

See the `getQrcode` function I have created to get the response. It sends the `input` state holding our text input as the parameter. After receiving the response, it is stored in the `response` state. It is time for the final step, where we will display the QR Code.

### → FINAL STEP

The API returns the QR Code in SVG format. To display it directly, install a library `react-inlinesvg` by running the command:

```sh
npm install react-inlinesvg
```

and import it:

```js
import SVG from 'react-inlinesvg';
```

Finally, we can render the QR Code SVG by checking the `response` state.

```js
import axios from 'axios';
import {useState} from 'react';
import SVG from 'react-inlinesvg';

export default function Home() {
	const [input, setInput] = useState(null);
	const [response, setResponse] = useState(null);

	const getQrcode = async () => {
		try {
			const res = await axios.get('api/qrcode/', {
				params: {input}
			});

			setResponse(res.data);
		} catch (error) {
			console.log(error);
		}
	};
	// Standard snippet to download the QR Code svg
	const downloadQrcode = () => {
		const url = window.URL.createObjectURL(new Blob([response]));
		const urlObject = document.createElement('a');
		urlObject.href = url;
		urlObject.setAttribute('download', 'file.svg');
		document.body.appendChild(urlObject);
		urlObject.click();
	};

	return (
		<div className="flex flex-col relative bg-grey font-mono items-center min-h-screen border-t-2 border-active">
			<h1 className="text-6xl font-bold text-primary mt-20">
				QR Code <span className="text-active">Generator</span>
			</h1>
			<h2 className="text-active text-2xl mt-6">
				Generate a QR Code for sharing your content.
			</h2>
			<input
				type="text"
				placeholder="Enter a link, number or any text to generate the QR Code"
				className="mt-10 text-sm w-1/2 p-4 rounded"
				onChange={e => setInput(e.target.value)}
			></input>
			<button
				className="mt-6 p-4 bg-active hover:opacity-90 rounded text-primary font-bold inline-flex"
				onClick={() => getQrcode()}
			>
				Generate QR Code
			</button>

			{response && (
				<div className="mt-10 bg-active">
					<SVG src={response} />
					<button
						className="w-full text-primary text-base p-1"
						onClick={() => downloadQrcode()}
					>
						Download
					</button>
				</div>
			)}
		</div>
	);
}
```

The library takes the response and renders the SVG for us. I also used a snippet in the `downloadQrcode` function, which does what it says, allows users to download the QR Code.

## Wrap Up

All done. We have successfully built a QR Code Generator app. You can find the code of this web app [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/qrcode-generator-app). This is what it looks like:

![QR Code Generator built with Next.js and QRcode API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-qrcode-app/images/qrcode-generator-app.png)


Let's build an app that will generate a QR code for a given input.

How to build a QR Code Generator app using Next.js and a QR Code API?


<Lead>

There are several public APIs out there that you can use to develop small to large-scale applications. You do not have to create a new feature from scratch, and you can just find an API of it and use it to implement the feature.

</Lead>

[RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) provides you with thousands of these public APIs that you can use in your apps. Many APIs on [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) have free versions available, but you can also buy a premium version if the free version does not satisfy your need.

Today, I am building an application that will show the user coronavirus stats of any country they enter. So without any further ado, let’s jump in.

## Stack

We need to choose a stack first to build this application. I have decided to go with the [Jamstack](https://jamstack.org/).

I am going to use [Next.js](https://nextjs.org/) for the client-side and [TailwindCSS](https://tailwindcss.com/) for the styling.

If you don’t know about Next.js, it is a JavaScript framework built on top of React and provides features like server-side rendering, static site generation, etc. Tailwind is a CSS framework that provides utility classes to speed up the development process.

## Choosing The API

Let’s find an API that we can use to fetch the COVID-19 stats. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already and then search for "covid-19" in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

You will see different search results related to COVID-19 APIs. For this piece, I am using [COVID-19 data API](https://rapidapi.com/Gramzivi/api/covid-19-data/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).

To use this API, you need to subscribe to it first. You can do this by clicking on **Subscribe to Test** button.

![Subscribe to COVID-19 data API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-covid-app/images/subscribe.jpg)

Once you click the button, you will be redirected to another page where different available subscription packages will be shown. Let’s go with the free one for now.

After all this, you will be redirected back to the original page. Here you will have a key `x-rapidapi-key`. Save it. It will be used later in the application.

## Building The UI

You can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal. So let’s do that.

```sh
npx create-next-app -e with-tailwindcss covid-stats-app
```

This command is going to take a minute to set everything up. After generating the boilerplate, you will see a folder with the name `covid-stats-app` has been created. Open this folder in your preferred code editor. I am going to use [VSCode](https://code.visualstudio.com/) for the project.

### Project Files

When you open the project in your code editor, you will see the following directories and files in the root directory:

-   `pages` directory: Inside it, you will have files `index.js`, `_app.js`, and another directory called - - - `api`. You only need to know about the `index.js` file that is the main entry point in your project.
-   `public` directory: This directory contains icons. You place your static files here to load later in the application.
-   `node_modules`: It’s another directory that contains all the node modules you are using in your application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.

Before we move on to writing the code, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/covid-stats-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are some TailwindCSS configurations I have done specifically for this project. I have added some colors that you do not have by default with TailwindCSS and set some screen sizes.

Now let’s start writing the code. I am going to do it in steps so you can follow along.

### → STEP #1

Open the `pages/index.js` file and remove all the existing code. After this, copy-paste the following code there:

```js
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				COVID-19 <span className="text-danger">Stats</span> App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Track COVID-19 Spread Across the World
			</h3>
		</div>
	);
}
```

It will create two headings for you with the text "COVID-19 Stats App" and "Track COVID-19 Spread Across the World". You can change it to anything you prefer.

### → STEP #2

Now let’s create an input field and search button. For this, copy the following code and paste it in `pages/index.js`:

```js
export default function Home() {
	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				COVID-19 <span className="text-danger">Stats</span> App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Track COVID-19 Spread Across the World
			</h3>
			<div className="flex flex-col justify-between w-full md:items-center">
				<div className="flex w-full justify-center md:flex-col md:w-5/6 ">
					<input
						type="text"
						className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm font-raleway md:w-full"
						placeholder="Search for any country stats..."
					/>
					<button className="outline-none border border-danger font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-danger text-primary transition duration-300 hover:bg-bc hover:text-black md:ml-0 md:mt-4">
						Search
					</button>
				</div>
			</div>
		</div>
	);
}
```

This code is going to create an input field and button. I have also styled them a little bit using [TailwindCSS](<(https://tailwindcss.com/)>).

### → STEP #3

Let’s create some states to store the user input and the stats we will receive from the API. For this, copy-paste the following code in `pages/index.js`.

```js
import {useState} from 'react';

export default function Home() {
	const [country, setCountry] = useState(null);
	const [stats, setStats] = useState(null);

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				COVID-19 <span className="text-danger">Stats</span> App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Track COVID-19 Spread Across the World
			</h3>
			<div className="flex flex-col justify-between w-full md:items-center">
				<div className="flex w-full justify-center md:flex-col md:w-5/6 ">
					<input
						type="text"
						className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm font-raleway md:w-full"
						placeholder="Search for any country stats..."
						onChange={e => setCountry(e.target.value)}
					/>
					<button className="outline-none border border-danger font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-danger text-primary transition duration-300 hover:bg-bc hover:text-black md:ml-0 md:mt-4">
						Search
					</button>
				</div>
			</div>
		</div>
	);
}
```

You can see that I have added an `onChange` event handler to set the state value as soon as the user writes something in the input field.

### → STEP #4

Let’s integrate the API now. For this, first, create a `.env.local` file and paste the following in it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY
```

You need to replace `YOUR-RAPIDAPI-KEY` here with the API key you got when you subscribed to the [COVID-19 data API](https://rapidapi.com/Gramzivi/api/covid-19-data/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel). It is the value of `x-rapidapi-key` that you saved earlier.

Now download and add `axios` to your project. For this, run the following command in the terminal:

```sh
npm install axios
```

Now import `axios` at the top of the `pages/index.js`.

```js
import axios from ‘axios’;
```

### → STEP #5

We are going to use the `getLatestCountryDataByName` endpoint of the [COVID-19 data API](https://rapidapi.com/Gramzivi/api/covid-19-data/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) to get the country-specific COVID-19 stats. I am also going to use the code snippet of `(JavaScript) Axios` that [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) provides us.

![Fetching data using (JavaScript) Axios](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-covid-app/images/code-snippet.jpg)

Create a file called `stats` in the `pages/api` directory and copy-paste the following code there:

```js
import axios from 'axios';

export default async function handler(req, res) {
	if (req.method === 'GET') {
		const options = {
			method: 'GET',
			url: 'https://covid-19-data.p.rapidapi.com/country',
			params: {name: req.query.country},
			headers: {
				'x-rapidapi-host': 'covid-19-data.p.rapidapi.com',
				'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
			}
		};

		axios
			.request(options)
			.then(function (response) {
				res.status(200).json(response.data);
			})
			.catch(function (error) {
				console.error(error);
				res.status(response.status);
			});
	} else {
		res.status(400);
	}
}
```

Now let’s create a function in the `pages/index.js` file to request the `http://localhost:3000/api/stats` for the COVID-19 statistics. You can just copy and replace the following code in `pages/index.js` file:

```js
import axios from 'axios';
import {useState} from 'react';

export default function Home() {
	const [country, setCountry] = useState(null);
	const [stats, setStats] = useState(null);

	/**
	 *
	 *
	 * Fetches COVID-19 Stats of a country
	 */
	const fetchStats = async () => {
		try {
			const res = await axios.get(`http://localhost:3000/api/stats`, {
				params: {country}
			});
			const {data} = res;
			setStats(data[0]);
		} catch (err) {
			console.log(err);
		}
	};

	return (
		<div className="flex flex-col items-center relative min-h-screen">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				COVID-19 <span className="text-danger">Stats</span> App
			</h2>
			<h3 className="text-danger text-2xl font-raleway font-bold uppercase tracking-wide mb-12 md:text-base md:px-4 md:text-center">
				Track COVID-19 Spread Across the World
			</h3>
			<div className="flex flex-col justify-between w-full md:items-center">
				<div className="flex w-full justify-center md:flex-col md:w-5/6 ">
					<input
						type="text"
						className="border-none outline-none w-2/5 bg-primary px-4 py-2 rounded-sm font-raleway md:w-full"
						placeholder="Search for any country stats..."
						onChange={e => setCountry(e.target.value)}
					/>
					<button
						className="outline-none border border-danger font-bold font-raleway ml-4 px-12 py-2 rounded-sm bg-danger text-primary transition duration-300 hover:bg-bc hover:text-black md:ml-0 md:mt-4"
						onClick={fetchStats}
					>
						Search
					</button>
				</div>
				{stats && (
					<div className="flex justify-center mt-12 h-4/5 md:w-full overflow-scroll">
						<table className="text-primary border-danger border w-3/5 md:text-sm md:mx-2">
							<thead className="font-raleway uppercase tracking-wide">
								<tr>
									<th className="border-danger border text-left px-4 py-4">
										Country
									</th>
									<th className="border-danger border text-left px-4 py-4">
										Confirmed
									</th>
									<th className="border-danger border text-left px-4 py-4">
										Recovered
									</th>
									<th className="border-danger border text-left px-4 py-4">
										Deaths
									</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td className="border-danger border px-4 py-4">
										{stats.country}
									</td>
									<td className="border-danger border px-4 py-4">
										{stats.confirmed}
									</td>
									<td className="border-danger border px-4 py-4">
										{stats.recovered}
									</td>
									<td className="border-danger border px-4 py-4">
										{stats.deaths}
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				)}
			</div>
		</div>
	);
}
```

You can see that I have created a function, `fetchStats`, for getting the statistics. I am also creating a table to display and conditionally rendering it on the screen to display the statistics as soon as the user receives them.

## Wrap Up

This is it. We have successfully built a [COVID Stats App](https://rapidapi-example-covid-stats.vercel.app/) using the [COVID-19 data API](https://RapidAPI.com/Gramzivi/api/covid-19-data/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel). You can find the code of this web app [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/covid-stats-app?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel). It will look something like this:

![COVID Stats Application built with Next.js and COVID-19 data API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-covid-app/images/covid-stats-app.png)


In this piece, I am going to show you how you can build an application that will show the user coronavirus stats of any country they enter.

How to build a COVID-19 Stats app using Next.js and COVID-19 API?


<Lead>

There are a lot of APIs out there that you can use for your projects. But finding these APIs often becomes a hassle. [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) is the world’s largest API hub and it can provide you with all the APIs you need. Anyone can look up any API they need in seconds and also monetize their APIs.

</Lead>

Today, I have decided to use one of the APIs from [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and develop a small application using it. I am going to build a news application using an API from Microsoft.

## Stack

We need to choose a stack first to build this application. Since the application consumes an API and does not need a backend, let’s go with the [Jamstack](https://jamstack.org/).

I am going to use [Next.js](https://nextjs.org/) for the client-side and [TailwindCSS](https://tailwindcss.com/) for the styling.

If you don’t know about Next.js, it is a JavaScript framework built on top of React and provides features like server-side rendering, static site generation, etc. Tailwind is a CSS framework that provides utility classes to speed up the development process.

## Choosing The API

Let’s decide which API we are going to use. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already and then search for "news" in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

I am going to use the [Bing News Search API](https://RapidAPI.com/microsoft-azure-org-microsoft-cognitive-services/api/bing-news-search1/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) by Microsoft Azure.

To use this API, you need to subscribe to it first. You can do this by clicking on **Subscribe to Test** button.

![Subscribe to Bing News Search API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-news-app/images/subscribe.jpg)

Once you click the button, you will be redirected to another page where different available subscription packages will be shown. Let’s go with the free one for now.

After all this, you will be redirected back to the original page. Here you will have a key `x-rapidapi-key`. Save it. It will be used later in the application.

## Building The UI

You can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal. So let’s do that.

```sh
npx create-next-app -e with-tailwindcss news-app
```

This command is going to take a minute to set everything up. After it is finished generating the boilerplate, you will see a folder with the name `news-app` has been created. Open this folder in your preferred code editor. I am going to use [VSCode](https://code.visualstudio.com/) for the project.

### Project Files

When you open the project in your code editor, you will see the following directories and files in the root directory:

-   `pages` directory: Inside it, you will have files `index.js`, `_app.js`, and another directory called `api`. You only need to know about the `index.js` file that is the main entry point in your project.
-   `public` directory: This directory contains icons. You place your static files here to load later in the application.
-   `node_modules`: It’s another directory that contains all the node modules you are using in your application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.

Before we move on to writing the code, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/news-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are some TailwindCSS configurations I have done specifically for this project. I have added some colors that you do not have by default with TailwindCSS and also have set some screen sizes.

Now let’s start writing the code. I am going to do it in steps so you can follow along.

### → STEP #1

Open the`pages/index.js` file and remove all the existing code. After this, copy-paste the following code there:

```js
export default function Home() {
	return (
		<div className="bg-bc min-h-screen">
			<div className="flex justify-center">
				<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-10 md:text-4xl">
					News Application
				</h2>
			</div>
			<div className="flex justify-center items-center flex-col">
				<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-10 md:text-lg">
					Get Top <span className="text-danger">News</span> Quickly
				</h3>
			</div>
		</div>
	);
}
```

It is going to create two headings for you with the text "News Application" and "Get Top News Quickly". You can change it to anything you prefer.

### → STEP #2

Let’s integrate the API now. For this, first create a `.env.local` file and paste the following in it:

```sh
NEXT_PUBLIC_BING_NEWS_API_KEY=YOUR-RAPIDAPI-KEY
```

You need to replace `YOUR-RAPIDAPI-KEY` here with the API key you got when you subscribed to the [Bing News Search](https://RapidAPI.com/microsoft-azure-org-microsoft-cognitive-services/api/bing-news-search1/) API. It is the value of `x-rapidapi-key` that you saved earlier.

Now download and add `axios` in your project. For this, run the following command in the terminal:

```sh
npm install axios
```

Now import `axios` at the top of the `pages/index.js`.

```js
import axios from ‘axios’;
```

<Callout>
	RapidAPI Hub provides you with code snippets in different languages for
	integrating the API.
</Callout>

I am going to use the [(JavaScript) Axios](https://www.npmjs.com/package/axios) one.

![Fetching data using (JavaScript) Axios](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-news-app/images/javascript-axios.jpg)

Now create a file with the name `news` inside the `pages/api` directory. This is going to create a REST API endpoint for you. The endpoint point will look like this:

```sh
http://localhost:3000/api/news
```

Now copy the following code from this file:

```js
import axios from 'axios';

export default async function handler(req, res) {
	if (req.method === 'GET') {
		var options = {
			method: 'GET',
			url: 'https://bing-news-search1.p.rapidapi.com/news',
			params: {safeSearch: 'Off', textFormat: 'Raw'},
			headers: {
				'x-bingapis-sdk': 'true',
				'x-rapidapi-host': 'bing-news-search1.p.rapidapi.com',
				'x-rapidapi-key': process.env.NEXT_PUBLIC_BING_NEWS_API_KEY
			}
		};

		axios
			.request(options)
			.then(function (response) {
				const {data} = response;
				const {value} = data;

				res.status(200).json(value);
			})
			.catch(function (error) {
				console.error(error);
			});
	} else {
		res.status(400);
	}
}
```

This code is making an API call to the Bing News API on the server and returns the results to the user. It is going to execute when the user makes an API call to the `user` endpoint I have mentioned above.

Once you are done, copy the following code in the `pages/index.js` file:

```js
import Link from 'next/link';
import axios from 'axios';

export default function Home({value}) {
	return (
		<div className="bg-bc min-h-screen">
			<div className="flex justify-center">
				<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-10 md:text-4xl">
					News Application
				</h2>
			</div>
			<div className="flex justify-center items-center flex-col">
				<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-10 md:text-lg">
					Get Top <span className="text-danger">News</span> Quickly
				</h3>
				{value.map(news => {
					return (
						<Link href={news.url}>
							<div className="flex items-center text-lg px-10 mb-10 font-light font-raleway h-32 w-3/6 rounded-sm border-2 border-danger text-lightYellow cursor-pointer transition duration-300 hover:border-primary hover:text-danger md:w-80 md:h-40">
								<h3>{news.name}</h3>
							</div>
						</Link>
					);
				})}
			</div>
		</div>
	);
}

export async function getServerSideProps() {
	const res = await axios.get('https://localhost:3000/api/news');
	const {data: value} = res;

	if (!value) {
		return {
			notFound: true
		};
	}

	return {
		props: {
			value
		}
	};
}
```

I am using the Next.js `getServerSideProps` function to fetch the data from the server. It is going to make my application server-side, and the user will never see a loading state.

<Callout>

You can also use `getStaticProps` instead of `getServerSideProps` and the application will then fetch the data at build time.

</Callout>

Once the data is fetched, I am converting the response to JSON and then using object destructuring to extract the property `value`.

This `value` property is passed to my component as props. Since it is an array, I have mapped it to show all the data with a few lines of code. You will also see that the `div` that I am returning from the `map` function has a `Link` component. This component links different news containers to their news URLs.

## Wrap Up

This is it. We have successfully built a [news application](https://RapidAPI-example-news-app.vercel.app/) using the [Bing News Search](https://RapidAPI.com/microsoft-azure-org-microsoft-cognitive-services/api/bing-news-search1/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) API. You can find the code of this web app [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/news-app). It will look something like this:

![News Application built with Next.js And Bing News Search API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-news-app/images/news-app.png)


In this piece, I am going to show you how you can build a news application using an API from RapidAPI Hub and Next.js.

How to build a News app using Next.js and News API?


<Lead>

There are thousands of APIs available on [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) that you can use to build different products. [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) provides you with a broad category of APIs ranging from Finance to Payments. Today, I have decided to use a [Currency Conversion API](https://RapidAPI.com/principalapis/api/currency-conversion-and-exchange-rates/) from [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) to build a small application that will convert one concurrency to another. So without any further ado, let’s jump in.

</Lead>

## Stack

We need to choose a stack first to build this application. I have decided to go with the [Jamstack](https://jamstack.org/) since we will make a couple of API calls without having a proper backend.

I am going to use [Next.js](https://nextjs.org/) for the client-side and [TailwindCSS](https://tailwindcss.com/) for the styling.

If you don’t know about Next.js, it is a JavaScript framework built on top of React and provides features like server-side rendering, static site generation, etc. Tailwind is a CSS framework that provides utility classes to speed up the development process.

## Choosing The API

Let’s decide which API we are going to use. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already and then search for "currency conversion" in the search section.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

I am using [Currency Conversion and Exchange Rates API](https://rapidapi.com/principalapis/api/currency-conversion-and-exchange-rates/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) by [Principal APIs](https://rapidapi.com/user/principalapis/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).

To use this API, you need to subscribe to it first. You can do this by clicking on **Subscribe to Test** button.

![Subscribe to Currency Conversion and Exchange Rates API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-currency-conversion-app/images/subscribe.jpg)

Once you click the button, you will be redirected to another page where different available subscription packages will be shown. Let’s go with the free one for now.

After all this, you will be redirected back to the original page. Here you will have a key `x-rapidapi-key`. Save it. It will be used later in the application.

## Building The UI

You can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal. So let’s do that.

```sh
npx create-next-app -e with-tailwindcss currency-converter-app
```

This command is going to take a minute to set everything up. After it is finished generating the boilerplate, you will see a folder with the name `currency-converter-app` has been created. Open this folder in your preferred code editor. I am going to use [VSCode](https://code.visualstudio.com/) for the project.

### Project Files

When you open the project in your code editor, you will see the following directories and files in the root directory:

-   `pages` directory: Inside it, you will have files `index.js`, `_app.js`, and another directory called `api`. You only need to know about the - - - `index.js` file that is the main entry point in your project.
-   `public` directory: This directory contains icons. You place your static files here to load later in the application.
-   `node_modules`: It’s another directory that contains all the node modules you are using in your application.
-   `package.json`: This file contains the metadata of your project.
-   `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
-   `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md`: It’s a markdown file for documentation.

Before we move on to writing the code, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/currency-converter-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are some TailwindCSS configurations I have done specifically for this project. I have added some colors that you do not have by default with TailwindCSS and also have set some screen sizes.

Now let’s start writing the code. I am going to do it in steps so you can follow along.

### → STEP #1

Open the`pages/index.js` file and remove all the existing code. After this, copy-paste the following code there:

```js
export default function Home() {
	return (
		<div className="flex flex-col items-center">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Currency <span className="text-danger">Conversion</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-14 md:text-base md:px-4 md:text-center">
				Convert Different Concurrencies Quickly
			</h3>
		</div>
	);
}
```

It is going to create two headings for you with the text "Currency Conversion App" and "Convert Different Concurrencies Quickly". You can change it to anything you prefer.

### → STEP #2

Now create a new folder called `components` in the root directory. Inside it, create a new file called `Input.js`. Now copy-paste the following code inside this file:

```js
const Input = ({dropdown, onChange, label, symbols}) => {
	const arrOfSymbols = Object.keys(symbols);

	return (
		<div className="flex flex-col h-16 mb-12">
			<label
				htmlFor={label}
				className="text-primary text-2xl font-raleway pb-2 font-bold"
			>
				{label}
			</label>
			{(dropdown && (
				<select
					name="countries"
					onChange={e => onChange(e.target.value)}
					className="px-4 py-2 rounded"
				>
					{arrOfSymbols.map(symbol => (
						<option
							value={symbol}
							key={arrOfSymbols.indexOf(symbol)}
						>
							{symbols[symbol]}
						</option>
					))}
				</select>
			)) || (
				<input
					type="number"
					placeholder="Enter amount..."
					className="border-none outline-none bg-primary px-4 py-2 rounded-sm font-raleway"
					onChange={e => onChange(e.target.value)}
				/>
			)}
		</div>
	);
};

export default Input;
```

It is a separate component that I have created for adding input fields in my application. If the dropdown value is set to `true`, the `Input` component will render a dropdown list. The list is going to show the user different currency options.

This component is receiving `symbols` object as a prop. The `symbols` object contains different currency exchange options. I have created a separate array for the keys of the `symbol` object. Later, I am mapping this array to generate the dropdown list.

If the dropdown value is set to `false`, the Input component will render a text field that will only accept numbers.

The component is also receiving `onChange` function, which I have set to both the dropdown and input text field’s `onChange` event. Now, if the value of input fields changes, the `onChange` function will trigger.

### → STEP #3

Let’s integrate the API now. For this, first, create a `.env.local` file and paste the following in it:

```sh
NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY
```

You need to replace `YOUR-RAPIDAPI-KEY` here with the API key you got when you subscribed to the [Currency Conversion and Exchange Rates API](https://rapidapi.com/principalapis/api/currency-conversion-and-exchange-rates/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel). It is the value of `x-rapidapi-key` that you saved earlier.

Now download and add `axios` in your project. For this, run the following command in the terminal:

```sh
npm install axios
```

Now import `axios` at the top of the `pages/index.js`.

```js
import axios from ‘axios’;
```

### → STEP #4

There are more than 190+ countries in the world. Since almost everyone has a different currency, it was challenging to write down their three code currency symbols.

The [Currency Conversion and Exchange Rates API](https://rapidapi.com/principalapis/api/currency-conversion-and-exchange-rates/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) provides an endpoint that can get you all these symbols as a response. I am going to this endpoint along with the code snippet [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) provides us.

![Symbols endpoint of Currency Conversion and Exchange Rates API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-currency-conversion-app/images/symbols-endpoint.jpg)

For this, create a `symbol.js` file in `pages/api` directory, and paste the following code in it:

```js
import axios from 'axios';

export default async function handler(req, res) {
	if (req.method === 'GET') {
		const options = {
			method: 'GET',
			url: 'https://currency-conversion-and-exchange-rates.p.rapidapi.com/symbols',
			headers: {
				'x-rapidapi-host':
					'currency-conversion-and-exchange-rates.p.rapidapi.com',
				'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
			}
		};

		axios
			.request(options)
			.then(function (response) {
				res.status(200).json(response.data);
			})
			.catch(function (error) {
				console.error(error);
			});
	} else {
		res.status(400);
	}
}
```

Now copy-paste the following code, and put it inside the `pages/index.js` file:

```js
import {useState} from 'react';
import axios from 'axios';
import Input from '../components/Input';

export default function Home({symbols}) {
	const [convertFrom, setConvertFrom] = useState('ANG');
	const [convertTo, setConvertTo] = useState('ANG');
	const [amount, setAmount] = useState(null);

	return (
		<div className="flex flex-col items-center">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Currency <span className="text-danger">Conversion</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-14 md:text-base md:px-4 md:text-center">
				Convert Different Concurrencies Quickly
			</h3>
			<div className="flex flex-col justify-between w-3/6 md:w-5/6">
				<Input
					label="Convert from"
					dropdown={true}
					onChange={setConvertFrom}
					symbols={symbols}
				/>
				<Input
					label="To Currency"
					dropdown={true}
					onChange={setConvertTo}
					symbols={symbols}
				/>
				<Input
					label="Your Amount"
					dropdown={false}
					onChange={setAmount}
					symbols={{}}
				/>
				<button className="bg-danger w-2/5 border-none outline-none py-2 rounded uppercase font-raleway transition duration-300 hover:shadow-custom pointer">
					Convert
				</button>
			</div>
		</div>
	);
}

export async function getServerSideProps() {
	const res = await axios.get('http://localhost:3000/api/symbol');
	const {data} = res;
	const {symbols} = data;

	if (!symbols) {
		return {
			notFound: true
		};
	}

	return {
		props: {
			symbols
		}
	};
}
```

I am using server-side rendering so that all the currency symbols fetches before the application loads. I have also created different states to store the data.

I have used the `Input` component that we created earlier to render different fields on the viewport. I am sending the `onChange` prop in the `Input` component that will get triggered when the value of the input field changes.

### → STEP #5

Now let’s convert the currency. For this, we are going to use a different endpoint of our API.

![Covert endpoint of Currency Conversion and Exchange Rates API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-currency-conversion-app/images/convert-endpoint.jpg)

For this, create a `convert.js` file in the `pages/api` directory and paste the following code there:

```js
import axios from 'axios';

export default async function handler(req, res) {
	if (req.method === 'GET') {
		console.log(req.query.convertFrom);
		const options = {
			method: 'GET',
			url: 'https://currency-conversion-and-exchange-rates.p.rapidapi.com/convert',
			params: {
				from: `${req.query.convertFrom}`,
				to: `${req.query.convertTo}`,
				amount: `${req.query.amount}`
			},
			headers: {
				'x-rapidapi-host':
					'currency-conversion-and-exchange-rates.p.rapidapi.com',
				'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
			}
		};

		axios
			.request(options)
			.then(function (response) {
				res.status(200).json(response.data);
			})
			.catch(function (error) {
				console.error(error);
			});
	} else {
		res.status(400);
	}
}
```

Now open the `pages/index.js` file and copy-paste the following code there:

```js
import {useState} from 'react';
import axios from 'axios';
import Input from '../components/Input';

export default function Home({symbols}) {
	const [convertFrom, setConvertFrom] = useState('ANG');
	const [convertTo, setConvertTo] = useState('ANG');
	const [amount, setAmount] = useState(null);
	const [convertedAmount, setConvertedAmount] = useState(null);

	/**
	 *
	 *
	 * Fetch the converted amount
	 */
	const convertCurrency = () => {
		const options = {
			method: 'GET',
			url: 'http://localhost:3000/api/convert',
			params: {convertFrom, convertTo, amount}
		};

		axios
			.request(options)
			.then(function (response) {
				const {data} = response;
				setConvertedAmount(Math.floor(data.result));
			})
			.catch(function (error) {
				console.error(error);
			});
	};

	return (
		<div className="flex flex-col items-center">
			<h2 className="font-raleway font-bold text-6xl text-primary pt-20 pb-6 md:text-3xl">
				Currency <span className="text-danger">Conversion</span> App
			</h2>
			<h3 className="text-secondary text-2xl font-raleway font-bold uppercase tracking-wide mb-14 md:text-base md:px-4 md:text-center">
				Convert Different Concurrencies Quickly
			</h3>
			<div className="flex flex-col justify-between w-3/6 md:w-5/6">
				<Input
					label="Convert from"
					dropdown={true}
					onChange={setConvertFrom}
					symbols={symbols}
				/>
				<Input
					label="To Currency"
					dropdown={true}
					onChange={setConvertTo}
					symbols={symbols}
				/>
				<Input
					label="Your Amount"
					dropdown={false}
					onChange={setAmount}
					symbols={{}}
				/>
				<button
					className="bg-danger w-2/5 border-none outline-none py-2 rounded uppercase font-raleway transition duration-300 hover:shadow-custom pointer"
					onClick={convertCurrency}
				>
					Convert
				</button>
				{convertedAmount && (
					<div className="flex w-3/5 rounded border-primary text-primary my-6 md:w-full">
						<p className="font-raleway font-bold text-lg uppercase tracking-wider md:text-base">
							Converted Amount: <span className="text-danger">{`${convertedAmount} ${convertTo}`}</span>
						</p>
					</div>
				)}
			</div>
		</div>
	);
}

export async function getServerSideProps() {
	const res = await axios.get('http://localhost:3000/api/symbol');
	const {data} = res;
	const {symbols} = data;

	if (!symbols) {
		return {
			notFound: true
		};
	}

	return {
		props: {
			symbols
		}
	};
}
```

You can see that I have added another function called `convertCurrency` that will trigger when the user clicks on the `Convert` button. Inside the function, I am making an API call to my Next.js API `convert` route. This API route will request the [Currency Conversion and Exchange Rates API](https://rapidapi.com/principalapis/api/currency-conversion-and-exchange-rates/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and then send the response it receives to the client.

I have created another state variable to store the converted amount. When the request is successful at client-side, the converted amount is stored to the `convertedAmount` state variable.

When the `convertedAmount` changes from null to some other value, it will trigger a UI piece that will show the converted amount.

## Wrap Up

This is it. We have successfully built a [Currency Converter application](https://rapidapi-example-currency-conversion.vercel.app/) using the [Currency Conversion and Exchange Rates API](https://rapidapi.com/principalapis/api/currency-conversion-and-exchange-rates/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel). You can find the code of this web app [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/currency-converter-app?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel). It will look something like this:

![Currency Conversion application built using Next.js and Currency Conversion and Exchange Rates API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-currency-conversion-app/images/currency-conversion-app.png)


In this piece, I am going to show you how you can build a Currency Conversion app using Currency Conversion API from RapidAPI Hub and Next.js.

How to build a Currency Conversion App using Next.js and Currency Conversion API?


<Lead>
	RapidAPI Hub is the world’s largest API hub with more than 35,000 APIs
	available. Anyone can build an API and monetize it on RapidAPI. The
	developers use these APIs in their applications. They can try the API for
	free, and if they like it, they can purchase them.
</Lead>

Today, I have decided to use one of the APIs from [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and build a small application from it. Let’s build this application together.

## Stack

Let’s start by choosing the web stack. I am a huge fan of Jamstack (JavaScript, API, and Markdown). So, let’s go with it in this example.

I am using [Next.js](https://nextjs.org/) for the framework and [Tailwind CSS](https://tailwindcss.com/) for the styling.

If you don’t know about Next.js, it is a JavaScript framework built on top of React and provides features like server-side rendering, static site generation, etc. Tailwind is a CSS framework that provides utility classes to speed up the development process.

## Finding The API

The next thing we have to do is find the API we will be using. For this, head over to the [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and create an account. Once you do that, search for a "weather" API.

<Callout
	title="Deep dive"
	linkText="Read more"
	linkHref="https://rapidapi.com/learn/hub"
>
	Learn more about how to use RapidAPI Hub.
</Callout>

I have decided to go with the first result, i.e., [Open Weather Map](https://RapidAPI.com/community/api/open-weather-map/) API. It has a popularity of 9.9 out of 10. Its latency is 367ms and provides a 100% service level.

To use the API, you need to subscribe to it first. For this, all you need to do is click on the Subscribe button, and you will be directed to another page.

![Subscribe to Open Weather Map API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-weather-app/images/weather-api.jpg)

Here you will be asked to choose any of the available packages. Let’s go with the free package that has a hard limit of 500 requests per month. Subscribe to it.

You will be directed back to the endpoint section now. Your API key is written here in front of the label `X-RapidAPI-Key`. You will need it later in the application.

## Setting Up The UI

Now let’s create a Next.js app that has Tailwind CSS integrated inside of it. For this, open your terminal and type the following there:

```sh
npx create-next-app -e with-tailwindcss weather-app
```

This command is going to take a minute to set everything up. After it is finished generating the boilerplate, you will see a folder with the name `weather-app` has been created. Open this folder in your preferred code editor. I am going to use [VSCode](https://code.visualstudio.com/) for the project.

### Project Files

When you will open the project in your code editor, you will see the following directories and files in the root directory:

-   `pages` directory — Inside it, you will have files `index.js`, `_app.js`, and another directory called `api`. You only need to know about the `index.js` file that is the main entry point in your project.
-   `public` directory — This directory contains icons. You place your static files here to load later in the application.
-   `node_modules` — It’s another directory that contains all the node modules you are using in your application.
-   `package.json` — This file contains the metadata of your project.
-   `package-lock.json` — This file is responsible for tracking the exact version of every package that is installed.
-   `postcss.config.js` — This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
-   `tailwind.config.js` — It contains [TailwindCSS](https://tailwindcss.com/) configurations.
-   `readme.md` — It’s a markdown file for documentation.

Now let’s create the user interface of our application. I am going to do it in steps.

### → STEP #1

Open the `pages/index.js` file and remove all the boilerplate code. You can copy-paste the following code in your `index.js` file.

```js
export default function Home() {
	return (
		<div className="flex justify-center items-center h-screen flex-col">
			<div>
				<h2 className="font-raleway text-5xl font-extrabold mb-10 sm:text-4xl">
					Weather App
				</h2>
			</div>
		</div>
	);
}
```

You can see I have created a div that has another div inside of it that contains an h2 heading.

### → STEP #2

Let’s create a search box and a button now. You can build it however you like. I am going with the minimal design. So I am putting the input box and the button side by side.

Here is the code so far till this step:

```js
export default function Home() {
 return (
  <div className="flex justify-center items-center h-screen flex-col">
   <div>
    <h2 className="font-raleway text-5xl font-extrabold mb-10 sm:text-4xl">
     Weather App
    </h2>
   </div>
  </div>
     <div className="flex sm:flex-col">
    <input
     type="text"
     placeholder="City..."
     className="outline-indigo mr-6 rounded-sm pl-4 w-64 font-raleway sm:mr-0 sm:mb-4 sm:py-1"
    />
    <button
     className="outline-none border-none font-bold font-raleway px-12 py-2 rounded-sm bg-indigo-300 text-gray-700 transition duration-300 hover:bg-indigo-600 hover:text-white"
    >
     Search
    </button>
   </div>
 );
}
```

### → STEP #3

We need to show the temperature now. The template for this will be conditionally rendered on the screen. So to do that, we need to create states. Based on the data inside the states, we can then conditionally render the template on the screen.

We also need to do error handling in case the API responds with status code 404.

Here is the code till this point:

```js
import {useState} from 'react';
import axios from 'axios';

export default function Home() {
	const [temp, setTemp] = useState(null);
	const [minTemp, setMinTemp] = useState('');
	const [maxTemp, setMaxTemp] = useState('');
	const [err, setErr] = useState(false);

	return (
		<div className="flex justify-center items-center h-screen flex-col">
			<div>
				<h2 className="font-raleway text-5xl font-extrabold mb-10 sm:text-4xl">
					Weather App
				</h2>
			</div>
			<div className="flex sm:flex-col">
				<input
					type="text"
					placeholder="City..."
					className="outline-indigo mr-6 rounded-sm pl-4 w-64 font-raleway sm:mr-0 sm:mb-4 sm:py-1"
					onChange={e => setCity(e.target.value)}
				/>
				<button
					onClick={getWeather}
					className="outline-none border-none font-bold font-raleway px-12 py-2 rounded-sm bg-indigo-300 text-gray-700 transition duration-300 hover:bg-indigo-600 hover:text-white"
				>
					Search
				</button>
			</div>
			{temp && (
				<div className="mt-10 flex flex-col justify-start bg-indigo-200 px-12 py-4 rounded font-raleway text-xl font-semibold text-gray-700 sm:text-base sm:px-8">
					<div className="flex mb-4">
						<p className="w-64 sm:w-41">Temperature:</p>
						<p>{temp} ° C</p>
					</div>
					<div className="flex mb-4 sm:w-41">
						<p className="w-64">Temperature Min:</p>
						<p>{minTemp}° C</p>
					</div>
					<div className="flex">
						<p className="w-64 sm:w-41">Temperature Max:</p>
						<p>{maxTemp}° C</p>
					</div>
				</div>
			)}
			{err && (
				<div className="mt-10 bg-red-200 px-12 py-4 rounded font-raleway text-xl font-semibold text-gray-700 sm:text-base sm:px-8">
					<p>Couldn't fetch weather results.</p>
				</div>
			)}
		</div>
	);
}
```

## Integrating the API

It’s time to integrate the API now. For this, create a `.env.local` file in the root directory. You need to place your API key here that you received when you subscribed to the API.

Copy the following in the `.env.local` and replace the `Your-RapidAPI-Key` with the API key.

```sh
NEXT_PUBLIC_OPEN_WEATHER_API_KEY=Your-Rapid-Key
```

You can use the fetch API for making the API call but I am going to use `axios` instead. Open your terminal and type the following there:

```sh
npm install axios
```

Once installed, import `axios` at the top. You can do this like this:

```js
import axios from ‘axios’;
```

RapidAPI Hub provides you with code snippets in different languages for integrating the API. I am going to use the (JavaScript) Axios one.

![Fetching data using (JavaScript) Axios](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-weather-app/images/code-snippet.jpg)

Now I need to save the user input in the state variable ‘city`so it can be sent through the API later. For this, I am setting the`onChange`event in the`input`tag. I am also writing a`getWeather` function that will make the API call when the search button is clicked. Once the API provides a response, the data will be saved in the state variables.

Here is the code so far:

```js
import {useState} from 'react';
import axios from 'axios';

export default function Home() {
	const [city, setCity] = useState('');
	const [temp, setTemp] = useState(null);
	const [minTemp, setMinTemp] = useState('');
	const [maxTemp, setMaxTemp] = useState('');
	const [err, setErr] = useState(false);

	/**
	 *
	 * fetch weather information of the given city
	 */
	const getWeather = () => {
		// resetting states
		setErr(false);
		setTemp(null);

		const options = {
			method: 'GET',
			url: 'https://community-open-weather-map.p.rapidapi.com/weather',
			params: {q: `${city}`, units: 'metric'},
			headers: {
				'x-rapidapi-host': 'community-open-weather-map.p.rapidapi.com',
				'x-rapidapi-key': process.env.NEXT_PUBLIC_OPEN_WEATHER_API_KEY
			}
		};

		axios
			.request(options)
			.then(function (response) {
				console.log(response.data);
				const {data} = response;
				const newTemp = Math.ceil(data.main.temp);
				const newMinTemp = Math.ceil(data.main.temp_min);
				const newMaxTemp = Math.ceil(data.main.temp_max);

				setTemp(newTemp);
				setMinTemp(newMinTemp);
				setMaxTemp(newMaxTemp);
			})
			.catch(function (error) {
				console.error(error);
				setErr(true);
			});
	};

	return (
		<div className="flex justify-center items-center h-screen flex-col">
			<div>
				<h2 className="font-raleway text-5xl font-extrabold mb-10 sm:text-4xl">
					Weather App
				</h2>
			</div>
			<div className="flex sm:flex-col">
				<input
					type="text"
					placeholder="City..."
					className="outline-indigo mr-6 rounded-sm pl-4 w-64 font-raleway sm:mr-0 sm:mb-4 sm:py-1"
					onChange={e => setCity(e.target.value)}
				/>
				<button
					onClick={getWeather}
					className="outline-none border-none font-bold font-raleway px-12 py-2 rounded-sm bg-indigo-300 text-gray-700 transition duration-300 hover:bg-indigo-600 hover:text-white"
				>
					Search
				</button>
			</div>
			{temp && (
				<div className="mt-10 flex flex-col justify-start bg-indigo-200 px-12 py-4 rounded font-raleway text-xl font-semibold text-gray-700 sm:text-base sm:px-8">
					<div className="flex mb-4">
						<p className="w-64 sm:w-41">Temperature:</p>
						<p>{temp} ° C</p>
					</div>
					<div className="flex mb-4 sm:w-41">
						<p className="w-64">Temperature Min:</p>
						<p>{minTemp}° C</p>
					</div>
					<div className="flex">
						<p className="w-64 sm:w-41">Temperature Max:</p>
						<p>{maxTemp}° C</p>
					</div>
				</div>
			)}
			{err && (
				<div className="mt-10 bg-red-200 px-12 py-4 rounded font-raleway text-xl font-semibold text-gray-700 sm:text-base sm:px-8">
					<p>Couldn't fetch weather results.</p>
				</div>
			)}
		</div>
	);
}
```

If you take a look at the `getWeather` function, you will see I have copy-pasted the code snippet that RapidAPI Hub provided me earlier.

## Wrap Up

This is it. We have successfully built a weather application using the Open Weather Map API. It will look something like this:

[![Weather App built using Open Weather Map API](https://raw.githubusercontent.com/RapidAPI/DevRel-Stack-Data/production/guides/posts/build-weather-app/images/app.png)](https://rapidapi-example-weather-app.vercel.app/)

If you want to take a look at the code, you can find it [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/weather-app). I have also deployed it on Vercel. Here is the live [link](https://rapidapi-example-weather-app.vercel.app/) to it.


In this piece, let's build a weather application using an API from RapidAPI Hub and Next.js.

Apps