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

Rapid API Courses

JavaScript Mastery

Mashhood A.

Intro

No-code way

 Code Way

Deploy & Publish APIs

I Abandoned Postman for This NEW VS Code Extension | Build, Test & Sell APIs

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

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?"


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!)

Ania Kubów

Introduction

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?

For this, I'll divide it into categories that I've lately researched to discover inspiration for building projects that I'm passionate about.

## Hobbies

It should come as no surprise that the first is gaining inspiration from your hobbies. Get a hobby if you don't already have one. You cannot have your entire life revolve around technology or your profession.

**Hobbies** are quite important, and they don't have to be this bizarre activity. It could be a hobby in which you have a strong interest, such as collecting cards. Basically, everything that you are interested in. You can turn any area of interest into a project; it doesn't have to be a specific hobby. 

It is true that we can become stuck generating fresh ideas on occasion. [RapidAPI](https://rapidapi.com/hub) is one item that helped me break free of this rut. There are so many amazing APIs listed there that I can't help but be fascinated by them.

![RapidAPI Hub – World’s largest API Hub](https://devrelstack.kinsta.cloud/wp-content/uploads/2022/12/RapidAPI-Hub.png)

I've recently begun to structure projects around these APIs. For instance, I created an API using an [Concert-Artists-Event-Tracker API](https://rapidapi.com/s.mahmoud97/api/concerts-artists-events-tracker/?utm_source=RapidAPI.com%2Fguides&utm_medium=DevRel&utm_campaign=DevRel) from RapidAPI Hub.

So I began going backward in terms of identifying things I'm interested in with my hobbies and interests, locating APIs that connect to it, reading about the APIs via the documentation, observing what others have built, and gaining a great deal of inspiration to create small projects.

## Playing makes belief

**Playing makes belief** is the subsequent source of creative inspiration or ideas for my current endeavors. This is something I did early on when building my initial developer portfolio. Playing makes belief means creating projects for individuals who didn't ask for them and probably didn't need them.

Once, I constructed a project for my father's construction company. I created a website with a logo and added houses and information to it. But the idea is that even if someone in your family or circle of friends doesn't require a website, app, or whatever it is that you specialize in, you can still make something for them, and you don't even have to consult with them or discuss it.

For instance, you can create a website for your mother that features all of her baked goods and contact information, and begin to view her as a client. It will accomplish two goals, particularly if you are just beginning your development career. It clearly demonstrates your initiative. It appears that you are accepting clients. No one knows it's your mother or who the person is for whom you created the website, therefore this is also a superb method.

## Games

**Games** are the third thing that has been a major source of inspiration for me. I've been toying with Python a lot, and it's a great language for creating quick and enjoyable projects.

I've been enjoying discovering new games, especially retro games, to build with it. So here is yet another idea. You can make an X's and O's game, a chess game, or a hangman game, and you just make a game regardless of whether you played it or not. That's not the point, but pick a favorite game of yours and build it. 

## Steal like an artist

Another intriguing technique to create projects is to **steal like an artist**, which means it's perfectly acceptable to borrow inspiration from people who have developed outstanding projects. Obviously, you shouldn't copy them exactly, but why not draw inspiration from them if you witness someone creating something truly remarkable?

This definitely makes you question why you shouldn't design your own project differently. This is not a copy of someone else's work. This does not imply that your project is identical to theirs; rather, it seeks inspiration from others.

This occurs frequently in music, fashion, culinary, and every other business. Therefore, it is also prevalent in the IT industry, and if you have a person you greatly admire, analyze their projects and see if you can draw inspiration from them.

## Solving Real-World Problems

**Real-world problem-solving** has been a large part of my recent activity. This is my current favorite pastime. Because it is so enjoyable, I rapidly develop a strong passion for it.

Previously, I created a React app that took an API for food and randomized the results. Therefore, each time I pressed a button, a different type of food output would be generated. This would advise me what kind of takeout I should buy for dinner. Given the difficulty of ordering meals, it is impossible to decide what to eat and buy food. So I was like, let the code do it for me.

It just goes to show how much fun it can be to develop solutions for actual problems. Whether it's something that places food orders for you, chooses your clothes for you, offers you a variety of recipes to cook with various drinks to make—the list is endless—it's a really great way to become deeply invested in a project because you know you'll use it in the future. It is a solution to an issue that exists in the real world.






 Confession time

Unique coding idea #1

Unique coding idea #2

Unique coding idea #3

Unique coding idea #4

How To Come Up With Coding Project Ideas

We will build a game that allows us to choose a level, fetch data based on that level, and map it onto cards and buttons. We will then build out the logic of getting a correct answer to show the word ‘correct’ under the button. It will give us a point and remove a point if we get the answer wrong. 

## Prerequisites

As it is a beginner project using APIs and React, you should have a basic understanding of HTML, CSS, and JavaScript.  You will also need to be familiar with React. However, even if you don't have a firm grip on React, follow this tutorial, as pushing yourself is how the best learning is done. With that said, let’s start right away.

## Step 1: Finding the API

To find the API for our game, I will go to [Rapid API Hub](https://RapidAPI.com/hub). It is a platform where you can find and connect to thousands of well-developed APIs.
 
![Rapid API Hub](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/hub.png)

I love using [Rapid API](https://RapidAPI.com/hub) as I can scroll through all the options of their APIs in a categorized way. And not only that, but once I have a Rapid API key, I can use the same key for all the APIs you see. So there is no need to sign up to various different platforms and manage hundreds of passwords and API keys. 

### Word Quiz API

The [Word Quiz API](https://rapidapi.com/twinword/api/word-quiz/) on Rapid API Hub fits our game perfectly, so let’s use it.

![Word Quiz API](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/word-api.png)

Go ahead and subscribe to the API. Upon testing the endpoints, you can see this API returns an object that shows us the level and an array under the `quiz list`. The `quizlist` array consists of the following elements:

- `quiz`: Three question words.
- `option`: Two options to choose from.
- `correct`: The correct answer.

![Testing the Endpoint](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/endpoints.png)

For easy integration, [RapidAPI Hub](https://RapidAPI.com/hub) automatically generates snippets in multiple languages and options. We will copy and use the (Node.js) Axios one, as you can see below. 

```js
const axios = require('axios');
const options = {
	method: 'GET',
	url: 'https://twinword-word-association-quiz.p.rapidapi.com/type1/',
	params: { level: '3', area: 'sat' },
	headers: {
		'X-RapidAPI-Key': 'your-api-key',
		'X-RapidAPI-Host': 'twinword-word-association-quiz.p.rapidapi.com',
	},
};
axios
	.request(options)
	.then(function (response) {
		console.log(response.data);
	})
	.catch(function (error) {
		console.error(error);
	});
```

The `X-RapidAPI-key` field will have your secret API key.

## Step 2: Setting up the React App

Now launch the code editor of your choice to make a new React project. I'll use WebStorm, call my project “Word game” and click on create. 

![Creating a new React project](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/react-project.png)

WebStorm will spin up our React app containing different files. The  `App.js` file is the one where most of the code will be done. To keep things simple, I will delete the extra files not needed for our project and clean up a little of the code in `App.js` file as well.

![The App.js file](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/app-js.png)

You can run this app by pressing the “run” button WebStorm and opening it on the browser. That’s how it will look in the console lookout of your browser.

![App running in the browser](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/app-run.png)

## Step 3: Fetch data into our app

We will install the Axios package for calling the API. We can do that by running the command `npm i axios` in our terminal, making sure we are in the correct directory.
 
This will also create a new dependency in the ‘package.json’ file showing Axios and its version. Next, we will import Axios in our `App.js` simply by writing:

```js
import axios from 'axios';
```

Now, I will create a `getRandomwords` function and paste the Axios (Node.js) snippet (that we copied above) in it.  So, once we select a level, this function will fetch the data of that selected level. Now, this is what our `App.js` file should look like.

```js
import axios from 'axios';

const App = () => {
	const getRandomWords = () => {
		const options = {
			method: 'GET',
			url: 'https://twinword-word-association-quiz.p.rapidapi.com/type1/',
			params: { level: '3', area: 'sat' },
			headers: {
				'x-rapidapi-host': 'twinword-word-association-quiz.p.rapidapi.com',
				'x-rapidapi-key': 'your-api-key',
			},
		};
		axios
			.request(options)
			.then(response => {
				console.log(response.data);
			})
			.catch(error => {
				console.error(error);
			});
	};
	return <div className="App"></div>;
};

export default App;
```

## Step 4: Select levels

We need to store the chosen levels in a state. Moreover, for us to be able to select levels in our game, we will need to create a `select` element and add level numbers as its options. 

```js
import axios from 'axios';
import { useState } from 'react';

const App = () => {
	const [chosenLevel, setChosenLevel] = useState(null);
	const getRandomWords = () => {
		const options = {
			method: 'GET',
			url: 'https://twinword-word-association-quiz.p.rapidapi.com/type1/',
			params: { level: '3', area: 'sat' },
			headers: {
				'x-rapidapi-host': 'twinword-word-association-quiz.p.rapidapi.com',
				'x-rapidapi-key': 'your-api-key',
			},
		};
		axios
			.request(options)
			.then(response => {
				console.log(response.data);
			})
			.catch(error => {
				console.error(error);
			});
	};
	console.log(chosenLevel);

	return (
		<div className="App">
			<select name="levels" id="levels" value={chosenLevel} onChange={e => setChosenLevel(e.target.value)}>
				<option value="1">Level 1</option>

				<option value="2">Level 2</option>

				<option value="3">Level 3</option>
			</select>
		</div>
	);
};

export default App;
```
I have added a `console.log` to verify our `chosenLevel` state. Select a level, and it should log the level in your console like this.

![Select menu and chosen level](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/select.png)

Let's move on. Now that we can select different levels, we would want to pass them into the `getRandomWords` function. So, we will replace the hard coded value with `chosenLevel` inside the params of our request.

For layout, we will add some headings and new divs for level selector and question area.

```js
import axios from 'axios';
import { useState } from 'react';

const App = () => {
	const [chosenLevel, setChosenLevel] = useState(null);
	const getRandomWords = () => {
		const options = {
			method: 'GET',
			url: 'https://twinword-word-association-quiz.p.rapidapi.com/type1/',
			params: { level: chosenLevel, area: 'sat' },
			headers: {
				'x-rapidapi-host': 'twinword-word-association-quiz.p.rapidapi.com',
				'x-rapidapi-key': 'your-api-key',
			},
		};
		axios
			.request(options)
			.then(response => {
				console.log(response.data);
			})
			.catch(error => {
				console.error(error);
			});
	};
	console.log(chosenLevel);

	return (
		<div className="App">
			<div className="level-selector">
				<h1>Word Association App</h1>

				<p>Select Your level to start</p>

				<select name="levels" id="levels" value={chosenLevel} onChange={e => setChosenLevel(e.target.value)}>
					<option value="1">Level 1</option>

					<option value="2">Level 2</option>

					<option value="3">Level 3</option>
				</select>
			</div>

			<div className="question-area">
				<h1>Welcome to level: {chosenLevel}</h1>
			</div>
		</div>
	);
};

export default App;
```

## Add background colors

To make it look more pleasing to the eyes, let's add some colors to our headings in our `index.css` file.

```css
.level-selector {
	background-color: red;
}
.question-area {
	background-color: blue;
}
```
Here is how it's going to look.

![Adding basic colors](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/basic-ui.png)

Now, on selecting a level, I want the red div to disappear so that we only see the blue one. At the moment, that's not happening. For that, I will use the `chosenLevel` variable like this:

```js
<div className="App">
{ !chosenLevel && <div className="level-selector">
```

So, we have decided that our chosen level will be the reason that one div shows as opposed to another. We also want this chosen level to decide when we get our data. We can do it by using the ‘useEffect’ hook. 

The ‘useEffect’ hook is essentially something that happens after the app renders, like a side effect. Also, we can make it re-render as many times as we wish based on certain variables. 

Let’s create a hook that will run when the `chosenLevel` changes. Inside the hook, we will check if the variable `chosenLevel` exists. If it does, we will call the `getRandomWords` function. In code, it translates to:

```js
	useEffect(() => {
		if (chosenLevel) getRandomWords();
	}, [chosenLevel]);
```

## Step 5: Map out the questions

Now, let’s map our questions on little cards. For this, I will make a new div of ‘question-box’ and style it in the css file. You may make a card component for this and add styling and extra functionality to your cards. For this guide, I am going to keep it simple.

```css
question-box {
	background-color: antiquewhite;
	padding: 10px;
	border-radius: 20px;
	margin: 10px;
}
```

![Creating the question card](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/question-card.png)

Great! Now that we have one little card. We want ten cards because that is the number of questions we have. We will map out the questions, options, and the correct answer on those cards.

```js
import axios from 'axios';
import { useState, useEffect } from 'react';
const App = () => {
	const [chosenLevel, setChosenLevel] = useState(null);
	const [words, setWords] = useState(null);

	const getRandomWords = () => {
		const options = {
			method: 'GET',
			url: 'https://twinword-word-association-quiz.p.rapidapi.com/type1/',
			params: { level: chosenLevel, area: 'sat' },
			headers: {
				'x-rapidapi-host': 'twinword-word-association-quiz.p.rapidapi.com',
				'x-rapidapi-key': 'your-api-key',
			},
		};
		axios
			.request(options)
			.then(response => {
				// Storing API response (words) in the state
				setWords(response.data);
			})
			.catch(error => {
				console.error(error);
			});
	};

	useEffect(() => {
		if (chosenLevel) getRandomWords();
	}, [chosenLevel]);

	return (
		<div className="App">
			{!chosenLevel && (
				<div className="level-selector">
					<h1>Word Association App</h1>

					<p>Select Your level to start</p>

					<select
						name="levels"
						id="levels"
						value={chosenLevel}
						onChange={e => setChosenLevel(e.target.value)}
					>
						<option value="1">Level 1</option>

						<option value="2">Level 2</option>

						<option value="3">Level 3</option>
					</select>
				</div>
			)}
			{chosenLevel && words && (
				<div className="question-area">
					<h1>Welcome to level: {chosenLevel}</h1>
					{words.quizist.map(question => (
						<div className="question-box">
							<p>{question.correct}</p>
						</div>
					))}
				</div>
			)}
		</div>
	);
};
export default App;
```
Our app will now look like this:

![Adding multiple cards](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/multiple-cards.png)

Alright. As you can see, it is only showing the correct answers. We will need to map another array inside the `question-box` div, to show the quiz words and the options of the quiz. 

```js
<div className="question-box">
	{question.quiz.map(tip => (
		<p>{tip}</p>
	))}
	<div className="question-buttons">
		{question.option.map(option => (
			<div className="question-button">
				<button>{option}</button>
			</div>
		))}
	</div>

	<p>{question.correct}</p>
</div>;
```

 Let's have a look. 

![Displaying quiz words and options in cards](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/cards-multiple-options.png)

Now let’s make the question buttons appear next to each other.

```css
.question-buttons {
	display: flex;
	flex-direction: row;
}
```

I would also want the word “Correct!” to appear under the button if we get the correct answer. The `question-button` will do it for us. I will use flex again, but this time I'm going to give it the flex direction of `column`. 

```css
.question-button {
	display: flex;
	flex-direction: column;
}
```

## Step 6: Check for the correct answers

To check for the answer, I will write a function to check if our answer is correct based on the button we click. First, create the button:

```js
<div className="question-button">
	<button onClick={() => checkAnswer(option, optionIndex + 1, question.correct)}>{option}</button>
</div>;
```
I will also need to give each of the options an index. We’ll have to add `1` to the index because our correct answers start with index of `1`. Now, if the option index equals the correct answer index, it will be considered the correct answer. 

Here is the `checkAnswer` function:

```js
const checkAnswer = (option, optionIndex, correctAnswer) => {
	console.log(optionIndex, correctAnswer);
	if (optionIndex == correctAnswer) {
		setCorrectAnswers([...correctAnswers, option]);
	}
};
```

When I click on the correct answer, it will add it to the `correctAnswers` array. `correctAnswers` is a state I have initialised like this:
 
```js
const [correctAnswers, setCorrectAnswers] = useState([]);
```

##  Step 7: Display the correct answer

The next thing that I want to do is simply display “Correct” if the answer is right. This will be easy because we're already collecting the correct answers in our array. We will simply add this function under the ‘question-button’.

```js
<div className="question-button">
	<button onClick={() => checkAnswer(option, optionIndex + 1, question.correct)}>{option}</button>
	{correctAnswers.includes(option) && <p>Correct!</p>}
</div>;
```

![Displaying "Correct" if the answer is right](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/cards-options.png)

## Step 8: Calculate the total score

One last thing we need to do is add the score so that by the end, we know our final score. I will do this in the `checkAnswer` function. Every correct answer will increase the existing score.

```js
const [score, setScore] = useState(0);
const checkAnswer = (option, optionIndex, correctAnswer) => {
	if (optionIndex == correctAnswer) {
		setCorrectAnswers([...correctAnswers, option]);

		setScore(score => score + 1);
	} else {
		setScore(score => score - 1);
	}
};
```

## Step 8: Hide the correct answer

The correct answer should be a secret, so we can hide it by removing the selected code:

![Removing code to hide answer](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/removing-code.png)

## Step 9: Add more levels to our game

We can also increase the number of levels of our game from three to ten simply by copying and pasting.

![Adding ten levels](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/adding-levels.png)

## Step 10: Final Styling

To make our app eye-catching, I will add the following css styles to the question area and buttons. I will keep it simple, but you can, of course, go wild and style it up as much as you want.

```css
.app {
	font-family: 'Trebuchet MS', 'Lucinda Sans Unicode', 'Lucinda Grande';
	display: flex;
	justify-content: center;
	text-align: center;
	padding-top: 50px;
}

.question-area {
	max-width: 1000px;
}
.question-box {
	background-color: antiquewhite;
	padding: 10px;
	border-radius: 20px;
	margin: 10px;
}

.question-buttons {
	display: flex;
	flex-direction: row;
}

.question-button {
	display: flex;
	flex-direction: column;
}

button {
	margin: 5px;
	padding: 8px;
	border-radius: 5px;
	border: none;
	background-color: darkcyan;
	color: white;
}

button:disabled {
	background-color: darkgrey;
	color: darkolivegreen;
}

select {
	margin: 5px;
	padding: 8px;
	border-radius: 5px;
	border: none;
	background-color: darkcyan;
	color: white;
}
```
That’s it! Our game is ready.

![Final look of our game](https://devrelstack.kinsta.cloud/wp-content/uploads/2023/03/final-ui-1.png)

## Wrap Up

I hope you enjoyed building this game with me. You can create your own similar games using more APIs from RapidAPI.

<Callout
    title="Find Awesome APIs for your projects"
    linkText="Sign up"
    linkHref="https://rapidapi.com/auth/sign-up"
>
Explore more than 40,000 APIs on Rapid API Hub and find the right API for your next project.
</Callout>


Exploring the API

Setting up our React App

Getting data into our App

Selecting levels

Mapping out questions onto cards

Checking for correct Answers and adding to arrays using useState

Disabling multiple buttons with React hooks

Displaying the score

Styling

Env files in React

Where to go next - build a NodeJS backend

API Project! Word Association Game

Midudev

RapidAPI Hub

Test API

Conclusion

How to CONSUME a REST API with JAVASCRIPT and Fetch + Promises with Error handling