+
+ );
+}
+```
+
+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 (
+ + Anime App +
++ Search and look for your favorite anime +
+
+
+ );
+}
+```
+
+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 (
+ + Anime App +
++ Search and look for your favorite anime +
+
+
+
+
+
+ );
+}
+```
+
+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.
+
+
+
+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 (
+ + Anime App +
++ Search and look for your favorite anime +
+
+
+
+
+
+ );
+}
+```
+
+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:
+
+
diff --git a/guides/posts/build-anime-suggestion-app/images/code-snippet.png b/guides/posts/build-anime-suggestion-app/images/code-snippet.png
new file mode 100644
index 00000000..98f797a4
Binary files /dev/null and b/guides/posts/build-anime-suggestion-app/images/code-snippet.png differ
diff --git a/guides/posts/build-anime-suggestion-app/images/cover.png b/guides/posts/build-anime-suggestion-app/images/cover.png
new file mode 100644
index 00000000..1f56fff2
Binary files /dev/null and b/guides/posts/build-anime-suggestion-app/images/cover.png differ
diff --git a/guides/posts/build-anime-suggestion-app/images/subscribe.png b/guides/posts/build-anime-suggestion-app/images/subscribe.png
new file mode 100644
index 00000000..fbf3df9f
Binary files /dev/null and b/guides/posts/build-anime-suggestion-app/images/subscribe.png differ
diff --git a/guides/posts/build-anime-suggestion-app/post.md b/guides/posts/build-anime-suggestion-app/post.md
new file mode 100644
index 00000000..dfd360d9
--- /dev/null
+++ b/guides/posts/build-anime-suggestion-app/post.md
@@ -0,0 +1,382 @@
+---
+title: How to build an Anime Suggestion App Using Anime Recommender API?
+description: "We often want to watch animes similar to what we have already watched. It can become a hassle looking up these animes on the internet. Fortunately, we can build an app for it. Let's take a look at how you can build such app from scratch using an API from RapidAPI Hub."
+publishedDate: 2022-03-06T19:27:34.794Z
+lastModifiedDate: 2022-03-06T19:27:34.794Z
+authors:
+ - saad
+categories:
+ - apps
+tags:
+ - anime
+ - anime-suggestion-app
+ - api
+coverImage: ''
+---
+
++ Anime App +
++ Search and look for your favorite anime +
+
+
+ {searchRes &&
+ searchRes.map(animeDetail => (
+
+
+
+ ))}
+
+
+
+
+
+
+
+
+ + Title +
++ {animeDetail.title}{' '} +
+
+
+ + Popularity +
++ {animeDetail.score}{' '} +
+
+
+ + Rated +
++ {animeDetail.rated} +
+
+
+ + Synopsis +
++ {animeDetail.synopsis} +
+
+
+ + Made by RapidAPI DevRel Team -{' '} + + See more examples like this + +
+
+
+ );
+}
+```
+
+It will create two headings for you with the text “Anime Suggestion App” and “Get anime suggestion based on your favorite anime”. You can change it to anything you prefer.
+
+### → STEP #2
+
+Now let’s create an input field where use can write anime name and recommendation button. For this, copy the following code and paste it in `pages/index.js`:
+
+```jsx
+export default function Home() {
+ return (
+ + Anime Suggestion App +
++ Get anime suggestion based on your favorite anime +
+
+
+ );
+}
+```
+
+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 anime name and the anime information we will receive from the API. For this, copy-paste the following code in `pages/index.js`.
+
+```jsx
+import {useState} from 'react';
+import axios from 'axios';
+import Image from 'next/image';
+
+export default function Home() {
+ const [anime, setAnime] = useState('Death Note');
+ const [response, setResponse] = useState(null);
+
+ return (
+ + Anime Suggestion App +
++ Get anime suggestion based on your favorite anime +
+
+
+
+
+
+ );
+}
+```
+
+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 [Anime Recommender API](https://RapidAPI.com/uruguay-nomas-uruguay-nomas-default/api/anime-recommender?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
+
+RapidAPI Hub provides you with code snippets in different languages for integrating the API. I am going to use the `(JavaScript) Axios` one.
+
+
+
+Now create a file with the name `suggestion.js` inside the `pages/api` directory. It is going to make a REST API endpoint for you. The endpoint point will look like this:
+
+```sh
+http://localhost:3000/api/suggestion
+```
+
+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://anime-recommender.p.rapidapi.com/',
+ params: {anime_title: req.query.anime, number_of_anime: '5'},
+ headers: {
+ 'x-rapidapi-host': 'anime-recommender.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);
+ }
+}
+```
+
+This code makes an API call to the [Anime Recommender API](https://RapidAPI.com/uruguay-nomas-uruguay-nomas-default/api/anime-recommender?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 `suggestion` 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';
+import Image from 'next/image';
+
+export default function Home() {
+ const [anime, setAnime] = useState('Death Note');
+ const [response, setResponse] = useState(null);
+ const [btnText, setBtnText] = useState('Get Suggestions');
+
+ /**
+ *
+ *
+ * Fetch Anime Recommendations
+ */
+ const fetchAnimeSuggestions = async e => {
+ e.preventDefault();
+ try {
+ setBtnText('Getting Suggestions...');
+ const res = await axios.get(`/api/suggestion`, {
+ params: {
+ anime
+ }
+ });
+
+ if (res.data.data !== 'Anime Not Found') {
+ setResponse(res.data.data);
+ }
+ } catch (err) {
+ console.log(err);
+ }
+ setBtnText('Get Suggestions');
+ };
+
+ return (
+ + Anime Suggestion App +
++ Get anime suggestion based on your favorite anime +
+
+
+
+
+
+ );
+}
+```
+
+You can see that I have created a function, `fetchAnimeSuggestions`, to request the API. I have also created a piece of UI that is conditionally rendering on the screen based on the `response` state variable value.
+
+## Wrap Up
+
+That’s it. We have successfully built a [Anime Suggestion App](https://rapidapi-example-anime-suggestion-app.vercel.app/) using [Anime Recommender API](https://RapidAPI.com/uruguay-nomas-uruguay-nomas-default/api/anime-recommender?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/anime-suggestion-app) of this web app.
+
+In the end, it will look something like this:
+
+
diff --git a/guides/posts/build-bmi-calculator-app/images/code-snippet.png b/guides/posts/build-bmi-calculator-app/images/code-snippet.png
new file mode 100644
index 00000000..d1bffd71
Binary files /dev/null and b/guides/posts/build-bmi-calculator-app/images/code-snippet.png differ
diff --git a/guides/posts/build-bmi-calculator-app/images/cover.png b/guides/posts/build-bmi-calculator-app/images/cover.png
new file mode 100644
index 00000000..0c00e707
Binary files /dev/null and b/guides/posts/build-bmi-calculator-app/images/cover.png differ
diff --git a/guides/posts/build-bmi-calculator-app/images/subscribe.png b/guides/posts/build-bmi-calculator-app/images/subscribe.png
new file mode 100644
index 00000000..29dcdcc8
Binary files /dev/null and b/guides/posts/build-bmi-calculator-app/images/subscribe.png differ
diff --git a/guides/posts/build-bmi-calculator-app/post.md b/guides/posts/build-bmi-calculator-app/post.md
new file mode 100644
index 00000000..c8cb8d1a
--- /dev/null
+++ b/guides/posts/build-bmi-calculator-app/post.md
@@ -0,0 +1,360 @@
+---
+title: How to build a BMI Calculator App using BMI Calculator API?
+description:
+ Health is important, especially when your job involves you sitting in front of
+ a computer all day. Hence, you should know your Body Mass Index (BMI) to
+ ensure you are in good condition. Let's take a look at how you can build such
+ app from scratch using an API from RapidAPI Hub.
+publishedDate: 2022-04-04T03:29:02.323Z
+lastModifiedDate: 2022-04-04T03:29:02.323Z
+authors:
+ - saad
+categories:
+ - apps
+tags:
+ - bmi-calculator-app
+ - rapidapi
+ - api
+coverImage: ''
+---
+
++ Anime Suggestion App +
++ Get anime suggestion based on your favorite anime +
+
+
+ {response &&
+ response.map(suggestion => {
+ const html = /<\/?([a-z][a-z0-9]*)\b[^>]*>?/gi;
+ const doubleSpace = /\s{2,}/g;
+
+ const description = suggestion.description
+ .replace(html, '')
+ .replace(doubleSpace, ' ')
+ .trim();
+
+ return (
+
+
+
+ );
+ })}
+
+
+ + {suggestion.title.english} +
++ {description} +
+ {suggestion.trailer && ( +
+
+ )}
+ + Watch Trailer +
+ +
+
+ + Made by RapidAPI DevRel Team —{' '} + + See more examples like this + +
+
+
+ );
+}
+```
+
+It will create two headings for you with the text “BMI Calculator App” and “Calculate your BMI using weight and height”. You can change it to anything you prefer.
+
+### → STEP #2
+
+Now let’s create two input fields and a calculate button. The user will be able to type his weight and height in the input boxes and use the calculate button to get the BMI information.
+
+For this, copy the following code and paste it into `pages/index.js`:
+
+```jsx
+export default function Home() {
+ return (
+ + BMI Calculator App +
++ Calculate your BMI using weight and height +
+
+
+ );
+}
+```
+
+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 weight, height, and BMI information 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 [weight, setWeight] = useState('80');
+ const [height, setHeight] = useState('1.80');
+ const [bmi, setBmi] = useState(null);
+
+ return (
+ + BMI Calculator App +
++ Calculate your BMI using weight and height +
+
+
+
+
+
+ );
+}
+```
+
+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 [Body Mass Index (BMI) Calculator API](https://RapidAPI.com/principalapis/api/body-mass-index-bmi-calculator?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.
+
+
+
+Now create a file with the name `bmi.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/bmi
+```
+
+Now copy the following code in this file:
+
+```js
+import axios from 'axios';
+
+export default function handler(req, res) {
+ if (req.method === 'GET') {
+ const weight = req.query.weight || 0;
+ const height = req.query.height || 0;
+
+ const options = {
+ method: 'GET',
+ url: 'https://body-mass-index-bmi-calculator.p.rapidapi.com/metric',
+ params: {weight, height},
+ headers: {
+ 'X-RapidAPI-Host':
+ 'body-mass-index-bmi-calculator.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 [Body Mass Index (BMI) Calculator API](https://RapidAPI.com/principalapis/api/body-mass-index-bmi-calculator?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 `bmi` 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 [weight, setWeight] = useState('80');
+ const [height, setHeight] = useState('1.80');
+ const [btnText, setBtnText] = useState('Calculate');
+ const [bmi, setBmi] = useState(null);
+
+ /**
+ *
+ *
+ * Fetch BMI
+ */
+ const fetchBMI = async e => {
+ e.preventDefault();
+
+ try {
+ setBtnText('Calculating...');
+ const response = await axios.get(`/api/bmi`, {
+ params: {
+ weight,
+ height
+ }
+ });
+
+ setBmi(response.data.bmi);
+ } catch (err) {
+ console.log(err);
+ }
+ setBtnText('Calculate');
+ };
+
+ return (
+ + BMI Calculator App +
++ Calculate your BMI using weight and height +
+
+
+
+
+
+ );
+}
+```
+
+You can see that I have created a function, `fetchBMI`, to request the API. I have also created a UI that is conditionally rendering on the screen based on the `bmi` state variable value.
+
+## Wrap Up
+
+That’s it. We have successfully built a [BMI Calculator App](https://rapidapi-example-bmi-calculator-app.vercel.app/) using [Body Mass Index (BMI) Calculator API](https://RapidAPI.com/principalapis/api/body-mass-index-bmi-calculator?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/bmi-calculator-app).
+
+In the end, it will look something like this:
+
+
diff --git a/guides/posts/build-books-app/images/final.png b/guides/posts/build-books-app/images/final.png
new file mode 100644
index 00000000..7074729f
Binary files /dev/null and b/guides/posts/build-books-app/images/final.png differ
diff --git a/guides/posts/build-books-app/images/preview.png b/guides/posts/build-books-app/images/preview.png
new file mode 100644
index 00000000..d78c4ed5
Binary files /dev/null and b/guides/posts/build-books-app/images/preview.png differ
diff --git a/guides/posts/build-books-app/images/snippet.png b/guides/posts/build-books-app/images/snippet.png
new file mode 100644
index 00000000..7864d63b
Binary files /dev/null and b/guides/posts/build-books-app/images/snippet.png differ
diff --git a/guides/posts/build-books-app/images/subscribe.png b/guides/posts/build-books-app/images/subscribe.png
new file mode 100644
index 00000000..2f583c3c
Binary files /dev/null and b/guides/posts/build-books-app/images/subscribe.png differ
diff --git a/guides/posts/build-books-app/post.md b/guides/posts/build-books-app/post.md
new file mode 100644
index 00000000..a48ba657
--- /dev/null
+++ b/guides/posts/build-books-app/post.md
@@ -0,0 +1,547 @@
+---
+title: How to Build a Book Search App in Next.js using an API?
+description: In this guide, we will create a book search application with React and Next.js. The application will fetch the author, description, cover image, links, and more of a given book using a books API from RapidAPI Hub.
+publishedDate: 2022-04-08T15:57:17.709Z
+lastModifiedDate: 2022-04-08T15:57:17.709Z
+authors:
+ - ahmad-bilal
+categories:
+ - apps
+tags:
+ - rapidapi
+ - books-search
+ - app
+coverImage: ''
+---
+
++ BMI Calculator App +
++ Calculate your BMI using weight and height +
+
+
+ {bmi && (
+
+
+
+ )}
+ {`Your Body Mass Index: ${bmi}`}
+
+
+ + Made by RapidAPI DevRel Team -{' '} + + See more examples like this + +
+
+
+ );
+}
+```
+
+Add the following to `pages/_app.js`. We are importing our font here, which we specified in our Tailwind [config file](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/books-app/tailwind.config.js).
+
+```jsx
+import Head from 'next/head';
+import 'tailwindcss/tailwind.css';
+
+function MyApp({Component, pageProps}) {
+ return (
+ <>
+
+ + Books Search +
++ Search for any book using the Books API +
+
+
+ );
+}
+```
+
+I have styled and made them responsive using [TailwindCSS](<(https://tailwindcss.com/)>).
+
+Now, we need to store the user input. We can do it using React `useState` hook. We will use two states for our app; one for the input keyword of the wanted book and the other for the API response. Let's add them.
+
+```jsx
+import {useState} from 'react';
+
+export default function Home() {
+ // Initializing with a default value
+ const [keyword, setKeyword] = useState('The alchemist');
+ const [searchResults, setSearchResults] = useState(null);
+ return (
+ + Books Search +
++ Search for any book using the Books API +
+ +
+
+ );
+}
+```
+
+The `onChange` handler will store the user input in our `keyword` state. We are also initializing it with a default value of `The Alchemist`.
+
+### → 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 [HAPI Books API](https://rapidapi.com/roftcomp-laGmBwlWLm/api/hapi-books/?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’;
+```
+
+The API provides a bunch of usable endpoints for book-related data, and we will use the `Search Books by Name` endpoint for our application. You can see these endpoints on the left pane in the image below.
+
+
+
+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` ones, as you can see above.
+
+In the `pages/api` directory, create a file named `search.js`, and use the code snippet as follows:
+
+```jsx
+// pages/api/search.js
+import axios from 'axios';
+
+export default async function handler(req, res) {
+ const options = {
+ method: 'GET',
+ url: `https://hapi-books.p.rapidapi.com/search/${req.query.title}`,
+ headers: {
+ 'X-RapidAPI-Host': 'hapi-books.p.rapidapi.com',
+ 'X-RapidAPI-Key': NEXT_PUBLIC_RAPIDAPI_KEY
+ }
+ };
+ try {
+ let response = await axios(options);
+ res.status(200).json(response.data);
+ } catch (error) {
+ console.error(error.response);
+ }
+}
+```
+
+We will send a `GET` request to the API with our input keyword as the parameter. We have specified the text parameter with `req.query.title`. `req.query` is an object that holds the input parameters coming from our client-side.
+
+Now we need to create a caller function `getResults()` in the `pages/index.js` file to send a `GET` request to our API at `/api/search`. The function looks like this:
+
+```jsx
+const getResults = async () => {
+ try {
+ // Replace space with '+'
+ let title = keyword.replace(/ /g, '+');
+ const {data} = await axios.get('api/search/', {
+ params: {title}
+ });
+ // Add the data to the results state
+ setSearchResults(data);
+ } catch (error) {
+ console.error(error);
+ }
+};
+```
+
+The API expects the input keyword to have `+` instead of spaces, so we are replacing them using `.replace` method.
+
+Let's add this function in our index file and set the search button to trigger it.
+
+```jsx
+// pages/index.js
+import axios from 'axios';
+import {useState} from 'react';
+
+export default function Home() {
+ const [keyword, setKeyword] = useState('The alchemist');
+ const [searchResults, setSearchResults] = useState(null);
+ const [loading, setLoading] = useState(false);
+
+ const getResults = async () => {
+ try {
+ // Replace space with '+'
+ let title = keyword.replace(/ /g, '+');
+ setLoading(true);
+ const {data} = await axios.get('api/search/', {
+ params: {title}
+ });
+ // Add the data to the results state
+ setSearchResults(data);
+ setLoading(false);
+ } catch (error) {
+ setLoading(false);
+ }
+ };
+
+ return (
+ + Books Search +
++ Search for any book using the Books API +
+ +
+
+ );
+}
+```
+
+### → FINAL STEP
+
+Now, we need to display the response. The API returns an array of books. We will use the `map` method to render each book. We will be showing the title, author, cover image, link, and release date like this:
+
+```jsx
+{
+ searchResults && (
+ + Books Search +
++ Search for any book using the Books API +
+ +
+
+ );
+}
+```
+
+Finally, we added a loading state to show a loading text to the user. Our application is good to go. Here is what it looks like in code:
+
+```jsx
+import axios from 'axios';
+import {useState} from 'react';
+
+export default function Home() {
+ const [keyword, setKeyword] = useState('The alchemist');
+ const [searchResults, setSearchResults] = useState(null);
+ const [loading, setLoading] = useState(false);
+
+ const getResults = async () => {
+ try {
+ let title = keyword.replace(/ /g, '+');
+ setLoading(true);
+ const {data} = await axios.get('api/search/', {
+ params: {title}
+ });
+ setSearchResults(data);
+ setLoading(false);
+ } catch (error) {
+ setLoading(false);
+ }
+ };
+
+ return (
+
+ {searchResults.map(book => {
+ return (
+
+
+
+ );
+ })}
+
+
+
+
+
+ 
+
+
+
+ + {book.name} +
++ {book.authors[0]} ({book.year}) +
+ + Rating: {book.rating} + + + Read More + +
+
+ );
+}
+```
+
+Here is a preview of our app:
+
+
+
+## Wrap Up
+
+All done. You can also check the deployed [Books App](https://rapidapi-example-books-app.vercel.app/). Find the code of this web app [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/books-app).
diff --git a/guides/posts/build-car-data-app/images/code-snippet.png b/guides/posts/build-car-data-app/images/code-snippet.png
new file mode 100644
index 00000000..a6832810
Binary files /dev/null and b/guides/posts/build-car-data-app/images/code-snippet.png differ
diff --git a/guides/posts/build-car-data-app/images/cover.png b/guides/posts/build-car-data-app/images/cover.png
new file mode 100644
index 00000000..d7f4eeb2
Binary files /dev/null and b/guides/posts/build-car-data-app/images/cover.png differ
diff --git a/guides/posts/build-car-data-app/images/subscribe.png b/guides/posts/build-car-data-app/images/subscribe.png
new file mode 100644
index 00000000..79562d6e
Binary files /dev/null and b/guides/posts/build-car-data-app/images/subscribe.png differ
diff --git a/guides/posts/build-car-data-app/post.md b/guides/posts/build-car-data-app/post.md
new file mode 100644
index 00000000..01343fac
--- /dev/null
+++ b/guides/posts/build-car-data-app/post.md
@@ -0,0 +1,414 @@
+---
+title: How to build a Car Data app using Car Data API?
+description: 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.
+authors:
+ - saad
+categories:
+ - apps
+tags:
+ - car-data-app
+ - app
+publishedDate: 2022-01-03T09:34:31.065Z
+lastModifiedDate: 2022-01-03T09:34:31.065Z
+coverImage: ''
+---
+
++ Books Search +
++ Search for any book using the Books API +
+ + + {searchResults && ( +
+
+ )}
+
+ {searchResults.map(book => {
+ return (
+
+
+
+ );
+ })}
+
+
+
+
+
+ 
+
+
+
+ + {book.name} +
++ {book.authors[0]} ( + {book.year}) +
+ + Rating: {book.rating} + + + Read More + +
+
+ );
+}
+```
+
+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 (
+ + Car Data App +
++ Get Different Car Information +
+
+
+ );
+}
+```
+
+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 (
+ + Car Data App +
++ Get Different Car Information +
+
+
+
+
+
+ );
+}
+```
+
+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.
+
+
+
+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 (
+ + Car Data App +
++ Get Different Car Information +
+
+
+
+
+
+ );
+}
+
+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:
+
+
diff --git a/guides/posts/build-carbon-footprint-app/images/code-snippet.png b/guides/posts/build-carbon-footprint-app/images/code-snippet.png
new file mode 100644
index 00000000..18848c44
Binary files /dev/null and b/guides/posts/build-carbon-footprint-app/images/code-snippet.png differ
diff --git a/guides/posts/build-carbon-footprint-app/images/final.png b/guides/posts/build-carbon-footprint-app/images/final.png
new file mode 100644
index 00000000..e9d92a61
Binary files /dev/null and b/guides/posts/build-carbon-footprint-app/images/final.png differ
diff --git a/guides/posts/build-carbon-footprint-app/images/preview.png b/guides/posts/build-carbon-footprint-app/images/preview.png
new file mode 100644
index 00000000..18c79a1d
Binary files /dev/null and b/guides/posts/build-carbon-footprint-app/images/preview.png differ
diff --git a/guides/posts/build-carbon-footprint-app/images/subscribe.png b/guides/posts/build-carbon-footprint-app/images/subscribe.png
new file mode 100644
index 00000000..4465b2ee
Binary files /dev/null and b/guides/posts/build-carbon-footprint-app/images/subscribe.png differ
diff --git a/guides/posts/build-carbon-footprint-app/post.md b/guides/posts/build-carbon-footprint-app/post.md
new file mode 100644
index 00000000..e7266fa1
--- /dev/null
+++ b/guides/posts/build-carbon-footprint-app/post.md
@@ -0,0 +1,582 @@
+---
+title: How to build a Carbon Footprint App using Next.js and the CarbonFootprint API?
+description: 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.
+publishedDate: 2022-01-12T19:10:30.765Z
+lastModifiedDate: 2022-01-12T19:10:30.765Z
+authors:
+ - 'ahmad-bilal'
+categories:
+ - apps
+tags:
+ - rapidapi
+ - carbon
+ - footprint
+ - app
+coverImage: ''
+---
+
++ Car Data App +
++ Get Different Car Information +
+
+
+
+
+
+
+
+
+
+ | + Year + | ++ Type + | ++ Make + | ++ Model + | +
|---|---|---|---|
| + + {info.year} + + | ++ + {info.type} + + | ++ + {info.make} + + | ++ + {info.model} + + | +
+
+ + Made by RapidAPI DevRel Team -{' '} + + See more examples like this + +
+
+
+ );
+}
+```
+
+I added the following to `pages/_app.js`.
+
+```jsx
+import Head from 'next/head';
+import 'tailwindcss/tailwind.css';
+
+function MyApp({Component, pageProps}) {
+ return (
+ <>
+
+ + Carbon Footprint +
++ Calculate the Carbon Footprint of your travel. +
+
+
+
+ );
+}
+```
+
+This code will create the input fields, and the submit button. The Select method is pre-filled with possible vehicle types as specified on the [API Endpoint page](https://rapidapi.com/carbonandmore-carbonandmore-default/api/carbonfootprint1/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).
+
+I have also styled and made them responsive using [TailwindCSS](<(https://tailwindcss.com/)>). Now, we need to store the user input in the input fields. We can do it using React `useState` hook. We will use three states for our app:
+
+1. `vehicle` for storing the vehicle type, with `SmallPetrolCar` as the default value.
+2. `distance` for storing the distance in km.
+3. `response` for storing the API response.
+
+```jsx
+import { useState } from "react";
+
+export default function Home() {
+ const [vehicle, setVehicle] = useState("SmallPetrolCar");
+ const [distance, setDistance] = useState(null);
+ const [response, setResponse] = useState(null);
+
+ return (
+ Carbon Footprint
++ Calculate the Carbon Footprint of your travel. +
+ +
+
+
+ );
+}
+```
+
+We use the `onChange` handlers on the input fields to store their values(`e.target.value`) in our states.
+
+### → 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 [CarbonFootprint API](https://rapidapi.com/carbonandmore-carbonandmore-default/api/carbonfootprint1/?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’;
+```
+
+The API provides several usable endpoints which you can use in your app. You can see these endpoints on the left pane in the image below. We will use the `CarbonFootprintFromCarTravel` endpoint, which returns the Carbon Footprint for car travel.
+
+
+
+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 named `calculate.js` and use the code snippet as follows:
+
+```jsx
+// In pages/api/calculate.js:
+import axios from 'axios';
+
+export default function handler(req, res) {
+ const options = {
+ method: 'GET',
+ url: 'https://carbonfootprint1.p.rapidapi.com/CarbonFootprintFromCarTravel',
+ params: {distance: req.query.distance, vehicle: req.query.vehicle},
+ headers: {
+ 'x-rapidapi-host': 'carbonfootprint1.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 `req.query.distance` and `req.query.vehicle`. `req.query` is an object in Next.js that holds the input parameters coming from our client-side.
+
+### → STEP #4
+
+Now we need to create a function `calculateFootprint` in the `pages/index.js` file to send a request to our API at `http://localhost:3000/api/calculate`.
+
+The search button will trigger this function, which will make a GET request to our API. Let's make these changes to the index file.
+
+```jsx
+import { useState } from "react";
+import axios from 'axios';
+
+export default function Home() {
+ const [vehicle, setVehicle] = useState("SmallPetrolCar");
+ const [distance, setDistance] = useState(null);
+ const [response, setResponse] = useState(null);
+
+ // Sends the API request te get the footprint.
+ const calculateFootprint = async () => {
+ try {
+ const res = await axios.get("api/calculate/", {
+ params: { vehicle, distance },
+ });
+ const { data } = res;
+ setResponse(data); // Storing response in the response state
+ } catch (error) {
+ console.error(error);
+ }
+ };
+
+ return (
+ Carbon Footprint
++ Calculate the Carbon Footprint of your travel. +
+ +
+
+
+ );
+}
+```
+
+We use the `onSubmit` handler of the form to trigger the `calculateFootprint` function on submitting the form through the enter key or submit button.
+
+### → FINAL STEP
+
+Finally, it is time to display the response returned by the API. We will show a div if our `response state` is not null. Here is the final code of our app:
+
+```jsx
+import { useState } from "react";
+import axios from 'axios';
+
+export default function Home() {
+ const [vehicle, setVehicle] = useState("SmallPetrolCar");
+ const [distance, setDistance] = useState(null);
+ const [response, setResponse] = useState(null);
+
+ // Sends the API request te get the footprint.
+ const calculateFootprint = async () => {
+ try {
+ const res = await axios.get("api/calculate/", {
+ params: { vehicle, distance },
+ });
+ const { data } = res;
+ setResponse(data); // Storing response in the response state
+ } catch (error) {
+ console.error(error);
+ }
+ };
+
+ return (
+ Carbon Footprint
++ Calculate the Carbon Footprint of your travel. +
+ +
+
+
+ );
+}
+```
+
+As you can see, our app is working as intended:
+
+
+
+## Wrap Up
+
+All done. You can also check the deployed [Carbon Footprint App](https://rapidapi-example-carbon-footprint-app.vercel.app/) and find its code in the [RapidAPI Examples Repository](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/carbon-footprint-app) on GitHub.
diff --git a/guides/posts/build-color-palette-app/images/final.png b/guides/posts/build-color-palette-app/images/final.png
new file mode 100644
index 00000000..aa57fbc6
Binary files /dev/null and b/guides/posts/build-color-palette-app/images/final.png differ
diff --git a/guides/posts/build-color-palette-app/images/preview.png b/guides/posts/build-color-palette-app/images/preview.png
new file mode 100644
index 00000000..7891f7b3
Binary files /dev/null and b/guides/posts/build-color-palette-app/images/preview.png differ
diff --git a/guides/posts/build-color-palette-app/images/snippet.png b/guides/posts/build-color-palette-app/images/snippet.png
new file mode 100644
index 00000000..99c09100
Binary files /dev/null and b/guides/posts/build-color-palette-app/images/snippet.png differ
diff --git a/guides/posts/build-color-palette-app/post.md b/guides/posts/build-color-palette-app/post.md
new file mode 100644
index 00000000..c85cfce5
--- /dev/null
+++ b/guides/posts/build-color-palette-app/post.md
@@ -0,0 +1,418 @@
+---
+title: How to Build a Random Color Palette Generator App in Next.js using an API?
+description: Random color palettes are a great source of inspiration if you are looking for colors for your projects. This guide will demonstrate how to build a random color palettes application using Next.js and an API.
+publishedDate: 2022-04-13T15:57:17.709Z
+lastModifiedDate: 2022-04-13T15:57:17.709Z
+authors:
+ - ahmad-bilal
+categories:
+ - apps
+tags:
+ - rapidapi
+ - random
+ - color-palette
+ - generator
+ - app
+coverImage: ''
+---
+
+Carbon Footprint
++ Calculate the Carbon Footprint of your travel. +
+ + {response && ( +
+
+ The carbon footprint is{" "}
+ {response.carbonEquivalent} KGs
+
+
+ )}
+
+
+ );
+}
+```
+
+Add the following to `pages/_app.js`. We are importing our font here, which we specified in our Tailwind [config file](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/random-color-palette-app/tailwind.config.js).
+
+```jsx
+import Head from 'next/head';
+import 'tailwindcss/tailwind.css';
+
+function MyApp({Component, pageProps}) {
+ return (
+ <>
+
+ + Random Color Pallete{' '} + Generator +
++ Click change to get a random color pallete +
+
+
+ );
+}
+```
+
+I have styled and made them responsive using [TailwindCSS](<(https://tailwindcss.com/)>). Our app looks like this now:
+
+
+
+### → STEP #2
+
+Before we add the API call, we need something that will store the data returned by the API. We can do it using React `useState` hook. We will use two states for our app; `colors` for the API's response and `loading` for showing the loading state to the user. Let's add them.
+
+```jsx
+import {useState} from 'react';
+
+export default function Home() {
+ const [colors, setColors] = useState(null);
+ const [loading, setLoading] = useState(false);
+
+ return (
+ + Random Color Pallete{' '} + Generator +
++ Click change to get a random color pallete +
+ + +
+
+ );
+}
+```
+
+Notice how we are using the `loading` state to show a `Loading..` text in the button. Without a loading state, the user will not know if the API call is processing or not. So it is always good to show the loading 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 [Random Palette Generator API](https://RapidAPI.com/kareem1999/api/random-palette-generator/?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’;
+```
+
+The API provides two endpoints for getting color palettes. We will use the `Get Full` endpoint that allows us to define the number of palettes, the number of colors per palette, and the scheme of colors. You can see these endpoints on the left pane in the image below.
+
+
+
+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` ones, as you can see above.
+
+In the `pages/api` directory, create a file named `generate.js`, and use the code snippet as follows:
+
+```jsx
+// pages/api/generate.js
+import axios from 'axios';
+
+export default async function handler(req, res) {
+ const options = {
+ method: 'GET',
+ url: 'https://random-palette-generator.p.rapidapi.com/palette/Monochromatic/1/4',
+ headers: {
+ 'X-RapidAPI-Host': 'random-palette-generator.p.rapidapi.com',
+ 'X-RapidAPI-Key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
+ }
+ };
+ try {
+ let response = await axios(options);
+ // Send response to the client side
+ res.status(200).json(response.data);
+ } catch (error) {
+ console.error(error.response);
+ }
+}
+```
+
+We will send a `GET` request to the API with the following parameters:
+
+- Monochromatic scheme for the color generation. Available schemes are Monochromatic, Square, Triad, Complementary, or Shades.
+- Single color palette per request.
+- Four colors in each palette.
+
+We have specified these parameters in the `url`, and you can play around with them if you want.
+
+Now we need to create a caller function `getColors()` in the `pages/index.js` file to request our API at `/api/generate`.
+
+```jsx
+// pages/index.js
+import {useState} from 'react';
+
+export default function Home() {
+ const [colors, setColors] = useState(null);
+ const [loading, setLoading] = useState(false);
+
+ const getColors = async () => {
+ try {
+ setLoading(true);
+ const res = await axios.get('api/generate/');
+ setColors(res.data.data[0].palette);
+ setLoading(false);
+ } catch (error) {
+ setLoading(false);
+ }
+ };
+
+ return (
+ + Random Color Pallete{' '} + Generator +
++ Click change to get a random color pallete +
+ + +
+
+ );
+}
+```
+
+We have added the function and set the `Change` button to trigger it using the `onClick` handler.
+
+There is one caveat here. Our app will not show a color palette until the button is clicked. We want to show the first color palette without having to press any button, and we can achieve this easily using the `useEffect` hook.
+
+```jsx
+import axios from 'axios';
+import {useState, useEffect} from 'react';
+
+export default function Home() {
+ const [colors, setColors] = useState(null);
+ const [loading, setLoading] = useState(false);
+
+ const getColors = async () => {
+ try {
+ setLoading(true);
+ const res = await axios.get('api/generate/');
+ // Store the palette in our state
+ setColors(res.data.data[0].palette);
+ setLoading(false);
+ } catch (error) {
+ setLoading(false);
+ }
+ };
+ // Get a color palette whenever page loads.
+ useEffect(() => {
+ getColors();
+ }, []);
+
+ return (
+ + Random Color Pallete{' '} + Generator +
++ Click change to get a random color pallete +
+ + +
+
+ );
+}
+```
+
+### → FINAL STEP
+
+With our API call ready to go, we need to display the API's response. The API returns a color palette with an array of colors in it. We will use the `map` method to display the colors.
+
+```jsx
+import axios from 'axios';
+import {useState, useEffect} from 'react';
+
+export default function Home() {
+ const [colors, setColors] = useState(null);
+ const [loading, setLoading] = useState(false);
+ const getColors = async () => {
+ try {
+ setLoading(true);
+ const res = await axios.get('api/generate/');
+ setColors(res.data.data[0].palette);
+ setLoading(false);
+ } catch (error) {
+ setLoading(false);
+ }
+ };
+ useEffect(() => {
+ getColors();
+ }, []);
+
+ return (
+ + Random Color Pallete{' '} + Generator +
++ Click change to get a random color pallete +
+ + +
+
+ );
+}
+```
+
+For an excellent design, we use the `style` property to set the `divs`' background colors according to our palette. Finally, here is what our app looks like:
+
+
+
+## Wrap Up
+
+All done. You can also check the deployed [Random Color Palette App](https://RapidAPI-example-random-color-palette-app.vercel.app/). Find the code of this web app [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/random-color-palette-app).
diff --git a/guides/posts/build-coordinate-distance-calculator-app/images/code-snippet.png b/guides/posts/build-coordinate-distance-calculator-app/images/code-snippet.png
new file mode 100644
index 00000000..c3ac2835
Binary files /dev/null and b/guides/posts/build-coordinate-distance-calculator-app/images/code-snippet.png differ
diff --git a/guides/posts/build-coordinate-distance-calculator-app/images/cover.png b/guides/posts/build-coordinate-distance-calculator-app/images/cover.png
new file mode 100644
index 00000000..3711af62
Binary files /dev/null and b/guides/posts/build-coordinate-distance-calculator-app/images/cover.png differ
diff --git a/guides/posts/build-coordinate-distance-calculator-app/images/subscribe.png b/guides/posts/build-coordinate-distance-calculator-app/images/subscribe.png
new file mode 100644
index 00000000..1c065389
Binary files /dev/null and b/guides/posts/build-coordinate-distance-calculator-app/images/subscribe.png differ
diff --git a/guides/posts/build-coordinate-distance-calculator-app/post.md b/guides/posts/build-coordinate-distance-calculator-app/post.md
new file mode 100644
index 00000000..cfbb2037
--- /dev/null
+++ b/guides/posts/build-coordinate-distance-calculator-app/post.md
@@ -0,0 +1,353 @@
+---
+title: How to build a Coordinate Distance Calculator App using Distance Calculator API?
+description: "In this piece, let's build an app together that will show us the distance between two geographical coordinatesz."
+publishedDate: 2022-01-31T07:18:41.708Z
+lastModifiedDate: 2022-01-31T07:18:41.708Z
+authors:
+ - saad
+categories:
+ - apps
+tags:
+ - rapidapi
+ - coordiante-distance-calculate-app
+coverImage: ''
+---
+
++ Random Color Pallete{' '} + Generator +
++ Click change to get a random color pallete +
+ {/* Display the color palette */} + {colors && ( +
+ {colors.map((color, index) => {
+ return (
+
+ )}
+
+
+
+ {color}
+
+ );
+ })}
+
+
+ );
+}
+```
+
+It will create two headings for you with the text “Coordinate Distance Calculator App” and “Calculate the distance between two coordinates”. You can change it to anything you prefer.
+
+### → STEP #2
+
+Now let’s create two input fields and a calculate button. The user will be able to type the two coordinate sets in the input boxes and use the calculate button to get the distance between the coordinates.
+
+For this, copy the following code and paste it in `pages/index.js`:
+
+```jsx
+export default function Home() {
+ return (
+ + Coordinate Distance{' '} + Calculator App +
++ Calculate the distance between two coordinates +
+
+
+ );
+}
+```
+
+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 coordinate sets and the distance between coordinates 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 [firstCoordinateSet, setFirstCoordinateSet] = useState('');
+ const [secondCoordinateSet, setSecondCoordinateSet] = useState('');
+ const [res, setRes] = useState('');
+
+ return (
+ + Coordinate Distance{' '} + Calculator App +
++ Calculate the distance between two coordinates +
+
+
+
+
+
+ );
+}
+```
+
+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 [Distance Calculator API](https://RapidAPI.com/ApiOcean/api/distance-calculator?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.
+
+
+
+Now create a file with the name `calculate.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/calculate
+```
+
+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://distance-calculator.p.rapidapi.com/v1/one_to_one',
+ params: {
+ start_point: req.query.firstCoordinateSet,
+ end_point: req.query.secondCoordinateSet,
+ unit: 'miles',
+ decimal_places: '2'
+ },
+ headers: {
+ 'content-type': 'application/json',
+ 'x-rapidapi-host': 'distance-calculator.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 [Distance Calculator API](https://RapidAPI.com/ApiOcean/api/distance-calculator?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 `calculate` 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 [firstCoordinateSet, setFirstCoordinateSet] = useState('');
+ const [secondCoordinateSet, setSecondCoordinateSet] = useState('');
+ const [res, setRes] = useState('');
+ const [btnText, setBtnText] = useState('Calculate');
+
+ /**
+ *
+ *
+ *
+ */
+ const fetchCoordinatesDistance = async e => {
+ e.preventDefault();
+
+ try {
+ setBtnText('Calculating...');
+ const res = await axios.get(`/api/calculator`, {
+ params: {
+ firstCoordinateSet,
+ secondCoordinateSet
+ }
+ });
+ setRes(res.data);
+ } catch (err) {
+ console.log(err);
+ }
+ setBtnText('Calculate');
+ };
+
+ return (
+ + Coordinate Distance{' '} + Calculator App +
++ Calculate the distance between two coordinates +
+
+
+
+
+
+ );
+}
+```
+
+You can see that I have created a function, `fetchCoordinatesDistance`, to request the API. I have also created a UI that is conditionally rendering on the screen based on the `res` state variable value.
+
+## Wrap Up
+
+That’s it. We have successfully built a [Coordinate Distance Calculator App](https://rapidapi-example-coordinate-distance-calculator.vercel.app/) using [Distance Calculator API](https://RapidAPI.com/ApiOcean/api/distance-calculator?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/blob/main/coordinate-distance-calculator-app).
+
+In the end, it will look something like this:
+
+
diff --git a/guides/posts/build-country-info-app/images/code-snippet.png b/guides/posts/build-country-info-app/images/code-snippet.png
new file mode 100644
index 00000000..bd91ad26
Binary files /dev/null and b/guides/posts/build-country-info-app/images/code-snippet.png differ
diff --git a/guides/posts/build-country-info-app/images/cover.png b/guides/posts/build-country-info-app/images/cover.png
new file mode 100644
index 00000000..e4f1e783
Binary files /dev/null and b/guides/posts/build-country-info-app/images/cover.png differ
diff --git a/guides/posts/build-country-info-app/images/subscribe.png b/guides/posts/build-country-info-app/images/subscribe.png
new file mode 100644
index 00000000..cb1d2724
Binary files /dev/null and b/guides/posts/build-country-info-app/images/subscribe.png differ
diff --git a/guides/posts/build-country-info-app/post.md b/guides/posts/build-country-info-app/post.md
new file mode 100644
index 00000000..0117c88f
--- /dev/null
+++ b/guides/posts/build-country-info-app/post.md
@@ -0,0 +1,383 @@
+---
+title: How to build a Country Info App using Country Info API?
+description: "There are thousands of APIs available on RapidAPI Hub. In this piece, let's use an API from RapidAPI Hub to build an app that will show some basic information related to a country."
+publishedDate: 2022-03-28T10:41:42.086Z
+lastModifiedDate: 2022-03-28T10:41:42.086Z
+authors:
+ - saad
+categories:
+ - apps
+tags:
+ - country-info-app
+ - rapidapi
+coverImage: ''
+---
+
++ Coordinate Distance{' '} + Calculator App +
++ Calculate the distance between two coordinates +
+
+
+ {res && (
+
+
+
+ )}
+ + The total distance between these two coordinates is{' '} + {res.distance} Miles +
+
+
+ + Made by RapidAPI DevRel Team -{' '} + + See more examples like this + +
+
+
+ );
+}
+```
+
+It will create two headings for you with the text “Country Info App” and “Take a quick look at some basic information about a country”. You can change it to anything you prefer.
+
+### → STEP #2
+
+Now let’s create an input field and a get info button. The user will be able to type the country name in the input box and use the get info button to get the country information.
+
+For this, copy the following code and paste it in `pages/index.js`:
+
+```jsx
+export default function Home() {
+ return (
+ + Country Info App +
++ Take a quick look at some basic information about a country +
+
+
+ );
+}
+```
+
+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 name and the country information that we will receive from the API. For this, copy-paste the following code in `pages/index.js`:
+
+```jsx
+export default function Home() {
+ const [country, setCountry] = useState('United Kingdom');
+ const [countryInfo, setCountryInfo] = useState(null);
+
+ return (
+ + Country Info App +
++ Take a quick look at some basic information about a country +
+
+
+
+
+
+ );
+}
+```
+
+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 [Country Info API](https://RapidAPI.com/workmates-lab-workmates-lab-default/api/country-info?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.
+
+
+
+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: 'GET',
+ url: 'https://country-info.p.rapidapi.com/search',
+ params: {query: req.query.country},
+ headers: {
+ 'X-RapidAPI-Host': 'country-info.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 [Country Info API](https://RapidAPI.com/workmates-lab-workmates-lab-default/api/country-info?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() {
+ const [country, setCountry] = useState('United Kingdom');
+ const [countryInfo, setCountryInfo] = useState(null);
+ const [btnText, setBtnText] = useState('Get Info');
+
+ /**
+ *
+ *
+ * Fetch country info data
+ */
+ const getCountryInfo = async e => {
+ e.preventDefault();
+
+ try {
+ setBtnText('Loading...');
+ const res = await axios.get(`/api/info`, {
+ params: {country}
+ });
+
+ setCountryInfo(res.data[0]);
+ } catch (err) {
+ console.log(err);
+ }
+
+ setBtnText('Get Info');
+ };
+
+ return (
+ + Country Info App +
++ Take a quick look at some basic information about a country +
+
+
+
+
+
+ );
+}
+```
+
+You can see that I have created a function, `getCountryInfo`, to request the API. I have also created a UI that is conditionally rendering on the screen based on the `countryInfo` state variable value.
+
+## Wrap Up
+
+That’s it. We have successfully built a [Country Info App](https://rapidapi-example-country-info-app.vercel.app/) using [Country Info API](https://RapidAPI.com/workmates-lab-workmates-lab-default/api/country-info?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/country-info-app).
+
+In the end, it will look something like this:
+
+
diff --git a/guides/posts/build-covid-app/images/code-snippet.jpg b/guides/posts/build-covid-app/images/code-snippet.jpg
new file mode 100644
index 00000000..70f65acf
Binary files /dev/null and b/guides/posts/build-covid-app/images/code-snippet.jpg differ
diff --git a/guides/posts/build-covid-app/images/covid-stats-app.png b/guides/posts/build-covid-app/images/covid-stats-app.png
new file mode 100644
index 00000000..6ba21a5d
Binary files /dev/null and b/guides/posts/build-covid-app/images/covid-stats-app.png differ
diff --git a/guides/posts/build-covid-app/images/subscribe.jpg b/guides/posts/build-covid-app/images/subscribe.jpg
new file mode 100644
index 00000000..b3503a78
Binary files /dev/null and b/guides/posts/build-covid-app/images/subscribe.jpg differ
diff --git a/guides/posts/build-covid-app/post.md b/guides/posts/build-covid-app/post.md
new file mode 100644
index 00000000..3b9c0827
--- /dev/null
+++ b/guides/posts/build-covid-app/post.md
@@ -0,0 +1,336 @@
+---
+title: How to build a COVID-19 Stats app using Next.js and COVID-19 API?
+description: 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.
+publishedDate: 2021-10-28T15:57:17.709Z
+lastModifiedDate: 2021-10-28T15:57:17.709Z
+authors:
+ - saad
+categories:
+ - apps
+tags:
+ - rapidapi
+ - covid-stats-app
+coverImage: ''
+---
+
++ Country Info App +
++ Take a quick look at some basic information about a country +
+
+
+
+ {countryInfo && (
+
+
+
+
+
+ )}
+ | + Name + | ++ {countryInfo.name} + | +
| + Flag + | ++ {countryInfo.flag} + | +
| + Code + | ++ {countryInfo.code} + | +
| + Dial Code + | ++ {countryInfo.dialCode} + | +
| + Continent + | ++ {countryInfo.continent} + | +
| + Currency Code + | ++ {countryInfo.currencyCode} + | +
+
+ + Made by RapidAPI DevRel Team -{' '} + + See more examples like this + +
+
+
+ );
+}
+```
+
+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 (
+ + COVID-19 Stats App +
++ Track COVID-19 Spread Across the World +
+
+
+ );
+}
+```
+
+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 (
+ + COVID-19 Stats App +
++ Track COVID-19 Spread Across the World +
+
+
+
+
+
+
+
+
+ );
+}
+```
+
+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.
+
+
+
+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 (
+ + COVID-19 Stats App +
++ Track COVID-19 Spread Across the World +
+
+
+
+ setCountry(e.target.value)}
+ />
+
+
+
+
+ );
+}
+```
+
+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:
+
+
diff --git a/guides/posts/build-covid-vaccine-stats-app/images/code-snippet.png b/guides/posts/build-covid-vaccine-stats-app/images/code-snippet.png
new file mode 100644
index 00000000..414acb86
Binary files /dev/null and b/guides/posts/build-covid-vaccine-stats-app/images/code-snippet.png differ
diff --git a/guides/posts/build-covid-vaccine-stats-app/images/cover.png b/guides/posts/build-covid-vaccine-stats-app/images/cover.png
new file mode 100644
index 00000000..df390788
Binary files /dev/null and b/guides/posts/build-covid-vaccine-stats-app/images/cover.png differ
diff --git a/guides/posts/build-covid-vaccine-stats-app/images/subscribe.png b/guides/posts/build-covid-vaccine-stats-app/images/subscribe.png
new file mode 100644
index 00000000..2fef59c6
Binary files /dev/null and b/guides/posts/build-covid-vaccine-stats-app/images/subscribe.png differ
diff --git a/guides/posts/build-covid-vaccine-stats-app/post.md b/guides/posts/build-covid-vaccine-stats-app/post.md
new file mode 100644
index 00000000..428dc71f
--- /dev/null
+++ b/guides/posts/build-covid-vaccine-stats-app/post.md
@@ -0,0 +1,448 @@
+---
+title: How to build a COVID-19 Vaccine Stats App using Covid 19 World Vaccination Data API?
+description: 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.
+publishedDate: 2021-12-06T06:43:23.822Z
+lastModifiedDate: 2021-12-06T06:43:23.822Z
+authors:
+ - saad
+categories:
+ - apps
+tags:
+ - rapidapi
+ - covid-vaccine-stats-app
+coverImage: ''
+---
+
++ COVID-19 Stats App +
++ Track COVID-19 Spread Across the World +
+
+
+
+ setCountry(e.target.value)}
+ />
+
+
+ {stats && (
+
+
+
+
+
+ )}
+ | + Country + | ++ Confirmed + | ++ Recovered + | ++ Deaths + | +
|---|---|---|---|
| + {stats.country} + | ++ {stats.confirmed} + | ++ {stats.recovered} + | ++ {stats.deaths} + | +
+
+ );
+}
+```
+
+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 (
+ + COVID-19 Vaccine Stats App +
++ Look up COVID-19 Vaccination Stats Across Different Countries +
+
+
+ );
+}
+```
+
+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 (
+ + COVID-19 Vaccine Stats App +
++ Look up COVID-19 Vaccination Stats Across Different Countries +
+
+
+
+
+ );
+}
+```
+
+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.
+
+
+
+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 (
+ + COVID-19 Vaccine Stats App +
++ Look up COVID-19 Vaccination Stats Across Different Countries +
+
+
+
+
+ );
+}
+
+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:
+
+
diff --git a/guides/posts/build-crypto-news-app/images/code-snippet.png b/guides/posts/build-crypto-news-app/images/code-snippet.png
new file mode 100644
index 00000000..e132a9b2
Binary files /dev/null and b/guides/posts/build-crypto-news-app/images/code-snippet.png differ
diff --git a/guides/posts/build-crypto-news-app/images/crypto-news-1.png b/guides/posts/build-crypto-news-app/images/crypto-news-1.png
new file mode 100644
index 00000000..b6f228b1
Binary files /dev/null and b/guides/posts/build-crypto-news-app/images/crypto-news-1.png differ
diff --git a/guides/posts/build-crypto-news-app/images/crypto-news-2.png b/guides/posts/build-crypto-news-app/images/crypto-news-2.png
new file mode 100644
index 00000000..3e103f23
Binary files /dev/null and b/guides/posts/build-crypto-news-app/images/crypto-news-2.png differ
diff --git a/guides/posts/build-crypto-news-app/images/initial.png b/guides/posts/build-crypto-news-app/images/initial.png
new file mode 100644
index 00000000..ea08a714
Binary files /dev/null and b/guides/posts/build-crypto-news-app/images/initial.png differ
diff --git a/guides/posts/build-crypto-news-app/images/subscribe.png b/guides/posts/build-crypto-news-app/images/subscribe.png
new file mode 100644
index 00000000..26bb460c
Binary files /dev/null and b/guides/posts/build-crypto-news-app/images/subscribe.png differ
diff --git a/guides/posts/build-crypto-news-app/post.md b/guides/posts/build-crypto-news-app/post.md
new file mode 100644
index 00000000..d3fe65ac
--- /dev/null
+++ b/guides/posts/build-crypto-news-app/post.md
@@ -0,0 +1,395 @@
+---
+title: How to build a Crypto News Next.js app using a Cryptocurrency API from RapidAPI Hub?
+description: Today, APIs exist that provide all kinds of Cryptocurrency data. We will use one of these APIs in this guide to build a web app that shows the latest Cryptocurrency news.
+publishedDate: 2021-11-18T15:57:17.709Z
+lastModifiedDate: 2021-11-18T15:57:17.709Z
+authors:
+ - "ahmad-bilal"
+categories:
+ - apps
+tags:
+ - rapidapi
+ - cryptocurrency
+ - news
+ - app
+coverImage: ''
+draft: false
+---
+
++ COVID-19 Vaccine Stats App +
++ Look up COVID-19 Vaccination Stats Across Different Countries +
+
+
+
+
+
+
+
+ | + Information + | ++ Value + | +
|---|---|
| + Country + | ++ {res.country} + | +
| + Vaccines + | ++ {res.vaccines} + | +
| + Daily Vaccination Per Million + | ++ {res.daily_vaccinations_per_million} + | +
| + People Fully Vaccinated + | ++ {res.people_fully_vaccinated} + | +
| + People Fully Vaccinated Per Hundred + | ++ {res.people_fully_vaccinated} + | +
| + People Vaccinated + | ++ {res.people_vaccinated} + | +
| + People Vaccinated Per Hundred + | ++ {res.people_vaccinated_per_hundred} + | +
| + Total Vaccination + | ++ {res.total_vaccinations} + | +
| + Total Vaccination Per Hundred + | ++ {res.total_vaccinations_per_hundred} + | +
| + Source + | ++ + {res.source_name} + + | +
+
+ + Made by RapidAPI DevRel Team -{' '} + + See more examples like this + +
+
+
+ );
+}
+```
+
+### → 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 (
+ + Crypto News App +
++ Next.js app which provides information latest news about Crypto + using Cryptocurrency API. +
+
+
+ Crypto News App +
++ Next.js app which provides information latest news about Crypto using + Cryptocurrency API +
+ +
+
+ );
+}
+```
+
+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:
+
+
+
+### → 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 (
+
+
+
+
+
+
+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.
+
+
+
+## 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.
+
+
+ Learn more about how to use RapidAPI Hub.
+
+
+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.
+
+
+
+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 (
+
+
+The world is changing every day, and it is hard to keep up with all the news. Instead of looking up on the internet, we can build a small app to get the top news in one place. We can use an API from [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and use it to create a web app.
+
+
+
+Today, I will build a custom news app that will provide the users with top news results related to their provided query. 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 news 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 “news” in the search section.
+
+
+ Learn more about how to use RapidAPI Hub.
+
+
+You will see different search results related to all the available news APIs. For this piece, I will use [Web Search API](https://RapidAPI.com/contextualwebsearch/api/web-search?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.
+
+
+
+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 somewhere. 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 custom-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 `custom-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/custom-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 (
+
+
+[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 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.
+
+
+ Learn more about how to use RapidAPI Hub.
+
+
+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 (
+
+
+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.
+
+
+
+[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.
+
+
+ Learn more about how to use RapidAPI Hub.
+
+
+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.
+
+
+
+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.
+
+
+
+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 (
+ Codestin Search App
+
+
+
+
+ Learn more about how to use RapidAPI Hub.
+
+
+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.
+
+
+
+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 (
+
+
+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).
+
+
+
+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.
+
+
+ Learn more about how to use RapidAPI Hub.
+
+
+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 (
+
+
+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.
+
+
+
+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.
+
+
+ Learn more about how to use RapidAPI Hub.
+
+
+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 (
+
+
+You often have to write essays, articles, reports. Whether you are a student or a professional, it is a good idea to check your pieces via some application to ensure there is no grammatical error. We can build a small application for this using an API from [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).
+
+
+
+So in this piece, I am building a grammar checker app that will show us different grammar errors. 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 check the grammar. 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 “grammar api” in the search section.
+
+
+ Learn more about how to use RapidAPI Hub.
+
+
+You will see different search results related to grammar APIs. For this piece, I am using [GrammarBot API](https://RapidAPI.com/grammarbot/api/grammarbot?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.
+
+
+
+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 grammar-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 `grammar-checker-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/grammar-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:
+
+```jsx
+export default function Home() {
+ return (
+
+ Crypto News App +
++ Next.js app which provides information latest news about Crypto using Cryptocurrency API +
+
+
+ );
+}
+```
+
+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.
+
+
+
+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 (
+
+
+
+
+
+ );
+}
+```
+
+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 (
+ + Crypto News App +
++ Next.js app which provides information latest news about Crypto + using Cryptocurrency API +
+ +
+
+
+
+
+
+
+ );
+}
+```
+
+This is what our app looks like:
+
+
+
+
+
+## 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).
diff --git a/guides/posts/build-currency-conversion-app/images/convert-endpoint.jpg b/guides/posts/build-currency-conversion-app/images/convert-endpoint.jpg
new file mode 100644
index 00000000..c739adcb
Binary files /dev/null and b/guides/posts/build-currency-conversion-app/images/convert-endpoint.jpg differ
diff --git a/guides/posts/build-currency-conversion-app/images/currency-conversion-app.png b/guides/posts/build-currency-conversion-app/images/currency-conversion-app.png
new file mode 100644
index 00000000..e7967401
Binary files /dev/null and b/guides/posts/build-currency-conversion-app/images/currency-conversion-app.png differ
diff --git a/guides/posts/build-currency-conversion-app/images/subscribe.jpg b/guides/posts/build-currency-conversion-app/images/subscribe.jpg
new file mode 100644
index 00000000..c4e77a49
Binary files /dev/null and b/guides/posts/build-currency-conversion-app/images/subscribe.jpg differ
diff --git a/guides/posts/build-currency-conversion-app/images/symbols-endpoint.jpg b/guides/posts/build-currency-conversion-app/images/symbols-endpoint.jpg
new file mode 100644
index 00000000..834e3694
Binary files /dev/null and b/guides/posts/build-currency-conversion-app/images/symbols-endpoint.jpg differ
diff --git a/guides/posts/build-currency-conversion-app/post.md b/guides/posts/build-currency-conversion-app/post.md
new file mode 100644
index 00000000..1f160e92
--- /dev/null
+++ b/guides/posts/build-currency-conversion-app/post.md
@@ -0,0 +1,438 @@
+---
+title: How to build a Currency Conversion App using Next.js and Currency Conversion API?
+description: 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.
+publishedDate: 2021-10-25T16:19:49.280Z
+lastModifiedDate: 2021-10-25T16:19:49.280Z
+authors:
+ - saad
+categories:
+ - apps
+tags:
+ - rapidapi
+ - currency-conversion-app
+coverImage: ''
+---
+
++ Crypto News App +
++ Next.js app which provides information latest news about Crypto + using Cryptocurrency API +
+ +
+
+
+ {!response && (
+
+ )}
+
+
+ {response &&
+ response.map(news => {
+ return (
+
+ );
+ })}
+
+
+ {response && (
+
+
+
+ )}
+
+
+ );
+}
+```
+
+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 (
+ + Currency Conversion App +
++ Convert Different Concurrencies Quickly +
+
+
+ {(dropdown && (
+
+ )) || (
+ onChange(e.target.value)}
+ />
+ )}
+
+ );
+};
+
+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.
+
+
+
+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 (
+
+
+ );
+}
+
+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.
+
+
+
+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 (
+ + Currency Conversion App +
++ Convert Different Concurrencies Quickly +
+
+
+
+
+
+
+
+
+ );
+}
+
+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:
+
+
diff --git a/guides/posts/build-custom-news-app/images/code-snippet.png b/guides/posts/build-custom-news-app/images/code-snippet.png
new file mode 100644
index 00000000..c32f540a
Binary files /dev/null and b/guides/posts/build-custom-news-app/images/code-snippet.png differ
diff --git a/guides/posts/build-custom-news-app/images/cover.png b/guides/posts/build-custom-news-app/images/cover.png
new file mode 100644
index 00000000..9aaa4a0a
Binary files /dev/null and b/guides/posts/build-custom-news-app/images/cover.png differ
diff --git a/guides/posts/build-custom-news-app/images/subscribe.png b/guides/posts/build-custom-news-app/images/subscribe.png
new file mode 100644
index 00000000..a0898680
Binary files /dev/null and b/guides/posts/build-custom-news-app/images/subscribe.png differ
diff --git a/guides/posts/build-custom-news-app/post.md b/guides/posts/build-custom-news-app/post.md
new file mode 100644
index 00000000..c7ee64aa
--- /dev/null
+++ b/guides/posts/build-custom-news-app/post.md
@@ -0,0 +1,365 @@
+---
+title: How to build a Custom News App using Web Search API?
+description: 'The world is changing every day, and it is hard to keep up with all the news. Instead of looking up on the internet, we can build a small app to get the top news in one place. In this piece, I will show you how you can build such application from scratch.'
+publishedDate: 2022-03-01T13:14:26.140Z
+lastModifiedDate: 2022-03-01T13:14:26.140Z
+authors:
+ - saad
+categories:
+ - apps
+tags:
+ - rapidapi
+ - custom-news-app
+coverImage: ''
+---
+
++ Currency Conversion App +
++ Convert Different Concurrencies Quickly +
+
+
+
+
+
+ {convertedAmount && (
+
+
+
+ )}
+ + Converted Amount: {`${convertedAmount} ${convertTo}`} +
+
+
+ );
+}
+```
+
+It will create two headings for you with the text “Custom News App” and “Get the latest news from around the world for a given query”. 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 query in the input box and use the search button to get the news.
+
+For this, copy the following code and paste it in `pages/index.js`:
+
+```jsx
+export default function Home() {
+ return (
+ + Custom News App +
++ Get the latest news from around the world for a given query +
+
+
+ );
+}
+```
+
+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 news information 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 [query, setQuery] = useState('taylor swift');
+ const [response, setResponse] = useState(null);
+
+ return (
+ + Custom News App +
++ Get the latest news from around the world for a given query +
+
+
+
+
+
+ );
+}
+```
+
+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 [Web Search API](https://RapidAPI.com/contextualwebsearch/api/web-search?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
+
+RapidAPI Hub provides you with code snippets in different languages for integrating the API. I am going to use the `(JavaScript) Axios` one.
+
+
+
+Now create a file with the name `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://contextualwebsearch-websearch-v1.p.rapidapi.com/api/search/NewsSearchAPI',
+ params: {
+ q: req.query.query,
+ pageNumber: '1',
+ pageSize: '10',
+ autoCorrect: 'true',
+ fromPublishedDate: 'null',
+ toPublishedDate: 'null'
+ },
+ headers: {
+ 'x-rapidapi-host':
+ 'contextualwebsearch-websearch-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 [Web Search API](https://RapidAPI.com/contextualwebsearch/api/web-search?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 {useState} from 'react';
+import axios from 'axios';
+
+export default function Home() {
+ const [query, setQuery] = useState('taylor swift');
+ const [response, setResponse] = useState(null);
+ const [btnText, setBtnText] = useState('Search');
+
+ /**
+ *
+ *
+ * Fetches news information from the API
+ */
+ const fetchNews = async e => {
+ e.preventDefault();
+ try {
+ setBtnText('Searching...');
+ const res = await axios.get(`/api/news`, {
+ params: {
+ query
+ }
+ });
+ setResponse(res.data.value);
+ } catch (err) {
+ console.log(err);
+ }
+ setBtnText('Search');
+ };
+
+ return (
+ + Custom News App +
++ Get the latest news from around the world for a given query +
+
+
+
+
+
+ );
+}
+```
+
+You can see that I have created a function, `fetchNews`, to request the API. I have also created a piece of UI that is conditionally rendering on the screen based on the `response` state variable value.
+
+## Wrap Up
+
+That’s it. We have successfully built a [Custom News App](https://rapidapi-example-custom-news-app.vercel.app/) using [Web Search API](https://RapidAPI.com/contextualwebsearch/api/web-search?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/custom-news-app) of this web app.
+
+In the end, it will look something like this:
+
+
diff --git a/guides/posts/build-dictionary-app/images/code-snippet.png b/guides/posts/build-dictionary-app/images/code-snippet.png
new file mode 100644
index 00000000..cce14a7d
Binary files /dev/null and b/guides/posts/build-dictionary-app/images/code-snippet.png differ
diff --git a/guides/posts/build-dictionary-app/images/cover.png b/guides/posts/build-dictionary-app/images/cover.png
new file mode 100644
index 00000000..6865bdd8
Binary files /dev/null and b/guides/posts/build-dictionary-app/images/cover.png differ
diff --git a/guides/posts/build-dictionary-app/post.md b/guides/posts/build-dictionary-app/post.md
new file mode 100644
index 00000000..1599a57e
--- /dev/null
+++ b/guides/posts/build-dictionary-app/post.md
@@ -0,0 +1,359 @@
+---
+title: How to build a Dictionary app using Next.js and dictionary API?
+description: 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.
+publishedDate: 2021-11-12T20:22:52.607Z
+lastModifiedDate: 2021-11-12T20:22:52.607Z
+authors:
+ - saad
+categories:
+ - apps
+tags:
+ - build-dictionary-app
+coverImage: ''
+---
+
++ Custom News App +
++ Get the latest news from around the world for a given query +
+
+
+ {response && (
+
+
+ {response.map(res => {
+ return (
+
+ );
+ })}
+
+ )}
+ 
+
+
+
+ + Made by RapidAPI DevRel Team -{' '} + + See more examples like this + +
+
+
+ );
+}
+```
+
+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 (
+ + Dictionary App +
++ Check Meaning of any word +
+
+
+ );
+}
+```
+
+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 (
+ + Dictionary App +
++ Check Meaning of any word +
+
+
+
+
+
+ );
+}
+```
+
+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.
+
+
+
+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 (
+ + Dictionary App +
++ Check Meaning of any word +
+
+
+
+
+
+ );
+}
+```
+
+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:
+
+
diff --git a/guides/posts/build-domain-app/images/code-snippet.png b/guides/posts/build-domain-app/images/code-snippet.png
new file mode 100644
index 00000000..ee249253
Binary files /dev/null and b/guides/posts/build-domain-app/images/code-snippet.png differ
diff --git a/guides/posts/build-domain-app/images/domain-app.png b/guides/posts/build-domain-app/images/domain-app.png
new file mode 100644
index 00000000..6ed722ea
Binary files /dev/null and b/guides/posts/build-domain-app/images/domain-app.png differ
diff --git a/guides/posts/build-domain-app/images/example.png b/guides/posts/build-domain-app/images/example.png
new file mode 100644
index 00000000..9577ed1e
Binary files /dev/null and b/guides/posts/build-domain-app/images/example.png differ
diff --git a/guides/posts/build-domain-app/images/preview.png b/guides/posts/build-domain-app/images/preview.png
new file mode 100644
index 00000000..dea97f5d
Binary files /dev/null and b/guides/posts/build-domain-app/images/preview.png differ
diff --git a/guides/posts/build-domain-app/images/subscribe.png b/guides/posts/build-domain-app/images/subscribe.png
new file mode 100644
index 00000000..514b0862
Binary files /dev/null and b/guides/posts/build-domain-app/images/subscribe.png differ
diff --git a/guides/posts/build-domain-app/post.md b/guides/posts/build-domain-app/post.md
new file mode 100644
index 00000000..b723f754
--- /dev/null
+++ b/guides/posts/build-domain-app/post.md
@@ -0,0 +1,506 @@
+---
+title: How to build a Domain App using a WHOIS API and Next.js?
+description: In this guide, we will be building a web application that will allow users to look up web domains and check their availability using an API from RapidAPI Hub.
+publishedDate: 2021-12-17T15:57:17.709Z
+lastModifiedDate: 2021-17-09T15:57:17.709Z
+authors:
+ - 'ahmad-bilal'
+categories:
+ - apps
+tags:
+ - rapidapi
+ - domain
+ - app
+coverImage: ''
+---
+
++ Dictionary App +
++ Check Meaning of any word +
+
+
+ {wordInfo && (
+
+
+
+
+
+
+ )}
+ | + + {word} + + | ++ + Definition + + | +
|---|---|
| 1. | ++ {wordInfo[1]} + | +
| 2. | ++ {wordInfo[2]} + | +
+
+ + Made by RapidAPI DevRel Team –{' '} + + + See Examples Like this + + +
+
+
+ );
+}
+```
+
+I added the following to `pages/_app.js`.
+
+```jsx
+import Head from 'next/head';
+import 'tailwindcss/tailwind.css';
+
+function MyApp({Component, pageProps}) {
+ return (
+ <>
+
+ + Domain Search +
++ Check availability and information of any domain. +
+
+
+ );
+}
+```
+
+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 (
+ + Domain Search +
++ Check availability and information of any domain. +
+ +
+
+ );
+}
+```
+
+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.
+
+
+
+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 (
+ + Domain Search +
++ Check availability and information of any domain. +
+ +
+
+ );
+}
+```
+
+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:
+
+
+
+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 (
+ + Domain Search +
++ Check availability and information of any domain. +
+ +
+
+ );
+}
+```
+
+This is what our app looks like in its final form:
+
+
+
+## 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).
diff --git a/guides/posts/build-email-validator-app/images/code-snippet.png b/guides/posts/build-email-validator-app/images/code-snippet.png
new file mode 100644
index 00000000..16bcc19f
Binary files /dev/null and b/guides/posts/build-email-validator-app/images/code-snippet.png differ
diff --git a/guides/posts/build-email-validator-app/images/cover.png b/guides/posts/build-email-validator-app/images/cover.png
new file mode 100644
index 00000000..607366f6
Binary files /dev/null and b/guides/posts/build-email-validator-app/images/cover.png differ
diff --git a/guides/posts/build-email-validator-app/images/subscribe.png b/guides/posts/build-email-validator-app/images/subscribe.png
new file mode 100644
index 00000000..7fb0a958
Binary files /dev/null and b/guides/posts/build-email-validator-app/images/subscribe.png differ
diff --git a/guides/posts/build-email-validator-app/post.md b/guides/posts/build-email-validator-app/post.md
new file mode 100644
index 00000000..221a8870
--- /dev/null
+++ b/guides/posts/build-email-validator-app/post.md
@@ -0,0 +1,372 @@
+---
+title: How to build an Email Validator App Using Next.js and Email Validator API?
+description: 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.
+publishedDate: 2021-11-12T20:22:52.607Z
+lastModifiedDate: 2021-11-12T20:22:52.607Z
+authors:
+ - saad
+categories:
+ - apps
+tags:
+ - email-validator-app
+coverImage: ''
+---
+
+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.
+
++ Domain Search +
++ Check availability and information of any domain. +
+ + + {errorInfo && ( +
+
+ )}
+ {response && (
+ + Error: {errorInfo} +
+
+
+ )}
+ + The domain {keyword} is{' '} + {response.payload.availability === 'available' ? ( + available + ) : ( + not available + )} +
+ { + // If domain is already registered, show its details + response.payload.availability !== 'available' && ( +
+
+
+
+
+ )
+ }
+ + Details: +
+| + Domain + | ++ {response.payload.full} + | +
| + Status + | ++ {response.payload.availability} + | +
| + Registrant + | ++ { + response.payload + .registrar_name + } + | +
| + Created On + | ++ {new Date( + response.payload.creation_date // Converting to dd/mm/yyyy format + ).toLocaleDateString()} + | +
| + Expires After + | ++ { + response.payload + .time_to_expire + } + | +
| + Updated + | ++ { + response.payload + .time_since_last_update + }{' '} + ago + | +
+
+ );
+}
+```
+
+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 (
+ + Email Validator App +
++ Check if an email address exists or not +
+
+
+ );
+}
+```
+
+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 (
+ + Email Validator App +
++ Check if an email address exists or not +
+
+
+
+
+
+ );
+}
+```
+
+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.
+
+
+
+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 (
+ + Email Validator App +
++ Check if an email address exists or not +
+
+
+
+
+
+ );
+}
+```
+
+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:
+
+
diff --git a/guides/posts/build-food-nutrient-app/images/code-snippet.png b/guides/posts/build-food-nutrient-app/images/code-snippet.png
new file mode 100644
index 00000000..a726c01e
Binary files /dev/null and b/guides/posts/build-food-nutrient-app/images/code-snippet.png differ
diff --git a/guides/posts/build-food-nutrient-app/images/cover.png b/guides/posts/build-food-nutrient-app/images/cover.png
new file mode 100644
index 00000000..254bb0f0
Binary files /dev/null and b/guides/posts/build-food-nutrient-app/images/cover.png differ
diff --git a/guides/posts/build-food-nutrient-app/post.md b/guides/posts/build-food-nutrient-app/post.md
new file mode 100644
index 00000000..ac61897a
--- /dev/null
+++ b/guides/posts/build-food-nutrient-app/post.md
@@ -0,0 +1,421 @@
+---
+title: How to build a Food Nutrient App using Calorie Ninja API?
+description: 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.
+publishedDate: 2022-01-17T04:02:09.132Z
+lastModifiedDate: 2022-01-17T04:02:09.132Z
+authors:
+ - saad
+categories:
+ - apps
+tags:
+ - rapidapi
+ - nutrient-app
+ - food-nutrient
+coverImage: ''
+---
+
++ Email Validator App +
++ Check if an email address exists or not +
+
+
+ {res && (
+
+
+
+
+
+
+ )}
+ | + + Information + + | ++ + Result + + | +
|---|---|
| Valid | ++ {res.valid.toString()} + | +
| + Disposable + | ++ {res.disposable.toString()} + | +
| Domain | ++ {res.domain} + | +
| Text | ++ {res.text} + | +
| Reason | ++ {res.reason} + | +
+
+ );
+}
+```
+
+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 (
+ + Food Nutrient App +
++ Shows Different Nutrient Quantity in A Food +
+
+
+ );
+}
+```
+
+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 (
+ + Food Nutrient App +
++ Shows Different Nutrient Quantity in A Food +
+
+
+
+
+
+ );
+}
+```
+
+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.
+
+
+
+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 (
+ + Food Nutrient App +
++ Shows Different Nutrient Quantity in A Food +
+
+
+
+
+
+ );
+}
+```
+
+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:
+
+
diff --git a/guides/posts/build-game-news-app/images/code-snippet.png b/guides/posts/build-game-news-app/images/code-snippet.png
new file mode 100644
index 00000000..861ec93f
Binary files /dev/null and b/guides/posts/build-game-news-app/images/code-snippet.png differ
diff --git a/guides/posts/build-game-news-app/images/cover.png b/guides/posts/build-game-news-app/images/cover.png
new file mode 100644
index 00000000..31ebdbfa
Binary files /dev/null and b/guides/posts/build-game-news-app/images/cover.png differ
diff --git a/guides/posts/build-game-news-app/post.md b/guides/posts/build-game-news-app/post.md
new file mode 100644
index 00000000..244bda05
--- /dev/null
+++ b/guides/posts/build-game-news-app/post.md
@@ -0,0 +1,237 @@
+---
+title: How to build a Game News App using Gaming News API?
+description: 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.
+authors:
+ - saad
+categories:
+ - apps
+tags:
+ - game-news-app
+ - app
+publishedDate: 2022-01-10T10:25:51.945Z
+lastModifiedDate: 2022-01-10T10:25:51.945Z
+coverImage: ''
+---
+
++ Food Nutrient App +
++ Shows Different Nutrient Quantity in A Food +
+
+
+ {res && (
+
+
+
+
+
+
+ )}
+ | + Nutrient + | ++ Quantity + | +
|---|---|
| + Calories + | ++ {res.calories} + | +
| + Carbohydrates + | ++ {res.carbohydrates_total_g} g + | +
| + Cholesterol + | ++ {res.cholesterol_mg} mg + | +
| + Fat Saturated + | ++ {res.fat_saturated_g} g + | +
| + Total Fat + | ++ {res.fat_total_g} g + | +
| + Fiber + | ++ {res.fiber_g} g + | +
| + Potassium + | ++ {res.potassium_mg} mg + | +
| + Protein + | ++ {res.protein_g} g + | +
| + Serving Size + | ++ {res.serving_size_g} g + | +
| + Sodium + | ++ {res.sodium_mg} mg + | +
| + Sugar + | ++ {res.sugar_g} g + | +
+
+ + Made by RapidAPI DevRel Team -{' '} + + See more examples like this + +
+
+
+ );
+}
+```
+
+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.
+
+
+
+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 (
+ + Game News App +
++ Take a look at what is happening in the game world +
+
+
+ );
+}
+
+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:
+
+
diff --git a/guides/posts/build-grammar-checker-app/images/code-snippet.png b/guides/posts/build-grammar-checker-app/images/code-snippet.png
new file mode 100644
index 00000000..987893d0
Binary files /dev/null and b/guides/posts/build-grammar-checker-app/images/code-snippet.png differ
diff --git a/guides/posts/build-grammar-checker-app/images/cover.png b/guides/posts/build-grammar-checker-app/images/cover.png
new file mode 100644
index 00000000..cc03308e
Binary files /dev/null and b/guides/posts/build-grammar-checker-app/images/cover.png differ
diff --git a/guides/posts/build-grammar-checker-app/images/subscribe.png b/guides/posts/build-grammar-checker-app/images/subscribe.png
new file mode 100644
index 00000000..8e3ba3ec
Binary files /dev/null and b/guides/posts/build-grammar-checker-app/images/subscribe.png differ
diff --git a/guides/posts/build-grammar-checker-app/post.md b/guides/posts/build-grammar-checker-app/post.md
new file mode 100644
index 00000000..dd4f7598
--- /dev/null
+++ b/guides/posts/build-grammar-checker-app/post.md
@@ -0,0 +1,347 @@
+---
+title: How to build a Grammar Check App using GrammarBot API?
+description: 'You often have to write essays, articles, reports. Whether you are a student or a professional, it is a good idea to check your pieces via some application. So today, we will build a grammar checker app that will check our content for grammar errors.'
+authors:
+ - saad
+categories:
+ - apps
+tags:
+ - grammar-checker-app
+ - rapidapi
+ - app
+publishedDate: 2022-02-07T08:22:37.323Z
+lastModifiedDate: 2022-02-07T08:22:37.323Z
+coverImage: ''
+---
+
++ Game News App +
++ Take a look at what is happening in the game world +
+ {value.map(news => { + return ( + + ); + })} +
+
+ + Made by RapidAPI DevRel Team -{' '} + + See more examples like this + +
+
+
+ );
+}
+```
+
+It will create two headings for you with the text “Grammar Checker App” and “Check to see if what you have written is Grammarly correct”. You can change it to anything you prefer.
+
+### → STEP #2
+
+Now let’s create two text areas, one for user content and the other to show the grammar mistakes, and a check button. For this, copy the following code and paste it in `pages/index.js`:
+
+```jsx
+export default function Home() {
+ return (
+ + Grammar Checker App +
++ Check to see if what you have written is Grammarly correct +
+
+
+ );
+}
+```
+
+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 response 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 [text, settext] = useState('Sam are off to garden.');
+ const [res, setRes] = useState('');
+
+ return (
+ + Grammar Checker App +
++ Check to see if what you have written is Grammarly correct +
+
+
+
+
+
+
+
+
+
+ Grammar Checker App +
++ Check to see if what you have written is Grammarly correct +
+
+