+ 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 (
+
+
+[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 (
+
+
+GraphQL APIs allow developers to build highly performant production-ready apps. However, GraphQL APIs are a tad bit different from other types like REST in terms of implementation.
+
+
+
+[RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) lets you choose from thousands of public APIs for use in your projects. These also include GraphQL APIs, and you can explore thousands of them on [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).
+
+Today, we will be building a web application using the Next.js framework and fetching data from a GraphQL API. The app will allow us to get details like currency, flag, and capital of any given country. Let's build it.
+
+## Stack
+
+The stack for our app is going to be as follows. I am going to use [Next.js](https://nextjs.org/) for the client-side of our app and [TailwindCSS](https://tailwindcss.com/) for styling it.
+
+Even if you don’t know about Next.js, being familiar with React will be enough for this guide. Tailwind is a CSS framework that provides utility classes to use directly in the markup, saving time during the development process.
+
+## Choosing The API
+
+There are many GraphQL APIs available on [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel). [Create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) on it if you haven’t already. Then, you can look for [GraphQL APIs](https://rapidapi.com/search/graphql?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) in the search section.
+
+
+ Learn more about how to use RapidAPI Hub.
+
+
+For our app, I will use [GeoDB Cities API](https://rapidapi.com/wirefreethought/api/geodb-cities-graphql/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel), which can serve the global city, region, and country data.
+
+To use this API, you need to subscribe to it first. You can do this by clicking on the **Subscribe to Test** button.
+
+
+
+Once you click the button, you will be redirected to the pricing page, which will show the subscription packages for the API. The free plan allows up to 1000 requests per day with restricted features, and we will use it for this guide.
+
+Once subscribed, you will be back on the **Endpoints** page. In the central section, you should see a field named `x-rapidapi-key`. Save its value. We will need it later to call the API.
+
+## Building The UI
+
+We can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your countryNameinal.
+
+```sh
+npx create-next-app -e with-tailwindcss graphql-app
+```
+
+It will take some time to install the packages. After generating the boilerplate, you will see a folder with the name `graphql-app` has been created. Open this folder in your preferred code editor.
+
+### Project Files
+
+In our project folder, we will have the following folders and files. I will briefly break them down for you:
+
+- `pages` directory: It has the `index.js` file, which is the entry point of our app, basically the home page. It also has`_app.js` and another directory named `api`, where we will store the requests to our API.
+- `public` directory: It holds assets. You can place your static files here to load later in the application.
+- `package.json`: This file contains the metadata of your project.
+- `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
+- `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
+- `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
+- `readme.md`: It’s a markdown file for documentation.
+
+I will be using a particular set of colors for this app. You can use colors of your preference, but if you are interested in mine, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/graphql-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are Tailwind configurations for the colors I will be using.
+
+With all that set, it's time to code the app. Let's jump right into it.
+
+### → STEP #1
+
+Open the `pages/index.js` file and remove all the existing code. Let's add the layout.
+
+```js
+export default function Home() {
+ return (
+
+ 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..3b596f02
--- /dev/null
+++ b/guides/posts/build-currency-conversion-app/post.md
@@ -0,0 +1,437 @@
+---
+title: How to build a Currency Conversion App using Next.js and Currency Conversion API?
+description: Today, I am going to 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
+category: 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-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..108a8b59
--- /dev/null
+++ b/guides/posts/build-dictionary-app/post.md
@@ -0,0 +1,358 @@
+---
+title: How to build a Dictionary app using Next.js and dictionary API?
+description: "Let's take a look at how you can build a dictionary application."
+publishedDate: 2021-11-12T20:22:52.607Z
+lastModifiedDate: 2021-11-12T20:22:52.607Z
+authors:
+ - saad
+category: apps
+tags:
+ - build-dictionary-app
+coverImage: ''
+---
+
++ Currency Conversion App +
++ Convert Different Concurrencies Quickly +
+
+
+
+
+
+ {convertedAmount && (
+
+
+
+ )}
+ + Converted Amount: {`${convertedAmount} ${convertTo}`} +
+
+
+ );
+}
+```
+
+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-graphql-app/images/graphql-app.png b/guides/posts/build-graphql-app/images/graphql-app.png
new file mode 100644
index 00000000..82797555
Binary files /dev/null and b/guides/posts/build-graphql-app/images/graphql-app.png differ
diff --git a/guides/posts/build-graphql-app/images/response.png b/guides/posts/build-graphql-app/images/response.png
new file mode 100644
index 00000000..653568db
Binary files /dev/null and b/guides/posts/build-graphql-app/images/response.png differ
diff --git a/guides/posts/build-graphql-app/images/subscribe.png b/guides/posts/build-graphql-app/images/subscribe.png
new file mode 100644
index 00000000..afc30456
Binary files /dev/null and b/guides/posts/build-graphql-app/images/subscribe.png differ
diff --git a/guides/posts/build-graphql-app/images/testing-endpoint.png b/guides/posts/build-graphql-app/images/testing-endpoint.png
new file mode 100644
index 00000000..97143757
Binary files /dev/null and b/guides/posts/build-graphql-app/images/testing-endpoint.png differ
diff --git a/guides/posts/build-graphql-app/post.md b/guides/posts/build-graphql-app/post.md
new file mode 100644
index 00000000..28ccf135
--- /dev/null
+++ b/guides/posts/build-graphql-app/post.md
@@ -0,0 +1,455 @@
+---
+title: How to build a Next.js app using a GraphQL API?
+description: Let's see how we can fetch and use data from GraphQL in a Next.js app.
+publishedDate: 2021-11-10T12:17:11.709Z
+lastModifiedDate: 2021-11-10T12:17:11.709Z
+authors:
+ - ahmadBilal
+category: apps
+tags:
+ - rapidapi
+ - graphql
+ - app
+ - nextjs
+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 + + +
+
+
+ );
+}
+```
+
+### → STEP #2
+
+We want to add the functionality of searching for any country. So we will need an input field where the query will go, and it will be submitted by clicking a button. Let's add both of these.
+
+```js
+export default function Home() {
+ return (
+ + Example GraphQl App +
++ Next.js app which provides information about a given country + using a GraphQl API. +
+
+
+ );
+}
+```
+
+This code is going to create the search field and the submit button. I have also styled and made them responsive using [TailwindCSS](<(https://tailwindcss.com/)>).
+
+### → STEP #3
+
+Let’s create two states, `countryName` to store the search input and `response` to hold the response from the API.
+
+```js
+import {useState} from 'react';
+
+export default function Home() {
+ const [countryName, setCountryName] = useState(null);
+ const [response, setResponse] = useState(null);
+
+ return (
+ + Example GraphQl App +
++ Next.js app which provides information about a given country + using a GraphQl API. +
+
+
+
+
+
+
+
+
+ );
+}
+```
+
+I am using the `setCountryName(e.target.value)` to save the value of the input field in the state we just created, using the `onChange` event handler.
+
+### → STEP #4
+
+Let’s integrate the API now. For this, first, create a `.env.local` file in the root directory of your project and paste the following into it:
+
+```sh
+NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY
+```
+
+Remember the `x-rapidapi-key` I asked you to save earlier? You need to replace `YOUR-RAPIDAPI-KEY` with its value in this file. You get the key after subscribing to the [GeoDB API](https://rapidapi.com/wirefreethought/api/geodb-cities-graphql/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).
+
+Now download and add `axios` to your project. For this, run the usual command in the terminal:
+
+```sh
+npm install axios
+```
+
+And import `axios` in `pages/index.js`.
+
+```js
+import axios from ‘axios’;
+```
+
+### → STEP #5
+
+Before we use the API, we need to find out what kind of a query is required for our use case, fetching a given country’s details. Since it is based on GraphQL, you can go and check its [GraphQL schema here](https://wirefreethought.github.io/geodb-cities-graphql-schema-docs/). I will summarize it for you. We can find a country by passing the required country's name as `namePrefix` to the `Countries` endpoint. It provides an array of objects named `edges`, which holds information of all countries that match our input. Then, we can traverse through the object to get our required data.
+
+Our GraphQL query should look something like this:
+
+```graphql
+{
+ countries(namePrefix: "Ame") {
+ edges {
+ node {
+ name
+ capital
+ flagImageUri
+ currencyCodes
+ }
+ }
+ }
+}
+```
+
+Let's test it. On the [endpoints page](https://rapidapi.com/wirefreethought/api/geodb-cities-graphql/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel), scroll down to find a text section where you can enter your GraphQL query. Copy the GraphQL query we created above and paste it here.
+
+
+
+[RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) automatically generates snippets in multiple languages and options. Copy the `(JavaScript) Axios` one. Now, go ahead and click the `Test Endpoint` button. You will get the following response:
+
+
+
+Our query was successful, and we received the details for our input **"Ame"**. Now, it is time to integrate it into our app. I am going to create a file named `countries.js` in the `pages/api` directory and use the JavaScript (Axios) code snippet we copied above. as follows:
+
+```js
+import axios from 'axios';
+
+export default async function handler(req, res) {
+ const options = {
+ method: 'POST',
+ url: 'https://geodb-cities-graphql.p.rapidapi.com/',
+ headers: {
+ 'content-type': 'application/json',
+ 'x-rapidapi-host': 'geodb-cities-graphql.p.rapidapi.com',
+ 'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
+ },
+ data: {
+ query: `{
+ countries(namePrefix: "Ame") {
+ edges {
+ node {
+ name
+ capital
+ flagImageUri
+ currencyCodes
+ }
+ }
+ }
+ }`
+ }
+ };
+
+ axios
+ .request(options)
+ .then(function (response) {
+ res.status(200).json(response.data);
+ })
+ .catch(function (error) {
+ console.error(error);
+ res.status(response.status);
+ });
+}
+```
+
+Done. But do you see the problem here? It is the hard-coded input value. We need to pass it dynamically from the client side. However, in GraphQL queries, we can not simply replace "Ame" with our input value from the client. Instead, we will have to make the following changes to the `data` object:
+
+```js
+ data: {
+ query: `query getCountry($prefix: String!){
+ countries(namePrefix: $prefix) {
+ edges {
+ node {
+ name
+ capital
+ flagImageUri
+ currencyCodes
+ }
+ }
+ }
+ }`,
+ variables: {
+ prefix: req.query.countryName,
+ },
+ },
+```
+
+We create a query function `getCountry`, which takes a parameter `prefix` of type string. Then, inside the data object, we create another child named `variables` we can pass our client's input variable.
+
+Finally, our API call is ready. Now we need to write a function in the `pages/index.js` file to send the request from the client-side to our API at `http://localhost:3000/api/countries`. You can just copy and replace the following code in `pages/index.js` file:
+
+```js
+import axios from 'axios';
+import {useState} from 'react';
+
+export default function Home() {
+ const [countryName, setCountryName] = useState(null);
+ const [response, setResponse] = useState(null);
+
+ /**
+ * Fetches search results for the input country name
+ */
+ const getSearchResults = async () => {
+ try {
+ const res = await axios.get('api/countries/', {
+ params: {countryName}
+ });
+ const {data} = res;
+ setResponse(data.data.countries.edges);
+ } catch (error) {
+ console.error(error);
+ }
+ };
+
+ return (
+ + Example GraphQl App +
++ Next.js app, which provides information about a given country + using a GraphQl API. +
+ +
+ setCountryName(e.target.value)}
+ />
+
+
+
+
+
+
+
+ );
+}
+```
+
+See the `getSearchResults` function I have created to get the response. It sends the `countryName` state holding our text input as the parameter. Once the response is received, it is stored in the `response` state. We bind this function to the search button we created, using the `onClick` event handler.
+
+### → FINAL STEP
+
+In the final step, we will display the results. The API returns an object having all the details for our query. We are going to use a map function to iterate through this array of objects. I will be displaying the country's full name, capital, currency code, and image of its flag. For the design, I used a grid to organize cards for each country. This is our client-side code in its final form:
+
+```js
+import axios from "axios";
+import { useState } from "react";
+
+export default function Home() {
+ const [countryName, setCountryName] = useState(null);
+ const [response, setResponse] = useState(null);
+
+ const getSearchResults = async () => {
+ try {
+ const res = await axios.get("api/countries/", {
+ params: { countryName },
+ });
+ const { data } = res;
+ setResponse(data.data.countries.edges);
+ } catch (error) {
+ console.error(error);
+ }
+ };
+
+ return (
+ + Example GraphQl App +
++ Next.js app which provides information about a given country + using a GraphQl API. +
+ +
+ setCountryName(e.target.value)}
+ />
+
+
+
+
+
+
+
+
+There are a lot of different movie APIs available on the Internet. Instead of looking for them, you can visit [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and search for them. You will find a lot of different API options there.
+
+
+
+[RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) provides you with thousands of these public APIs that you can use in your apps. Many APIs on [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) have free versions available, but you can also buy a premium version if the free version does not satisfy your need.
+
+Today, I am building a web application that will show the details of a movie like its runtime, the year it was released, poster, etc., to the user. So without any further ado, let’s jump in.
+
+## Stack
+
+We need to choose a stack first to build this application. I have decided to go with the [Jamstack](https://jamstack.org/).
+
+I am going to use [Next.js](https://nextjs.org/) for the client-side and [TailwindCSS](https://tailwindcss.com/) for the styling.
+
+If you don’t know about Next.js, it is a JavaScript framework built on top of React and provides features like server-side rendering, static site generation, etc. Tailwind is a CSS framework that provides utility classes to speed up the development process.
+
+## Choosing The API
+
+Let’s find an API that we can use to fetch the movie information. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already and then search for “movies” in the search section.
+
+
+ Learn more about how to use RapidAPI Hub.
+
+
+You will see different search results related to all the available movie APIs. For this piece, I am using [IMDb API](https://rapidapi.com/apidojo/api/imdb8/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) by [Api Dojo](https://rapidapi.com/user/apidojo?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).
+
+To use this API, you need to subscribe to it first. You can do this by clicking on **Subscribe to Test** button.
+
+
+
+Once you click the button, you will be redirected to another page where different available subscription packages will be shown. Let’s go with the free one for now.
+
+After all this, you will be redirected back to the original page. Here you will have a key `x-rapidapi-key`. Save it. It will be used later in the application.
+
+## Building The UI
+
+You can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal. So let’s do that.
+
+```sh
+npx create-next-app -e with-tailwindcss movie-details-app
+```
+
+This command is going to take a minute to set everything up. After generating the boilerplate, you will see a folder with the name `movie-details-app` has been created. Open this folder in your preferred code editor. I am going to use [VSCode](https://code.visualstudio.com/) for the project.
+
+### Project Files
+
+When you open the project in your code editor, you will see the following directories and files in the root directory:
+
+- `pages` directory: Inside it, you will have files `index.js`, `_app.js`, and another directory called `api`. You only need to know about the - - - `index.js` file that is the main entry point in your project.
+- `public` directory: This directory contains icons. You place your static files here to load later in the application.
+- `node_modules`: It’s another directory that contains all the node modules you are using in your application.
+- `package.json`: This file contains the metadata of your project.
+- `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
+- `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
+- `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
+- `readme.md`: It’s a markdown file for documentation.
+
+Before we move on to writing the code, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/movie-details-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are some TailwindCSS configurations I have done specifically for this project. I have added some colors that you do not have by default with TailwindCSS and set some screen sizes.
+
+Now create a file called `next.config.js` and paste all the content from [here](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/movie-details-app/next.config.js) to this file. We are doing this because the API will provide us with the image URLs. We will use the Next.js Image component to render the image, and this component needs a domain property in the `next.config.js` file to render an image from a URL.
+
+Now let’s start writing the code. I am going to do it in steps so you can follow along.
+
+### → STEP #1
+
+Open the `pages/index.js` file and remove all the existing code. After this, copy-paste the following code there:
+
+```js
+export default function Home() {
+ return (
+
+
+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 is about music. We will see how we can implement features provided by the likes of Shazam in our own music app. Let's build it.
+
+## Stack
+
+The stack for our app is going to be as follows. I am going to use [Next.js](https://nextjs.org/) for the client-side of our app and [TailwindCSS](https://tailwindcss.com/) for styling it.
+
+Even if you don’t know about Next.js, being familiar with React will be enough for this guide. Tailwind is a CSS framework that provides utility classes to use directly in the markup, saving time during the development process.
+
+## Choosing The API
+
+Let’s find an API that provides Shazam-like features. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already. Then, search for "Shazam" in the search section.
+
+
+ Learn more about how to use RapidAPI Hub.
+
+
+You will see that we have a lot of options for Shazam-related APIs. For our app, I am going to use the most popular one, [Shazam API](https://rapidapi.com/apidojo/api/shazam/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).
+
+To use this API, you need to subscribe to it first. You can do this by clicking on the **Subscribe to Test** button.
+
+
+
+Once you click the button, you will be redirected to the pricing page, which will show the subscription packages for the API. The free plan allows up to 500 requests per month. We are going to subscribe to the free plan for this guide.
+
+Once subscribed, you will be back on the **Endpoints** page. In the central section, you should see a field named `x-rapidapi-key`. Save its value. We will need it later to call the API.
+
+## Building The UI
+
+We can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal.
+
+```sh
+npx create-next-app -e with-tailwindcss music-app
+```
+
+It will take some time to install the packages. After generating the boilerplate, you will see a folder with the name `music-app` has been created. Open this folder in your preferred code editor.
+
+### Project Files
+
+In our project folder, we will have the following folders and files. I will briefly break them down for you:
+
+- `pages` directory: It has the `index.js` file, which is the entry point of our app, basically the home page. It also has`_app.js` and another directory named `api` where we will store the requests to our API.
+- `public` directory: It holds assets. You can place your static files here to load later in the application.
+- `package.json`: This file contains the metadata of your project.
+- `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
+- `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
+- `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
+- `readme.md`: It’s a markdown file for documentation.
+
+I will be using a particular set of colors for this app. You can use colors of your preference, but if you are interested in mine, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/music-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are Tailwind configurations for the colors I will be using.
+
+With all that set, it's time to code the app. Let's jump right into it.
+
+### → STEP #1
+
+Open the `pages/index.js` file and remove all the existing code. Let's add the layout.
+
+```js
+export default function Home() {
+ return (
+
+
+There are a lot of APIs out there that you can use for your projects. But finding these APIs often becomes a hassle. [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) is the world’s largest API hub and it can provide you with all the APIs you need. Anyone can look up any API they need in seconds and also monetize their APIs.
+
+
+
+Today, I have decided to use one of the APIs from [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and develop a small application using it. I am going to build a news application using an API from Microsoft.
+
+## Stack
+
+We need to choose a stack first to build this application. Since the application consumes an API and does not need a backend, let’s go with the [Jamstack](https://jamstack.org/).
+
+I am going to use [Next.js](https://nextjs.org/) for the client-side and [TailwindCSS](https://tailwindcss.com/) for the styling.
+
+If you don’t know about Next.js, it is a JavaScript framework built on top of React and provides features like server-side rendering, static site generation, etc. Tailwind is a CSS framework that provides utility classes to speed up the development process.
+
+## Choosing The API
+
+Let’s decide which API we are going to use. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already and then search for "news" in the search section.
+
+
+ Learn more about how to use RapidAPI Hub.
+
+
+I am going to use the [Bing News Search API](https://RapidAPI.com/microsoft-azure-org-microsoft-cognitive-services/api/bing-news-search1/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) by Microsoft Azure.
+
+To use this API, you need to subscribe to it first. You can do this by clicking on **Subscribe to Test** button.
+
+
+
+Once you click the button, you will be redirected to another page where different available subscription packages will be shown. Let’s go with the free one for now.
+
+After all this, you will be redirected back to the original page. Here you will have a key `x-rapidapi-key`. Save it. It will be used later in the application.
+
+## Building The UI
+
+You can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal. So let’s do that.
+
+```sh
+npx create-next-app -e with-tailwindcss news-app
+```
+
+This command is going to take a minute to set everything up. After it is finished generating the boilerplate, you will see a folder with the name `news-app` has been created. Open this folder in your preferred code editor. I am going to use [VSCode](https://code.visualstudio.com/) for the project.
+
+### Project Files
+
+When you open the project in your code editor, you will see the following directories and files in the root directory:
+
+- `pages` directory: Inside it, you will have files `index.js`, `_app.js`, and another directory called `api`. You only need to know about the `index.js` file that is the main entry point in your project.
+- `public` directory: This directory contains icons. You place your static files here to load later in the application.
+- `node_modules`: It’s another directory that contains all the node modules you are using in your application.
+- `package.json`: This file contains the metadata of your project.
+- `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
+- `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
+- `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
+- `readme.md`: It’s a markdown file for documentation.
+
+Before we move on to writing the code, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/news-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are some TailwindCSS configurations I have done specifically for this project. I have added some colors that you do not have by default with TailwindCSS and also have set some screen sizes.
+
+Now let’s start writing the code. I am going to do it in steps so you can follow along.
+
+### → STEP #1
+
+Open the`pages/index.js` file and remove all the existing code. After this, copy-paste the following code there:
+
+```js
+export default function Home() {
+ return (
+
+ RapidAPI Hub provides you with code snippets in different languages for
+ integrating the API.
+
+
+I am going to use the [(JavaScript) Axios](https://www.npmjs.com/package/axios) one.
+
+
+
+Now create a file with the name `news` inside the `pages/api` directory. This is going to create a REST API endpoint for you. The endpoint point will look like this:
+
+```sh
+http://localhost:3000/api/news
+```
+
+Now copy the following code from this file:
+
+```js
+import axios from 'axios';
+
+export default async function handler(req, res) {
+ if (req.method === 'GET') {
+ var options = {
+ method: 'GET',
+ url: 'https://bing-news-search1.p.rapidapi.com/news',
+ params: {safeSearch: 'Off', textFormat: 'Raw'},
+ headers: {
+ 'x-bingapis-sdk': 'true',
+ 'x-rapidapi-host': 'bing-news-search1.p.rapidapi.com',
+ 'x-rapidapi-key': process.env.NEXT_PUBLIC_BING_NEWS_API_KEY
+ }
+ };
+
+ axios
+ .request(options)
+ .then(function (response) {
+ const {data} = response;
+ const {value} = data;
+
+ res.status(200).json(value);
+ })
+ .catch(function (error) {
+ console.error(error);
+ });
+ } else {
+ res.status(400);
+ }
+}
+```
+
+This code is making an API call to the Bing News API on the server and returns the results to the user. It is going to execute when the user makes an API call to the `user` endpoint I have mentioned above.
+
+Once you are done, copy the following code in the `pages/index.js` file:
+
+```js
+import Link from 'next/link';
+import axios from 'axios';
+
+export default function Home({value}) {
+ return (
+
+
+You can also use `getStaticProps` instead of `getServerSideProps` and the application will then fetch the data at build time.
+
+
+
+Once the data is fetched, I am converting the response to JSON and then using object destructuring to extract the property `value`.
+
+This `value` property is passed to my component as props. Since it is an array, I have mapped it to show all the data with a few lines of code. You will also see that the `div` that I am returning from the `map` function has a `Link` component. This component links different news containers to their news URLs.
+
+## Wrap Up
+
+This is it. We have successfully built a [news application](https://RapidAPI-example-news-app.vercel.app/) using the [Bing News Search](https://RapidAPI.com/microsoft-azure-org-microsoft-cognitive-services/api/bing-news-search1/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) API. You can find the code of this web app [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/news-app). It will look something like this:
+
+
diff --git a/guides/posts/build-paraphrase-app/images/code-snippet.png b/guides/posts/build-paraphrase-app/images/code-snippet.png
new file mode 100644
index 00000000..e5d3e447
Binary files /dev/null and b/guides/posts/build-paraphrase-app/images/code-snippet.png differ
diff --git a/guides/posts/build-paraphrase-app/images/cover.png b/guides/posts/build-paraphrase-app/images/cover.png
new file mode 100644
index 00000000..bc8a485f
Binary files /dev/null and b/guides/posts/build-paraphrase-app/images/cover.png differ
diff --git a/guides/posts/build-paraphrase-app/images/subscribe.png b/guides/posts/build-paraphrase-app/images/subscribe.png
new file mode 100644
index 00000000..7cab0bef
Binary files /dev/null and b/guides/posts/build-paraphrase-app/images/subscribe.png differ
diff --git a/guides/posts/build-paraphrase-app/post.md b/guides/posts/build-paraphrase-app/post.md
new file mode 100644
index 00000000..b78346de
--- /dev/null
+++ b/guides/posts/build-paraphrase-app/post.md
@@ -0,0 +1,328 @@
+---
+title: How to build a Paraphrase App using Next.js and Paraphrase API?
+description: 'Every now and then we need to paraphrase some piece of content. There are a bunch of applications on the internet for this that you can use. You can also build your own application using any paraphrasing APIs.'
+publishedDate: 2021-11-08T18:18:51.569Z
+lastModifiedDate: 2021-11-08T18:18:51.569Z
+authors:
+ - saad
+category: apps
+tags:
+ - rapidapi
+ - paraphrase-app
+coverImage: ''
+---
+
+
+
+Every now and then we need to paraphrase some piece of content. There are a bunch of applications on the internet for this that you can use. You can also build your own application using any paraphrasing APIs. Instead of googling the appropriate API to use, you can look it up on [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).
+
+
+
+[RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) provides you with thousands of these public APIs that you can use in your apps. Many APIs on [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) have free versions available, but you can also buy a premium version if the free version does not satisfy your need.
+
+Today, I am building a web application that will paraphrase a piece of content provided to it. So without any further ado, let’s jump in.
+
+## Stack
+
+We need to choose a stack first to build this application. I have decided to go with the [Jamstack](https://jamstack.org/).
+
+I am going to use [Next.js](https://nextjs.org/) for the client-side and [TailwindCSS](https://tailwindcss.com/) for the styling.
+
+If you don’t know about Next.js, it is a JavaScript framework built on top of React and provides features like server-side rendering, static site generation, etc. Tailwind is a CSS framework that provides utility classes to speed up the development process.
+
+## Choosing The API
+
+Let’s find an API that we can use to paraphrase some content. Go to [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) and [create an account](https://RapidAPI.com/auth/sign-up?referral=/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) if you haven’t already and then search for “paraphrase” in the search section.
+
+
+ Learn more about how to use RapidAPI Hub.
+
+
+You will see different search results related to all the available movie APIs. For this piece, I am using [Rewriter/Paraphraser/Text Changer (Multi-Language) API](https://rapidapi.com/smodin/api/rewriter-paraphraser-text-changer-multi-language?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel). To use this API, you need to subscribe to it first. You can do this by clicking on **Subscribe to Test** button.
+
+
+
+Once you click the button, you will be redirected to another page where different available subscription packages will be shown. Let’s go with the free one for now.
+
+After all this, you will be redirected back to the original page. Here you will have a key `x-rapidapi-key`. Save it. It will be used later in the application.
+
+## Building The UI
+
+You can create a Next.js boilerplate with TailwindCSS integrated by running the following command in your terminal. So let’s do that.
+
+```sh
+npx create-next-app -e with-tailwindcss paraphrase-app
+```
+
+This command is going to take a minute to set everything up. After generating the boilerplate, you will see a folder with the name `paraphrase-app` has been created. Open this folder in your preferred code editor. I am going to use [VSCode](https://code.visualstudio.com/) for the project.
+
+### Project Files
+
+When you open the project in your code editor, you will see the following directories and files in the root directory:
+
+- `pages` directory: Inside it, you will have files `index.js`, `_app.js`, and another directory called `api`. You only need to know about the - - - `index.js` file that is the main entry point in your project.
+- `public` directory: This directory contains icons. You place your static files here to load later in the application.
+- `node_modules`: It’s another directory that contains all the node modules you are using in your application.
+- `package.json`: This file contains the metadata of your project.
+- `package-lock.json`: This file is responsible for tracking the exact version of every installed package.
+- `postcss.config.js`: This file contains [PostCSS](https://github.com/postcss/postcss) configurations.
+- `tailwind.config.js`: It contains [TailwindCSS](https://tailwindcss.com/) configurations.
+- `readme.md`: It’s a markdown file for documentation.
+
+Before we move on to writing the code, open [this](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/paraphrase-app/tailwind.config.js) file, and copy all of its content, then paste it inside the `tailwind.config.js` file in your project. These are some TailwindCSS configurations I have done specifically for this project. I have added some colors that you do not have by default with TailwindCSS and set some screen sizes.
+
+Now let’s start writing the code. I am going to do it in steps so you can follow along.
+
+### → STEP #1
+
+Open the `pages/index.js` file and remove all the existing code. After this, copy-paste the following code there:
+
+```js
+export default function Home() {
+ return (
+
+ Example GraphQl App +
++ Next.js app which provides information about a given country using a + GraphQl API. +
+ +
+ setCountryName(e.target.value)}
+ />
+
+
+
+ {response && (
+
+
+
+
+
+ );
+}
+```
+
+And this is what our app looks like:
+
+
+
+## Wrap Up
+
+All done. Our [GraphQL app](https://rapidapi-example-graphql-app.vercel.app/) is ready. Find the code of this web app [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/graphql-app).
diff --git a/guides/posts/build-movie-details-app/images/code-snippet.png b/guides/posts/build-movie-details-app/images/code-snippet.png
new file mode 100644
index 00000000..3041d75a
Binary files /dev/null and b/guides/posts/build-movie-details-app/images/code-snippet.png differ
diff --git a/guides/posts/build-movie-details-app/images/cover.png b/guides/posts/build-movie-details-app/images/cover.png
new file mode 100644
index 00000000..174c5a95
Binary files /dev/null and b/guides/posts/build-movie-details-app/images/cover.png differ
diff --git a/guides/posts/build-movie-details-app/images/subscribe.png b/guides/posts/build-movie-details-app/images/subscribe.png
new file mode 100644
index 00000000..4b4960d8
Binary files /dev/null and b/guides/posts/build-movie-details-app/images/subscribe.png differ
diff --git a/guides/posts/build-movie-details-app/post.md b/guides/posts/build-movie-details-app/post.md
new file mode 100644
index 00000000..ffe290a0
--- /dev/null
+++ b/guides/posts/build-movie-details-app/post.md
@@ -0,0 +1,343 @@
+---
+title: How to build a Movie Details App using Next.js and IMDb API?
+description: 'There are a lot of different movie APIs available on the Internet. Instead of looking for them, you can visit RapidAPI Hub and search for "movies" to see all the available APIs.'
+publishedDate: 2021-11-08T18:18:51.569Z
+lastModifiedDate: 2021-11-08T18:18:51.569Z
+authors:
+ - saad
+category: apps
+tags:
+ - rapidapi
+ - movie-details-app
+coverImage: ''
+---
+
+Search Results
+
+ {response.map((item) => (
+
+ )}
+
+
+ ))}
+
+
+
+
+
+
+ 
+
+
+
+
+ + {item.node.name} +
+ + {item.node.capital} + + Currency: + + {item.node.currencyCodes[0]} + +
+
+ );
+}
+```
+
+It will create two headings for you with the text “Movie Details App” and “Get Info About Any Movie”. You can change it to anything you prefer.
+
+### → STEP #2
+
+Now let’s create an input field and search button. For this, copy the following code and paste it in `pages/index.js`:
+
+```js
+export default function Home() {
+ return (
+ + Movie Details App +
++ Get info about any movie +
+
+
+ );
+}
+```
+
+This code is going to create an input field and button. I have also styled them a little bit using [TailwindCSS](<(https://tailwindcss.com/)>).
+
+### → STEP #3
+
+Let’s create some states to store the user input and the movie information we will receive from the API. For this, copy-paste the following code in `pages/index.js`.
+
+```js
+import {useState} from 'react';
+
+export default function Home() {
+ const [movieName, setMovieName] = useState(null);
+ const [movieInfo, setMovieInfo] = useState(null);
+
+ return (
+ + Movie Details App +
++ Get info about any movie +
+
+
+
+
+
+
+
+
+ );
+}
+```
+
+You can see that I have added an `onChange` event handler to set the state value as soon as the user writes something in the input field.
+
+### → STEP #4
+
+Let’s integrate the API now. For this, first, create a `.env.local` file and paste the following in it:
+
+```sh
+NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY
+```
+
+You need to replace `YOUR-RAPIDAPI-KEY` here with the API key you got when you subscribed to the [IMDb API](https://rapidapi.com/apidojo/api/imdb8/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel). It is the value of `x-rapidapi-key` that you saved earlier.
+
+Now download and add `axios` to your project. For this, run the following command in the terminal:
+
+```sh
+npm install axios
+```
+
+Now import `axios` at the top of the `pages/index.js`.
+
+```js
+import axios from ‘axios’;
+```
+
+### → STEP #5
+
+We are going to use the `title/find` endpoint of the [IMDb API](https://rapidapi.com/apidojo/api/imdb8/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) to get the details of the movie user want to see.
+
+I am also going to use the code snippet of `(JavaScript) Axios` that [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) provides us.
+
+
+
+Create a file called `movie` in the `pages/api` directory and copy-paste the following code there:
+
+```js
+import axios from 'axios';
+
+export default async function handler(req, res) {
+ if (req.method === 'GET') {
+ const options = {
+ method: 'GET',
+ url: 'https://imdb8.p.rapidapi.com/title/find',
+ params: {q: req.query.movieName},
+ headers: {
+ 'x-rapidapi-host': 'imdb8.p.rapidapi.com',
+ 'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY
+ }
+ };
+
+ axios
+ .request(options)
+ .then(function (response) {
+ res.status(200).json(response.data);
+ })
+ .catch(function (error) {
+ console.error(error);
+ res.status(response.status);
+ });
+ } else {
+ res.status(400);
+ }
+}
+```
+
+Now let’s create a function in the `pages/index.js` file to request the `http://localhost:3000/api/movie` for the movie details. You can just copy and replace the following code in `pages/index.js` file:
+
+```js
+import {useState} from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import axios from 'axios';
+
+export default function Home() {
+ const [movieName, setMovieName] = useState(null);
+ const [movieInfo, setMovieInfo] = useState(null);
+
+ /**
+ *
+ *
+ * Fetch Movie Info from the IMDB
+ */
+ const fetchMovieInfo = async () => {
+ try {
+ const res = await axios.get(`http://localhost:3000/api/movie`, {
+ params: {movieName}
+ });
+ const {data} = res;
+ const {results} = data;
+ setMovieInfo(results[0]);
+ } catch (err) {
+ console.log(err);
+ }
+ };
+
+ return (
+ + Movie Details App +
++ Get info about any movie +
+
+
+
+ setMovieName(e.target.value)}
+ />
+
+
+
+
+ );
+}
+```
+
+You can see that I have created a function, `fetchMovieInfo`, for getting movie details. I have also created a piece of UI that is conditionally rendering on the screen. If the state variable, `movieInfo`, changes from null to the movie details object, it renders on the screen with data from the `movieInfo` object.
+
+## Wrap Up
+
+That’s it. We have successfully built a [Movie Details App](https://rapidapi-example-movie-details-app.vercel.app/) using [IMDb API](https://rapidapi.com/apidojo/api/imdb8/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel). You can find the source code [here](https://github.com/RapidAPI/DevRel-Examples-External/blob/main/movie-details-app) of this web app.
+
+In the end, it will look something like this:
+
+
diff --git a/guides/posts/build-music-app/images/code-snippet.png b/guides/posts/build-music-app/images/code-snippet.png
new file mode 100644
index 00000000..05296740
Binary files /dev/null and b/guides/posts/build-music-app/images/code-snippet.png differ
diff --git a/guides/posts/build-music-app/images/music-app.png b/guides/posts/build-music-app/images/music-app.png
new file mode 100644
index 00000000..5038ba1d
Binary files /dev/null and b/guides/posts/build-music-app/images/music-app.png differ
diff --git a/guides/posts/build-music-app/images/subscribe.png b/guides/posts/build-music-app/images/subscribe.png
new file mode 100644
index 00000000..b93a9832
Binary files /dev/null and b/guides/posts/build-music-app/images/subscribe.png differ
diff --git a/guides/posts/build-music-app/post.md b/guides/posts/build-music-app/post.md
new file mode 100644
index 00000000..53f0270d
--- /dev/null
+++ b/guides/posts/build-music-app/post.md
@@ -0,0 +1,410 @@
+---
+title: How to build a Music App app using Shazam API and Next.js?
+description: Let's see how we can build a music app using Shazam API.
+publishedDate: 2021-11-04T15:57:17.709Z
+lastModifiedDate: 2021-11-04T15:57:17.709Z
+authors:
+ - ahmadBilal
+category: apps
+tags:
+ - rapidapi
+ - music
+ - shazam
+ - app
+coverImage: ''
+---
+
++ Movie Details App +
++ Get info about any movie +
+
+
+
+ setMovieName(e.target.value)}
+ />
+
+
+ {movieInfo && (
+
+
+ )}
+
+
+ + + Title:{' '} + {' '} + {movieInfo.title} +
++ + Year:{' '} + {' '} + {movieInfo.year} +
++ + Run Time:{' '} + {' '} + {movieInfo.runningTimeInMinutes} +
+ + + + + +
+
+ );
+}
+```
+
+### → STEP #2
+
+We want to add the functionality of searching for any music or artists using Shazam. So we will need an input field where the query will go. The query will be submitted by clicking a button, so let's add both of these.
+
+```js
+export default function Home() {
+ return (
+ + Music App +
++ Discover music using the Shazam API from RapidAPI Hub. +
+
+
+ );
+}
+```
+
+This code is going to create the search field and the submit button. I have also styled and made them responsive using [TailwindCSS](<(https://tailwindcss.com/)>).
+
+### → STEP #3
+
+Let’s create two states, `term` to store the user input and `response` to hold the response from the API.
+
+```js
+import {useState} from 'react';
+
+export default function Home() {
+ const [term, setTerm] = useState(null);
+ const [response, setResponse] = useState(null);
+
+ return (
+ + Music App +
++ Discover music using the Shazam API from RapidAPI Hub. +
+ +
+
+
+
+
+
+
+
+ );
+}
+```
+
+I am using the `setTerm(e.target.value)` to save the value of the input field in the state we just created, using the `onChange` event handler.
+
+### → STEP #4
+
+Let’s integrate the API now. For this, first, create a `.env.local` file in the root directory of your project and paste the following into it:
+
+```sh
+NEXT_PUBLIC_RAPIDAPI_KEY=YOUR-RAPIDAPI-KEY
+```
+
+Remember the `x-rapidapi-key` I asked you to save earlier? You need to replace `YOUR-RAPIDAPI-KEY` with its value. You get the key after subscribing to the [Shazam API](https://rapidapi.com/apidojo/api/shazam/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel).
+
+Now download and add `axios` to your project. For this, run the following command in the terminal:
+
+```sh
+npm install axios
+```
+
+And import `axios` in `pages/index.js`.
+
+```js
+import axios from ‘axios’;
+```
+
+### → STEP #5
+
+The [Shazam API](https://rapidapi.com/apidojo/api/shazam/?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) provides a bunch of very useful endpoints like list recommendations, song detection and global charts. You can see these endpoints on the left pane. For this guide, we are going to use the `search` endpoint.
+
+
+
+We will send a GET request to search for songs and artists that match the input term. For easy integration, [RapidAPI Hub](https://RapidAPI.com/hub?utm_source=RapidAPI.com/guides&utm_medium=DevRel&utm_campaign=DevRel) automatically generates snippets in multiple languages and options. We are going to copy the `(JavaScript) Axios` one as you can see above.
+
+Next, I am going to create a file named `search.js` in the `pages/api` directory and use the code snippet as follows:
+
+```js
+import axios from 'axios';
+
+export default async function handler(req, res) {
+ const options = {
+ method: 'GET',
+ url: 'https://shazam.p.rapidapi.com/search',
+ params: {
+ term: req.query.term,
+ locale: 'en-US',
+ offset: '0',
+ limit: '10'
+ }, // Parameters
+ headers: {
+ 'x-rapidapi-host': 'shazam.p.rapidapi.com',
+ 'x-rapidapi-key': process.env.NEXT_PUBLIC_RAPIDAPI_KEY // Our API Key
+ }
+ };
+
+ axios
+ .request(options)
+ .then(function (response) {
+ res.status(200).json(response.data);
+ })
+ .catch(function (error) {
+ console.error(error);
+ });
+}
+```
+
+We have specified the parameters. Our API call is ready. Now we need to create a function in the `pages/index.js` file to send the request from the client-side to our API at `http://localhost:3000/api/search`. You can just copy and replace the following code in `pages/index.js` file:
+
+```js
+import axios from 'axios';
+import {useState} from 'react';
+
+export default function Home() {
+ const [term, setTerm] = useState(null);
+ const [response, setResponse] = useState(null);
+
+ /**
+ * Fetches search results for the input term
+ */
+ const getSearchResults = async () => {
+ try {
+ const res = await axios.get('api/search/', {
+ params: {term}
+ });
+ const {data} = res; // Destructuring response to extract data
+ setResponse(data.tracks.hits); // Setting the response state
+ } catch (error) {
+ console.log(error);
+ }
+ };
+
+ return (
+ + Music App +
++ Discover music using the Shazam API from RapidAPI Hub. +
+ +
+ setTerm(e.target.value)} // Updating the state with input field value.
+ />
+
+
+
+
+
+
+
+ Codestin Search App
+
+
+
+
+
+ );
+}
+```
+
+See the `getSearchResults` function I have created to get the response. It sends the `term` state holding our text input as the parameter. After receiving the response, it is stored in the `response` state. We are binding this function to the button we created, using the `onClick` event handler.
+
+### → FINAL STEP
+
+In the final step, we will display the results. The API returns an object having a number of songs that match our query. `data.tracks.hits` represents an array of objects, one object for each song. Each object has all the information you will need about the given song from its name to cover images.
+
+We are going to use a map function to iterate through this array of objects. I will be displaying the title, subtitle, Shazam URL, and cover image of each song. For the design, I used a grid to organize cards for each song. Our final code looks like this:
+
+```js
+import axios from 'axios';
+import {useState} from 'react';
+
+export default function Home() {
+ const [term, setTerm] = useState(null);
+ const [response, setResponse] = useState(null);
+
+ const getSearchResults = async () => {
+ try {
+ const res = await axios.get('api/search/', {
+ params: {term}
+ });
+ const {data} = res;
+ setResponse(data.tracks.hits);
+ } catch (error) {
+ console.log(error);
+ }
+ };
+
+ return (
+ + Music App +
++ Discover music using the Shazam API from RapidAPI Hub. +
+ +
+ setTerm(e.target.value)}
+ />
+
+
+
+
+
+
+
+ );
+}
+```
+
+This is what our app looks like:
+
+
+
+## Wrap Up
+
+All done. Our [music app](https://rapidapi-example-music-app.vercel.app/) is ready. Just like this, you can utilize the remaining endpoints to create a full-fledged music application. Find the code of this web app [here](https://github.com/RapidAPI/DevRel-Examples-External/tree/main/music-app).
diff --git a/guides/posts/build-news-app/images/javascript-axios.jpg b/guides/posts/build-news-app/images/javascript-axios.jpg
new file mode 100644
index 00000000..6f1bdcc2
Binary files /dev/null and b/guides/posts/build-news-app/images/javascript-axios.jpg differ
diff --git a/guides/posts/build-news-app/images/news-app.png b/guides/posts/build-news-app/images/news-app.png
new file mode 100644
index 00000000..63491411
Binary files /dev/null and b/guides/posts/build-news-app/images/news-app.png differ
diff --git a/guides/posts/build-news-app/images/subscribe.jpg b/guides/posts/build-news-app/images/subscribe.jpg
new file mode 100644
index 00000000..7f8c5859
Binary files /dev/null and b/guides/posts/build-news-app/images/subscribe.jpg differ
diff --git a/guides/posts/build-news-app/post.md b/guides/posts/build-news-app/post.md
new file mode 100644
index 00000000..53c4e752
--- /dev/null
+++ b/guides/posts/build-news-app/post.md
@@ -0,0 +1,245 @@
+---
+title: How to build a News app using Next.js and News API?
+description: There are a lot of APIs out there that you can use for your projects. But finding these APIs often becomes a hassle.
+publishedDate: 2021-10-21T16:18:42.178Z
+lastModifiedDate: 2021-10-21T16:18:42.178Z
+authors:
+ - saad
+category: apps
+tags:
+ - rapidapi
+ - news-app
+coverImage: ''
+---
+
++ Music App +
++ Discover music using the Shazam API from RapidAPI Hub. +
+ +
+ setTerm(e.target.value)}
+ />
+
+
+
+ {response && (
+
+
+
+
+
+ )}
+ Search Results
+
+ {response.map(song => (
+
+
+
+ ))}
+
+
+
+
+
+
+ 
+
+
+
+
+
+ );
+}
+```
+
+It is going to create two headings for you with the text "News Application" and "Get Top News Quickly". You can change it to anything you prefer.
+
+### → STEP #2
+
+Let’s integrate the API now. For this, first create a `.env.local` file and paste the following in it:
+
+```sh
+NEXT_PUBLIC_BING_NEWS_API_KEY=YOUR-RAPIDAPI-KEY
+```
+
+You need to replace `YOUR-RAPIDAPI-KEY` here with the API key you got when you subscribed to the [Bing News Search](https://RapidAPI.com/microsoft-azure-org-microsoft-cognitive-services/api/bing-news-search1/) API. It is the value of `x-rapidapi-key` that you saved earlier.
+
+Now download and add `axios` in your project. For this, run the following command in the terminal:
+
+```sh
+npm install axios
+```
+
+Now import `axios` at the top of the `pages/index.js`.
+
+```js
+import axios from ‘axios’;
+```
+
+
+
+ + News Application +
+
+
+ + Get Top News Quickly +
+
+
+ );
+}
+
+export async function getServerSideProps() {
+ const res = await axios.get('https://localhost:3000/api/news');
+ const {data: value} = res;
+
+ if (!value) {
+ return {
+ notFound: true
+ };
+ }
+
+ return {
+ props: {
+ value
+ }
+ };
+}
+```
+
+I am using the Next.js `getServerSideProps` function to fetch the data from the server. It is going to make my application server-side, and the user will never see a loading state.
+
+
+
+ + News Application +
+
+
+ + Get Top News Quickly +
+ {value.map(news => { + return ( + +
+
+
+ );
+ })}
+ {news.name}
+
+
+ );
+}
+```
+
+It will create two headings for you with the text “Paraphrase App” and “Paraphrase any piece of content easily”. You can change it to anything you prefer.
+
+### → STEP #2
+
+Now let’s create two text areas, one for user content and the other for paraphrased content, and the paraphrase button. For this, copy the following code and paste it in `pages/index.js`:
+
+```js
+export default function Home() {
+ return (
+ + Paraphrase App +
++ Paraphrase any piece of content easily +
+
+
+ );
+}
+```
+
+This code is going to create two text areas and a button. I have also styled them a little bit using [TailwindCSS](<(https://tailwindcss.com/)>).
+
+### → STEP #3
+
+Let’s create some states to store the user content and the paraphrased content that we will receive from the API. For this, copy-paste the following code in `pages/index.js`.
+
+```js
+import {useState} from 'react';
+
+export default function Home() {
+ const [content, setContent] = useState(null);
+ const [paraphrased, setParaphrased] = useState('');
+
+ return (
+ + Paraphrase App +
++ Paraphrase any piece of content easily +
+
+
+
+
+
+
+
+
+
+ Paraphrase App +
++ Paraphrase any piece of content easily +
+
+