Free video courses by Rapid and Rapid Developer Experts offer short to help you become a pro API Developer.

Rapid API Courses

Ania Kubów

The guide is tailored for beginners aiming to make money with their coding skills. We will build an API on Climate Changes using Express, Axios, and Cheerio packages. I will also show you how to list your API on the largest API hub-Rapid API, and monetize it.

## Prerequisites

For this guide, only a basic understanding of JavaScript is required. However, even if you don't have your command over JavaScript, follow along anyway because there won't be a lot of code involved. Before we start, ensure you have Node.js installed on your machine.

## What is an API?

API stands for Application Programming Interface. APIs allow the technologies to talk with each other and are essential to many services we rely on. They grab and shape information and pass it from one technology to another.

As a developer, you can use TikTok's APIs to get a live TikTok feed onto your website or even use them in a two-way stream to get, post or delete data from a movie system. To summarize, APIs are everywhere today.

## RapidAPI Hub

After building our API, we will list it on the [RapidAPI](https://rapidapi.com/hub) Hub. As a developer, when you launch your API on the Rapid API platform, you can essentially sell its access to those who want to utilize what you have made. This access comes in different plans you can choose from, allowing you to control how you monetize what you have built. 

As it is the largest hub for APIs out there at this moment in time, the footfall will be in our favor, meaning that you could take your API idea from a simple form of passive income to a full-blown startup, depending on how much time you want to dedicate to it.

What are we waiting for? Let's do it. 

## Step 1: Sign up on RapidAPI

Since we will be using the Rapid API platform, so let us go ahead and sign up. As I want to create my own API, I will click on “My APIs” and then leave it at this point.

![RapidAPI Hub](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/hub-1.png) 

## Step 2: Decide the topic for our API

For this guide, I have decided to build an API that would tell us climate change news from various publications worldwide. If you want to go for any other topic, like crypto, that is entirely up to you.

## Step 3: Create a new project on your code editor

I'm going to start off by creating a blank project using WebStorm. Feel free to use whatever code editor you wish and create an empty directory. So just like this, we can start entirely from scratch.

![Creating a new project in WebStorm](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/create-project.png)

## Step 4: Create Package.json file

As a general rule, any project that uses node js will need to have a `package.json` file. To create the file, we need to run the command `npm init` in our terminal, ensuring that we are in the directory we just created.

The command will spin up the file for us, and we will be prompted to answer a few questions like the name, version, and description of our package. It will also ask to choose the entry point, which we will keep the `index.js` file, and leave the rest of the questions blank.

![package.json file](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/package-json.png)

As you can see in the `climate-change-api` directory, a `package.json` file has been created with all the keys we were asked to fill out. Within this file, we will see all our installed packages.

## Step 5: Install the packages

We will install the [Cheerio](https://www.npmjs.com/package/cheerio), [Express](https://www.npmjs.com/package/express), and [Axios](https://www.npmjs.com/package/axios) packages for this guide. Run the following commands to install them:

`npm i cheerio`
`npm i express`
`npm i axios`

## Step 6: Create the index.js file

Within our Climate Change API directory, we will create a new JavaScript file and call it `index.js`. This will be our server, and we will write our code in it.

## Step 7: Define the PORT

We will start the coding by defining the port on which we will open our server. I am going to call it PORT 8000. This can be whatever you wish. 

![Defining the port](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/port.png)

## Step 8: Initiate our packages

To use our packages in the backend, we will type the standard syntax for each of our three packages.

```js
const express = require('express')
const axios = require('axios')
const cheerio = require('cheerio')
```

To initiate express, we will call the express function and save it in the 'app' variable. Then we will make this 'app' to listen to our port to run the server. 

```js
const app = express();
app.Listen(PORT, () => console.log('server running on PORT ${PORT }'));
```

I'll also need to write a `start` command in the `script` in package.json file and use `nodemon` to listen to any changes made in the `index.js` file. 

![Using nodemon](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/nodemon.png)

To run our backend, I'll type the command `npm run start` in our terminal.
We will make express, i.e., `app` listen to the homepage path and create a response.

```js
app.get('/', (req, res) => {
	res.json('Welcome to my Climate Change News API');
});
```
Here you can see it is working perfectly.

![API working on local host](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/local.png)

## Step 9: Getting a news source

Now let us start scraping data from a news source, let's say, The Guardian. Axios and cheerios will be utilized for this purpose. First, I'll use Axios to grab all the HTML from the [Guardian webpage](https://www.theguardian.com/environment/climate-crisis). Then using Cheerio, we will look for the elements. We will look for all the `< a` tags containing the word climate. We will grab the text of those tags and save it as the title. Also, we will grab the `href` for each tag and save that as a URL.

```js
app.get('/news', (req, res) => {
	axios.get('https://www.theguardian.com/environment/climate-crisis').then(response => {
		const html = response.data;
		const $ = cheerio.load(html);
		$('a:contains("climate")', html).each(function () {
			const title = $(this).text();
			const url = $(this).attr('href');
			articles.push({
				title,
				url,
			});
		});
	});
	res.json(articles);
}).catch(err => console.log(err));
```
Great! We have scraped the Guardian webpage.
You can install a JSON Viewer extension on your browser to make it readable. So with the extension, it is looking great.

![Scraped data with JSON viewer extension](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/scraped-data.png)

So every time we found an `< a` tag containing the word climate, we created a title and URL from its text and href to have an array full of titles and URLs from the Guardian. How cool is that!

## Step 10: Getting multiple news sources

Now that we have successfully scraped one website, let's scrape climate information from multiple sources to make our API more effective.
I'll start doing this by creating an array of the newspapers I want to scrape. I will keep three, but you can add as many as you want.

```js
const newspapers = [
	{
		name: 'cityam',
		address: 'https://www.cityam.com/london-must-become-a-world-leader-on-climate-change-action/',
	},
	{
		name: 'thetimes',
		address: 'https://www.thetimes.co.uk/environment/climate-change',
	},
	{
		name: 'guardian',
		address: 'https://www.theguardian.com/environment/climate-crisis',
	},
];
```

Then I'll basically loop the same code with all those newspapers as follows:

```js
const articles = [];
newspapers.forEach(newspaper => {
	axios.get(newspaper.address).then(response => {
		const html = response.data;
		const $ = cheerio.load(html);
		$('a:contains("climate")', html).each(function () {
			const title = $(this).text();
			const url = $(this).attr('href');
			articles.push({ title, url, source: newspaper.name });
		});
	});
});
app.get('/', (req, res) => {
	res.json('Welcome to my Climate Change News API');
});
app.get('/news', (req, res) => {
	res.json(articles);
});
```

![Scraped data from multiple sources](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/scraped-data-multiple.png)

Perfect! You can see we are now getting data from all three sources. However, our URLs from the Telegraph still need to be completed. They lack a base, as seen in their page's source code.
 
![Inspecting the elements of Telegraph webpage](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/inspect-element.png)

This issue can be solved simply by adding a `base` function and passing the Telegraph through it.

```js
const newspapers = [
	{
		name: 'thetimes',
		address: 'https://www.thetimes.co.uk/environment/climate-change',
		base: '',
	},
	{
		name: 'guardian',
		address: 'https://www.theguardian.com/environment/climate-crisis',
		base: '',
	},
	{
		name: 'telegraph',
		address: 'https://www.telegraph.co.uk/climate-change',
		base: 'https://www.telegraph.co.uk',
	},
];

const articles = [];
newspapers.forEach(newspaper => {
	axios.get(newspaper.address).then(response => {
		const html = response.data;
		const $ = cheerio.load(html);
		$('a:contains("climate")', html).each(function () {
			const title = $(this).text();
			const url = $(this).attr('href');
			articles.push({
				title,

				url: newspaper.base + url,
				source: newspaper.name,
			});
		});
	});
});
```

## Step 11: Getting an individual news source by parameter

Now I want my API to be able to get data from individual news sources separately. This can be done by adding a new `app.get` function. 

```js
const PORT = 8000;
const express = require('express');
const axios = require('axios');
const cheerio = require('cheerio');
const app = express();

const newspapers = [
	{
		name: 'thetimes',
		address: 'https://www.thetimes.co.uk/environment/climate-change',
		base: '',
	},
	{
		name: 'guardian',
		address: 'https://www.theguardian.com/environment/climate-crisis',
		base: '',
	},
	{
		name: 'telegraph',
		address: 'https://www.telegraph.co.uk/climate-change',
		base: 'https://www.telegraph.co.uk',
	},
];

const articles = [];

newspapers.forEach(newspaper => {
	axios.get(newspaper.address).then(response => {
		const html = response.data;
		const $ = cheerio.load(html);

		$('a:contains("climate")', html).each(function () {
			const title = $(this).text();
			const url = $(this).attr('href');

			articles.push({
				title,
				url: newspaper.base + url,
				source: newspaper.name,
			});
		});
	});
});

app.get('/', (req, res) => {
	res.json('Welcome to my Climate Change News API');
});

app.get('/news', (req, res) => {
	res.json(articles);
});

app.get('/news/:newspaperId', (req, res) => {
	const newspaperId = req.params.newspaperId;

	const newspaperAddress = newspapers.filter(newspaper => newspaper.name == newspaperId)[0].address;
	const newspaperBase = newspapers.filter(newspaper => newspaper.name == newspaperId)[0].base;

	axios
		.get(newspaperAddress)
		.then(response => {
			const html = response.data;
			const $ = cheerio.load(html);
			const specificArticles = [];

			$('a:contains("climate")', html).each(function () {
				const title = $(this).text();
				const url = $(this).attr('href');
				specificArticles.push({
					title,
					url: newspaperBase + url,
					source: newspaperId,
				});
			});
			res.json(specificArticles);
		})
		.catch(err => console.log(err));
});

app.listen(PORT, () => console.log(`server running on PORT ${PORT}`));
```

## Step 12: Deploy the API to Heroku

To prepare our API for deploying on Heroku, we will need to run the command of `npm i nodemon`. Also, we will have to change the port options to use the deployed link if it is deployed, and use the local host port when running locally.

```js
const PORT = process.env.PORT || 8000
```

After that, we will sign up on [Heroku](https://www.heroku.com/) and create a new app.

![Heroku interface](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/heroku.png)

Once you create it, you will see instructions on the Heroku page. Follow all those instructions and run these commands successively. 

![Heroku instructions](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/heroku-instructions.png)

Once done, it will deploy our app on Heroku. Copy the URL of your Heroku deployment.

## Step 13: Create API on RapidAPI

We'll go back to our RapidAPI dashboard, give our API a brief description and add the base URL we just created. 

![Creating API on RapidAPI](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/create-api.png)

Next, I will add a couple of endpoints by clicking on the REST Endpoint.
 
![Adding Endpoints](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/endpoints.png)

After that, I'll choose the pricing for my API. Here I have multiple plans to choose from, starting from basic to mega.

![Plans and Pricing](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/pricing.png)

Lastly, we'll make our API public, and that's it! Our Climate Change API is live on RapidAPI.

![Our Climate Change API on RapidAPI Hub](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/climate-change-api.png)

## Wrap Up

Following the same steps stated in this guide, you can build your own APIs and make money by selling them on the RapidAPI platform. Happy building!



Omar I.

Ahmad Bilal

Ahmad Awais

Introduction

Overview of the final product

Creating a RapidAPI account

Creating our Node.js project

Routing in Express

Getting a news source

Getting multiple news sources

Getting an individual news source by parameter

Refactoring and Prep for Deployment

Creating our API on RapidAPI

Deploying to Heroku

Adding our Endpoints to RapidAPI

Adding Pricing Plans

Publishing our API

Build and sell your own API

Oflutter

Intro

Creating the home page

Creating recipe cards

Integrating the API

Final look of the app

Create a Recipe List App using Flutter and API

JavaScript Mastery

React Native Crash Course

Setup

Home Screen

useFetch Hook (Integrating Rapid API)

Job Details Screen

Search Functionality

Deployment

Build and Deploy a React Native App | 2023 React Native Course Tutorial for Beginners

ChatGPT Tutorials

In this guide, we will build an API capable of producing QR codes. We will do this using [ChatGPT](https://chat.openai.com/chat), a powerful AI tool developed by OpenAI. It can generate human-like responses to various inputs and even write code for us, making it ideal for this project. After making the API, we will sell it on [Rapid API Hub](https://rapidapi.com/hub).

![Rapid API Hub](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/hub-1.png)

Rapid is a platform that offers developers to deploy and sell their APIs on a subscription basis, with the potential to generate a substantial monthly recurring revenue stream. Without further ado, let's get started.

<Callout
    title="Build, sell and use APIs"
    linkText="Sign up"
    linkHref="https://rapidapi.com/auth/sign-up"
>
Explore thousands of APIs on Rapid API Hub, the biggest hub of APIs. You can also find ideas for your next API that you can build using ChatGPT. Happy building!
</Callout>

## Step 1: Coding with ChatGPT

Open [ChatGPT](https://chat.openai.com/chat) and put in the command to code a Python Flask API server. We must be clear and concise regarding the functionality of the API so that ChatGPT can generate the code precisely to our specifications. In this instance, we must specify that the API should accept a `GET` request with a URL in string format and convert it into a QR image code.

![Writing the prompt in ChatGPT](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/chatgpt.png)

Once ChatGPT has generated the code, copy and paste it into a code editor such as VSCode, saving it as a new file named `qr.py`.

![Pasting the code in VSCode](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/code.png)

## Step 2: Testing the Code on Local Server

Next, open your terminal and run the command `python qr.py`.
 
![Running the command in terminal](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/terminal-1.png)

This will initiate the server. To test the server, open the URL provided by ChatGPT.
 
![URL provided by ChatGPT](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/url.png)

When you open the URL, it will generate a QR code image like this:

![API returning the QR code image](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/qrcode.png)

Modifying the URL value will produce a new QR code, demonstrating that the API functions flawlessly.

## Step 3: Modifying the code to allow for downloadable QR codes

We can further enhance the functionality of our API by modifying the code to make the QR code images downloadable. So, prompt ChatGPT to rewrite the code to make the response image downloadable.

![ChatGPT rewriting the code](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/chatgpt-modify.png)

Replace the previous code with the new code in your VSCode and relaunch the API on the local server. With this update, the QR code will be automatically downloaded each time a new URL is entered.

![API returning auto-downloadable QR Code images](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/download-qrcode.png)

## Step 4: Deploying the API

Now that our API is ready, it is time to deploy it to the cloud. For this demonstration, I will be using [PythonAnywhere](https://www.pythonanywhere.com/), but you may use any other platform, such as Heroku, Google Cloud, or Amazon. After signing up, you will be directed to the dashboard. 

![pythonanywhere Dashboard](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/pyanywhere.png)

Click on "Open Web App" and create a new web application. Select Flask and choose the desired Python version.
 
![Creating new web app on pyhtonanywhere](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/new-web-app.png)

Scroll down and click "Go to directory" to access the `flask_app.py` file.
 
![Opening flask_app.py file](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/open-file.png)

Copy and paste the Python code from the VSCode into this file, then save it. Next, click "Web," reload the server, and open the API in a new tab. You may encounter an error at this point, but ignore it as it is simply because our application lacks the root URL.

![API opened in a new tab](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/api-tab.png)

Finally, copy the demo request query parameters from ChatGPT, which are `/qrcode?url=https://www.example.com/` and paste them into the address bar. This will download a QR code image, confirming our API is live and fully operational.

![API is auto-downloading QR code images](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/auto-download.png)

## Step 5: Selling on Rapid

The final step is to publish our API on Rapid. Open [Rapid API Studio](https://rapidapi.com/studio) and do a quick sign-up if you haven’t already.

![Creating a new API project on Rapid API Studio](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/studio.png)

Fill out the necessary details about your API and click on the "Hub Listing" section and provide additional information, including the base URL generated by PythonAnywhere.

![Filling in the API details](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/add-api-details.png)

![Putting in the base URL](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/base-url.png)

Next, add the endpoints and query parameters and save them.

![Adding endpoints and query parameters](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/endpoints-1.png)

Click on "View in Hub" to see your API’s page on the API Hub. Here, we can test the endpoint to ensure our API is functional. As you can see, it generates a QR code in response, indicating that our API works splendidly.

![Testing the API](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/hub-api.png)

Now, return to your Studio project and open the **Monetize** section. Here you can create pricing plans for your customers and adjust different usage quotas for each plan.

![Adding pricing plans for the API](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/pricing-plans.png)

Fantastic! Our API is now live and operational; every time someone subscribes, we'll receive payment. Let's make some money with our awesome API!

## Wrap up

With ChatGPT, you can create highly efficient and potentially profitable APIs in no time. Don’t just stop at QR Codes. Think of any good API idea, roll up your sleeves, and start building using the same process.

<Callout
    title="Build, sell and use APIs"
    linkText="Sign up"
    linkHref="https://rapidapi.com/auth/sign-up"
>
Explore thousands of APIs on Rapid API Hub, the biggest hub of APIs. You can also find ideas for your next API that you can build using ChatGPT. Happy building!
</Callout>


Rapid API and API monetization

Building APIs with ChatGPT

Running the code

Modifying the API code

Restart the server

API is working

Options for deploying API to cloud

Deploying the API

Testing our API

Publishing on Rapid API Hub

Testing API on Rapid API Hub

Monetizing our API

Searching our API on Rapid API Hub

Earn Money by Building and Selling APIs with ChatGPT

Simon Grimm

About the meme creator

Setting up the Flutter app

Implementing a drawer widget

Showing slides with API data and Flutter card swiper

Creating a meme selector widget

Building the meme creator

Download files with Flutter

Recap

How To Build a MEME CREATOR Mobile App with FLUTTER

Setting up the React Native app

Implementing Routing and Drawer navigation

Showing slides with API data

Creating a meme selector component

Adding file download

Outro

Build a React Native Meme Creator with API Calls and Nativebase UI for iOS & Android

James Q Quick

Let's take a look at how to deploy Node.js with TypeScript API to [Render](https://render.com/) instead of [Heroku](https://www.heroku.com), a platform that is functionally similar to Heroku and has a free tier.

This guide is the third edition of a series on constructing a TypeScript API with Rapid API and Xata. You can follow the first two here:

1. [Integrate Express, RapidAPI, and Xata into your TypeScript API Development (Part 1)](https://rapidapi.com/guides/integrate-express-rapidapi-and-xata-into-your-typescript-api-development-part-1)

2. [Integrate Express, RapidAPI, and Xata into your TypeScript API Development (Part 2)](https://rapidapi.com/guides/integrate-express-rapidapi-and-xata-into-your-typescript-api-development-part-2)

In this guide, we'll deploy this API not only to Render but also to the [RapidAPI Studio](https://rapid.com/studio) so that we can make money selling it.

RapidAPI also has a Visual Studio Code extension called the [RapidAPI Client](https://marketplace.visualstudio.com/items?itemName=RapidAPI.vscode-rapidapi-client&ssr=false). Using it; you can test the various endpoints, such as GET, POST, PUT, and DELETE, for the job's API that I created in previous guides.

![Rapid VSCode Client](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/vscode-client.png)

The intriguing part of this extension is that you can use it across various devices because they are linked to RapidAPI projects. This project can be linked to the one you use to market and sell your APIs on RapidAPI, and others can also connect to it.

We will now go through each of those steps. You can check out the link here to return to [part one](https://rapidapi.com/guides/integrate-express-rapidapi-and-xata-into-your-typescript-api-development-part-1), and most importantly, you can have a link to the GitHub repository via this [link](https://github.com/jamesqquick/nodejs-api-with-rapidapi-typescript-xata).

Let's rewind a bit. I have a basic table for jobs within Xata. Our API is a jobs API, so we have access to the *company*, *title*, *job link*, *geography*, etc.

![Our database table on Xata](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/database.png)

## Step 1

I can run our project through the VSCode terminal with the following command:

```sh
npm run start:dev 
```

![Running the API](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/api-run.png)

Another quick recap. Inside the `index.ts` file, we have `/api/jobs` along with `get`, `post`, `put`, and `delete` routes, which are your basic CRUD operations. 

```ts
import {getXataClient, Job} from './xata';
import dotenv from 'dotenv';
import express, {Express, Request, Response} from 'express';

dotenv.conf();

const app: Express = express();
const port = process.env.PORT || 3000;

const xata = getXataClient();

type MyResponse<T> =
	| {
			err: string;
	  }
	| {
			data: T;
	  };

app.get('/api/jobs', async (req: Request, res: Response<MyResponse<Job[]>>) => {
	try {
		const jobs = await xata.db.job.getAll();
		return res.status(200).json({data: jobs});
	} catch (err) {
		console.error(err);
		return res.status(500).json({err: 'Something went wrong'});
	}
});

app.post(
	'/api/jobs',
	async (req: Request<{}, {}, Job>, res: Response<MyResponse<Job>>) => {
		try {
			const job = req.body;
			const createdJob = await xata.db.job.create(job);
			return res.status(201).json({data: createdJob});
		} catch (err) {
			console.error(err);
			return res.status(500).json({err: 'Something went wrong'});
		}
	}
);

app.put(
	'/api/jobs/:id',
	async (
		req: Request<{id: string}, {}, Job>,
		res: Response<MyResponse<Job>>
	) => {
		try {
			const id = req.params.id;
			const job = req.body;
			const updatedJob = await xata.db.joob.update(id, job);

			if (!updatedJob) {
				return res.status(404).json({err: 'Job not found.'});
			}

			return res.status(200).json({data: updatedJob});
		} catch (err) {
			console.error(err);
			return res.status(500).json({err: 'Something went wrong'});
		}
	}
);

app.delete(
	'/api/jobs/:id',
	async (
		req: Request<{id: string}, {}, {}>,
		res: Response<MyResponse<Job>>
	) => {
		try {
			const id = req.params.id;
			const deletedRecord = await xata.db.job.delete(id);

			if (!deletedRecord) {
				return res.status(404).json({err: 'Job not found.'});
			}

			return res.status(200).json({data: deletedRecord});
		} catch (err) {
			console.error(err);
			return res.status(500).json({err: 'Something went wrong'});
		}
	}
);

app.listen(port, () => {
	console.log(`Server running at port ${port}`);
});

```

We can visit [`http://localhost:3000/API/jobs`](http://localhost:3000/API/jobs) to view the returned data. 

![Data returned by our API](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/local-data.png)

## Step 2

We want to start the deployment instantly. You can clone this project or make your own. Ensure your GitHub repository is set up so you can access it from within Render. I've already deployed this application in testing.

![API deployed to Render](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/render-deploy.png)

I will navigate to the Render [homepage](https://render.com/). Already logged in, I intend to create a new web service. Web services are servers that host Node.js APIs.

![Creating a web service](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/create-web-service.png)

## Step 3

I'll now look inside for the project *nodejs-api-with-rapidapi-typescript-xata*. We can name it **jqq-jobs-api-2**. The step includes selecting a region; my closest region is the **US East**. For the root directory, we are operating a `node`. In previous guides, I specified that the `engines` property in the package.json file must contain `node:18`. This is because the Xata SDK is looking for a built-in fetch, which is not available unless you employ a feature flag or a string such as `node:18`.

It will then inquire about the build commands. We will compose the command `npm run build`, which may be slightly modified. Therefore, the build command will execute `npm install`, followed by `rimraf` of the build directory, and finally, `tsc`, which performs the actual compilation.

The `install` command will ensure that all packages, including `rimrraf`, are accessible during the `build` command. In addition, `rimraf` will delete any existing build information to ensure that we receive a set of clean files. Then `tsc` will perform the `build` operation, compiling TypeScript to JavaScript. After which, the start command will be `npm run start`.  Therefore, this command will execute the file `index.js` from the build directory. 

```json
{
    "name": "nodejs-api-with-rapidapi-typescript-xata",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "engines": {
	"node": "≥18",
    "scripts": {
        "build": "npm install && rimraf ./build && tsc",
        "start:dev": "npx nodemon",
        "start": "npm run build && node build/index.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "@types/node": "^18.11.9",
        "nodemon": "^2.0.20",
        "rimraf": "^3.0.2",
        "ts-node": "^10.9.1",
        "typescript": "^4.8.4"
    }
}
```

These were the only requirements. Now we can proceed to create this web service, and it will require a few seconds to spin up.

![Specifying commands](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/commands.png)

## Step 4

In the meantime, I'd like to navigate to RapidAPI Studio. We've already developed an API project in the past called **Jobs Node.js*. Inside the requests section, we can see that all our CRUD requests are already stored in this location.

![Our Jobs API on Rapid API Studio](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/jobs.png)

The [RapidAPI Client](https://marketplace.visualstudio.com/items?itemName=RapidAPI.vscode-rapid-client&ssr=false) extension for VS Code enables you to define multiple requests and switch between projects. Signing in will allow you to connect to an existing project, which will populate these requests.

So while this is running, I could test these to ensure that I receive all of my data and can execute my **GET**,**POST**, **PUT**, and **DELETE** requests. All of those things were available for testing, which is extremely convenient. 

Now comes the last part. We need to make the API publicly accessible in RapidAPI so we can sell it. So head over to the **Hub Listing** section.

![Hub Listing page of Rapid API Studio](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/hub-listing.png)

## Step 5

For the base URL, copy the URL from the link directly beneath the web service on Render. Paste it in the Base URL field on the Hub Lsiting page. Here, you can also upload a logo, choose a category, and provide a brief description, such as "This is an API for developer jobs".

We could add additional information to the readme file and add documentation. The documentation will be derived from the endpoints we add, so it will be relatively straightforward.

![Adding base URL and other details on the Hub Listing page](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/details.png) 

## Step 6

Inside the endpoints section, we will create our single endpoint. `Get Jobs` is the name we'll give to the get endpoint that retrieves the actual jobs. In the description, we can state, "Get all developer jobs," while the endpoint link can read `/api/jobs`. What's interesting is that it will generate code snippets for those who wish to use our API.

![Adding Get Jobs endpoint](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/job-endpoint.png)

## Step 7

The next step is to monetize our API. You can specify the various plans for your API and set usage limits for each one.

![Monetizing the API](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/monetize.png)

## Step 8

Below is how it will appear on the [Rapid API Hub](https://rapidapi.com/hub), where you will receive code snippets for the endpoint and can test it.

![API published on Rapid API Hub](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/hub.png)

However, we must first test this to see if it functions properly. In addition, we should add our API key to the database URL. Therefore, I will simply copy this API key into my `.env.local` file, and then we will add it to the application's environment on Render.

We can add an environment variable using the environment option. I'm going to paste the API key and associated value into the value field. Then, we must save and *deploy latest commit*, ensure that the deployment was successful, and proceed with testing.

![Adding API key on Render](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/render-key.png)

Now, we can test the endpoint directly. Copy the URL and paste it into the browser,  and append */api/jobs* to the URL like this: `jqq-jobs-api-2.onrender.com/api/jobs`. You will notice our API is operational, and it returns the following data:

![Data returned by our deployed API](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/02/deployed-data.png)

## Step 9

Now we can also test the endpoint from its page on Rapid API Hub and see if it is returning proper data. Note that we did not add the remaining endpoints for all the CRUD routes. We're only doing the reads that make sense from a public perspective, but the rest of them are not available in RapidAPI Hub. We have protected them so that only the appropriate individuals can update and delete data, etc., but if you want to, you can add them using the same steps.

## Wrap Up

In summary, we discovered how to run a Node.js project that employs TypeScript, Xata as the database, RapidAPI for developing and testing APIs, and Render's free tier for deployment. This guide is the answer to the question, "What should we do next after Heroku removed its free tier?"


Mashhood A.

Project overview and Rapid shoutout

RapidAPI Client VS Code extension

GitHub repository

Running the Node.js API

Deploy to Render

Create API listing in RapidAPI Studio

Add GET endpoints in RapidAPI listing

Selling your API on RapidAPI

Adding the Xata API key

Testing the API inside of the RapidAPI Hub

Wrap up

Where to Host a Node.js API THAT'S NOT Heroku (FOR FREE!)

Flight widget in pure JS

Flight widget in JavaScript and Node.js using a REST API

Flight widget in React and Node.js using a Database

3 ways to build a Flight Widget! (JavaScript + Node.js + REST API + Database)

Tiffany

 Let's get our Chrome extension up and running right away. There are three things that need to be accomplished. 

- The first thing that we need to do is launch VS Code, make a new file named `index.html`, and give it some kind of organizational framework. 
- The second step entails the production of some JavaScript.
- The third requires the creation of a `manifest.json` file. This is a file that has information on the Chrome extension's metadata within it.

Let's begin by creating a file called `index.html` to get things rolling. Let's write `Toronto Concert Schedule` inside the title. You may name the city whatever you choose. 

In the `body`, let's include a `div` that contains our `title`, which is essentially the same thing. Actually, let's title it `Upcoming Toronto Concerts`.  Additionally, we also need to have an unordered list which is really just going to contain `concerts`.

```html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Toronto Concert Line-up</title>
    </head>
    <body>
        <div>
            <h2>Upcoming Toronto Concerts</h2>
            <ul>
                <li id="concerts"></li>
            </ul>
        </div>
    </body>
</html>
```

This API we're going to use requires quite a few things. We're basically going to compile a list of forthcoming `concerts` for specific dates. You can also add information to the extension, such as the conference dates, URLs for registration, etc. However, the purpose of this guide is to show you how to make a Chrome extension and provide you with a solid base, so that you can then develop it as you see fit. Let's follow that in the following steps:

### Step 1

The first step is to simply create the `script.js` file. Here, we'll make an `async function` called `fetchData()`. This is where the data will be retrieved from when it is requested via our API.

Before going further, let's talk about RapidAPI briefly. [RapidAPI](https://rapidapi.com/hub) is the largest API Hub in the world. It is a platform of the next generation that allows developers to explore and connect to thousands of APIs. RapidAPI allows developers to search for, test, subscribe to, and link to APIs.

![RapidAPI Hub](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/12/RapidAPI-Hub.png)

There are so many enjoyable APIs to experiment with. I utilize the [Concert-Artists-Event-Tracker](https://rapidapi.com/s.mahmoud97/api/concerts-artists-events-tracker/?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel) API for this purpose. This API is quite basic. You can view future events, artist events, past events, and location-based events.

![Concert-Artists-Event-Tracker API](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/12/Concert-Artists-Event-Tracker-API.png)

[RapidAPI](https://rapidapi.com/hub) is incredibly user-friendly if you have never used it before. All you need to do is select the type of endpoint you want, and for this one, I've selected **Events by location**. 

Then, if I scroll down, you can see the location where you desire the events to occur. So I'm going to put Toronto in for myself. Additionally, the minDate and maxDate can be specified. You're free to choose any language, but I'd recommend JavaScript (Fetch).

Let’s test the endpoint. After that, we will simply copy the code and put it into our VS Code `script.js` file.

```js

const options = {
	method: 'GET',
	headers: {
		'X-RapidAPI-Key': 'your-rapidapi-key',
		'X-RapidAPI-Host': 'concerts-artists-events-tracker.p.rapidapi.com',
	},
};

fetch(
	'https://concerts-artists-events-tracker.p.rapidapi.com/location?name=Toronto&miDate=2022-10-09&maxDate=2022-10-12&page=1',
	options
)
	.then(response => response.json())
	.then(response => console.log(response))
	.catch(err => console.error(err));
```

### Step 2

We need to change this code slightly and include `const response` and `await` till we get the API response. The addition of `record` will transform the response into `JSON`. The following step is to log that record.

```js

async function fetchData() {
	const options = {
		method: 'GET',
		headers: {
			'X-RapidAPI-Key': 'ea8fcc@be5msh014de60d714562cp198165jsn0e43a32ae48c',
			'X-RapidAPI-Host': 'concerts-artists-events-tracker.p.rapidapi.com',
		},
	};

	const res = await fetch(
		'https://concerts-artists-events-tracker.p.rapidapi.com/location?name=Toronto&miDate=2022-10-09&maxDate=2022-10-12&page=1',
		options
	);
	const record = await res.json();

	console.log('record', record);
}

fetchData();
```

### Step 3

Simply open your `index.html` file in order to view it. As expected, nothing appears on the screen because we haven't passed anything in yet, but we can see 25 objects in our console. On top of the description of the performers and end date, it also has a variety of other elements.

![Upcoming Toronto Concerts empty display](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/12/Upcoming-Toronto-Concerts-empty-display.png)

### Step 4

Let's return to our code. Now all that remains is to retrieve the element by `id`, which is `concerts`. Given that this record is an array containing objects, we will need to `map` over it.

```js

async function fetchData() {
	const options = {
		method: 'GET',
		headers: {
			'X-RapidAPI-Key': 'ea8fcc@be5msh014de60d714562cp198165jsn0e43a32ae48c',
			'X-RapidAPI-Host': 'concerts-artists-events-tracker.p.rapidapi.com',
		},
	};

	const res = await fetch(
		'https://concerts-artists-events-tracker.p.rapidapi.com/location?name=Toronto&miDate=2022-10-09&maxDate=2022-10-12&page=1',
		options
	);
	const record = await res.json();

	document.getElementById('concerts').innerHTML = record.data.map(item => item.name);
}

fetchData();
```

The upcoming Toronto concert artist can be seen on our browser, however, it is poorly represented. 

![Upcoming Toronto Concerts disarranged](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/12/Upcoming-Toronto-Concerts-disarranged.png)


### Step 5

To make it appear in a list format, I will modify the code slightly. So, let's write that as follows:

```js

async function fetchData() {
	const options = {
		method: 'GET',
		headers: {
			'X-RapidAPI-Key': 'ea8fcc@be5msh014de60d714562cp198165jsn0e43a32ae48c',
			'X-RapidAPI-Host': 'concerts-artists-events-tracker.p.rapidapi.com',
		},
	};

	const res = await fetch(
		'https://concerts-artists-events-tracker.p.rapidapi.com/location?name=Toronto&miDate=2022-10-09&maxDate=2022-10-12&page=1',
		options
	);
	const record = await res.json();

	document.getElementById('concerts').innerHTML = record.data.map(
		item => `<li>${item.name}</li>').join('')`
	);
}

fetchData();
```
 
Now the unordered list items will be displayed. For the sake of demonstrating that you may create whatever type of content you desire with this Chrome extension, I aimed to keep this example as straightforward as possible.

![Upcoming Toronto Concerts arranged list wise](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/12/Upcoming-Toronto-Concerts-arranged-list-wise.png)
  
### Step 6

This is where the magic begins to emerge. Here, we can generate a `manifest.json` file, which, as previously said, contains only metadata. We're going to write the Chrome extension's `name`.  Let's write `version`, `description`, and further information in the code.

```json

{
    "name": "Upcoming Toronto Concerts",
    "version": "1.0.0",
    "description": "This is an extension to Look up concerts coming to Toronto",
    "manifest version": 3,
    "author": "Tiffany Janzen",
    "action": {
        "default ppopup": "index.html",
        "default _title": "Upcoming Toronto Concerts"
    }
}
```

### Step 7

Next, open a new window and navigate to more tools and extensions in Chrome. Turning on developer mode, clicking load unpacked, and selecting the folder containing your extension is all that is required at this point. Lets go back and refresh. We may now view our future Toronto performances.

![Extension added in the Chrome Bowser](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/12/Extension-added-in-the-chrome-bowser.png)

## Wrap up

In conclusion, you have discovered how to create a simple Chrome extension. Using [RapidAPI](https://rapidapi.com/hub), which provides a hub for integrating many APIs into your project, you can construct various types of Chrome extensions.


Build a Chrome Extension | How to Build & Publish a Chrome Extension in 10 Minutes?

In this article, I'm excited to introduce a brand-new [RapidAPI extension](https://marketplace.visualstudio.com/items?itemName=RapidAPI.vscode-rapidapi-client&ssr=false) that will enable you to test your API endpoints and any external APIs you wish to call directly inside Visual Studio Code without switching to another program.

I want to show you four or five aspects that make this place special. Keep an eye out for that. So let's open VS Code and take a look to see what it looks like.

## Using VS Code
 
Let's return to VS Code, where a basic Express server is running. We have an endpoint, `/content`, which will only return a small amount of data.

![Basic Express Server in index.js file](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/09/Basic-Express-Server-in-index.js-file.png)

We're simply simulating an endpoint that would return JSON data. If we open this endpoint, we can see that it returns the data in the form of an array of two different objects with the links `title`, `image`, `URL`, and `description`.

![Opening Endpoint to see data](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/09/Opening-Endpoint-to-see-data.png)

## RapidAPI Client Extension

That is the sample data that we will examine and use. We'll proceed to install the extension. We'll click on the extensions tab, search for RapidAPI, and choose the RapidAPI Client extension. After clicking "install," we'll be all set.
 
![RapidAPI Client Extension in VS Code](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/09/RapidAPI-Client-Extension-in-VS-Code.png)

Following the installation of that extension, you will notice a small icon on the left. By expanding this, we can now test our API endpoints.

![RapidAPI Extension Logo](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/09/RapidAPI-Extension-Logo.png)

## Making and Sending a Request

So, as I indicated, let's make a GET request to `[http://localhost3000/content](http://localhost3000/content)`, as I mentioned earlier. So, we can alter this URL, `http://localhost3000/content`, and add our new request inside the request part. You may now give this a name so we can refer to it as `Get Content`.

It's fantastic that this functionality has been provided in terms of the `description`, as you can format the content with bold, italics, code snippets, and other stuff.

We can proceed with this request, and our data should be returned as expected. So that works perfectly.

![Setting up New Request](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/09/Setting-up-New-Request.png)

Another option is to execute *Create new request from clipboard* from the command palette after copying the URL (http://localhost3000/content) to the clipboard. To accomplish this, press `Command` + `Shift` + `P` on your keyboard and search for create a new request from the clipboard.
 
![Leveraging command palette for new request](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/09/Leveraging-command-palette-for-new-request.png)

It copied the URL I had copied to my clipboard and then `created the request`. Now we can send the API request and expect the same result. So, if you already have a URL copied to your clipboard, you can simply have it generate the request for you.

## Theme Selection 

The fact that this will also respect the colors you have in your theme is another thing I think is incredibly impressive. We can conduct a theme-specific search.
 
![Theme Selection](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/09/Theme-Selection.png)

As you can see, we've updated the theme reflected within the extension. So those colors match and coordinate with the rest of the editor.

If we want, we can switch back to the default dark theme. So dark VS Code will draw in those colors and make everything look good. And for the rest of this, we can just use purple shades.

![Different colors for Theme](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/09/Different-colors-for-Theme.png)

## Test Endpoint

Now, let me show you a couple of extra features that are incredibly great. For example, suppose we have an endpoint we obtained from another source but haven't yet tested it in code and want to create the code to perform that request. This extension can help you with that, though.

You can submit these requests in one of several languages using the dropdown menu inside this Request Snippet. I'll employ *JavaScript*, and the integrated *Fetch* API.

![Selecting language for Request Snippet](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/09/Selecting-language-for-Request-Snippet.png)

I have the option to copy the code snippet that demonstrates how to send a fetch request to this API endpoint.

![Copying the Code Snippet](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/09/Copying-the-Code-Snippet.png)

Another option is to change this to Axios. So those are two of the most common ways to make HTTP requests with JavaScript, and you have built-in code snippets for both.
 
![Leveraging Axios for HTTP request](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/09/Leveraging-Axios-for-HTTP-request.png)

## Type Interface Generation

TypeScript is something I like more and more and more. One of my issues is that I can't always predict what data will be returned or how it will look when I send a call to an API that was either developed by myself or someone else.
 
I frequently log out to the console to examine it. Here's a cool thing, though. We can convert this JSON to a TypeScript interface.

![Converting JSON to TypeScript interface](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/09/Converting-JSON-to-TypeScript-interface.png)

Also, we can have a code snippet for that. Here's the interface representation of that data that comes back, which includes `description`, `image`, `URL`, `link`, and `title`.

![Interface representation of data](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/09/Interface-representation-of-data.png)

Now I am entirely aware of how that info appears. If I'm working on a TypeScript project, I can just drop this interface into my project and have typings appear whenever I make requests to this API.

We might want to consider whether we have an API that accepts a secret API key you pass. I will therefore add a brief snippet to this URL. 

```js
const express = require('express');
const app = express();

const data = [
    {
        link: 'https://ww.producthunt.com/posts/react-and-next-js-snippets',
        title: 'React and Next.js Snippets - React and Nextjs Snippets with TypeScript!? | Product Hunt by Avneesh',
        imageUrl:
            'https://ph-files.imgix.net/b17455eb-f82d-4dla-bd22-68eac9667073.png?auto=format&auto=compress&codec=mozjpeg&cs=strip&w=440&h=220&fit=max&dpr=2',
        description:
            "This Visual Studio Code extension gives you many React and Next. js snippets with typescript support so you don't have to rewrite the same code over and over again.",
    },
    {
        link: 'https://egghead.1o/bLog/drag-to-reorder-list-items-with-framer-motion',
        title: 'Drag-to-Reorder List Items with Framer Motion by willjohnsonio',
        imageUrl:
            'https://egghead.10/_next/image?url=https%3A%2F%2Fres.cloudinary.com%2Fdg3gyk0gu2Fimage%2Fupload&2Fv1644535367%2Fegghead-next-ebombs%2F2022-will%2Fpink_orbs_hexagon_1.png&W=3840&9=100',
        description:
            'If you have an application with a list of items, like a to-do list, shopping list, a list of the greatest basketball players, etc. You might want to reorder your list once you have some items added to it.',
    },
];
const SERVER_KEY = 'secret';

app.get('/content', (req, res) => {
    const { apiKey } = req.query;
    if (apiKey !== SERVER_KEY) {
        res.send(401);
    }
    res.json(data);
});

const port = process.env.PORT || 3000;
app.listen(port, () => console.log(`Listening on Port: ${port}`));

```
So this snippet will take an API key from the query parameters, among other things. The consumer, or whoever makes the request to this API, must include this as a query parameter. 

We will access that variable in this endpoint and compare it to the incoming `apikey=SERVER KEY`. And in that case, feel free to return a 401.

![Extracting API key from the Query Parameters](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/09/Extracting-API-key-from-the-Query-Parameters.png)

This is an example of how the RapidAPI extension's environment variables and groupings work. So let us proceed to save this. When we return to our request, we should see that we have received an unauthorized response or if we look at Raw, we will see that we have received an HTTP response code of 401.

What, then, do we do? So, in the URL, we can add `apikey=secret` right to the request, and we should see that this works. The authorization will be accepted when we make numerous queries and use various API endpoints.
 
![Adding API Key in the URL](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/09/Adding-API-Key-in-the-URL.png)

## Manage Environment Variable

Because we might have multiple API keys for testing, development, production, etc., we might decide against using a hard code. So let's explore how we'd accomplish that in our own environments. Let's go to manage and click to make a new group we may use.
 
![Making a new group](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/09/Making-a-new-group.png)

We can refer to this as Group 2. We'll change the name from `New Environment` to `Development`. Let's add another `Testing` variable in the environment section. Then, inside our `Development`, let's go ahead and add a secret variable with a secret value.
 
![Adding a Variable name and value](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/09/Adding-a-Variable-name-and-value.png)

Let's return to our request at this time. After setting the environment variable, we may enter curl brackets into the URL and then scroll down to choose the environment variable. If we click on this, we can see that the *Secret* option is available, giving you a *Preview* of the value.
 
![Adding Environment Variable in URL](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/09/Adding-Environment-Variable-in-URL.png)

Sending this request should confirm that it is still functioning as expected, but first, let's pick a testing environment.

![Testing Environment](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/09/Testing-Environment.png)

Keep in mind that the variable is not set inside our environment in testing. So testing does not have a value for that secret variable name.

Therefore, it should imply that this will give us a 401 unauthorized, which it does. So, this is how we create several environments inside our groups for the various API queries we do.

We can use those environment variables to avoid hard-coding things, save them once, switch between them as we test, and everything should work.

![Checking the Response](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/09/Checking-the-Response.png)

## Saving API

Another thing I'd like to point out is that, because you're doing a lot of work, you might want to be able to save some of it. Sign in with your [RapidAPI](https://rapidapi.com/?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel) account, which is located at the top right of the extension bar.
 
![Saving API](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/09/Saving-API.png)

This will take us to the sign-in page. Look inside the [Studio](https://rapidapi.com/studio), you'll notice that two different projects are going on. There's an onboarding one where you get a bunch of free stuff.
 
We can also leverage that inside our local environment on VS Code or our testing environment. So if we click on the button next to the sign in and sign out button, there's a *Create new project*. 

This displays the various [RapidAPI Studio](https://RapidAPI.com/studio) related projects I have. The onboarding project I can select already has many requests grouped in these various groupings that assist keep everything logical.
 
Like in the dashboard, I can click on one of these, send the queries, view the results, etc. As a result, this extension is excellent for quickly organizing your request, creating your request, having environment variables, and having to theme with colors and other items that go exceptionally well together.
 
## Wrap up

They have several exciting features, including generating JavaScript snippets for calling the API and your TypeScript types or initiating requests from URLs in your clipboard.

This extension is incredibly beautiful because it has so many interesting small details. Therefore, please go ahead and try it out.

RapidAPI VS Code Extension

Setup express server

Install RapidAPI Client for VS Code

Test API using RapidAPI Client

Test API from Clipboard

Respect VS Code Theme

Generate API call code snippet

API response type generation

Set up environment variables

Sync projects with cloud

Conclusion

I'm Still Not Using Postman!! I Use This NEW VS Code Extension Instead...

Setup a React project

Code the application

Build sidebar

Create Feed

API data fetching

Build layout of feed

Create video card

Create channel card

Render Channel Details

Create Search feed

Create _redirect file

Build and Deploy a Modern YouTube Clone Application in React JS with Material UI 5 | RapidAPI