Gotta Code 'Em All: A Guide to Building Your Own Pokemon API
Tags: typescript, node, express, tutorial
Published: 2023-01-14 14:27:18

---
title: Gotta Code 'Em All: A Guide to Building Your Own Pokemon API
published: true
date: 2023-01-13 11:03:56 UTC
tags: TypeScript,Nodejs,Expressjs,Tutorial
canonical_url: https://techdevblog.io/gotta-code-em-all-a-guide-to-building-your-own-pokemon-api/
---

## Introduction
 ![Gotta Code 'Em All: A Guide to Building Your Own Pokemon API](https://techdevblog.io/content/images/2023/01/image_0-15.jpg)

Are you ready to embark on the ultimate Pokemon adventure? Building your own Pokemon API is like training to become a Pokemon master, but with coding. With this guide, you'll learn how to use [TypeScript](https://www.typescriptlang.org), [Node.js](https://nodejs.org), and [Express](https://expressjs.com) to catch 'em all, in data! So grab your Pokedex and let's get started on the quest of creating the ultimate Pokemon API that will make even Pikachu and Charizard feel envious. By the end of this guide, you'll have a fully functional API that can be used to retrieve information about Pokemon and their abilities.

## Prerequisites

Before you begin, you'll need to have the following software installed on your computer:

- [Node.js](https://nodejs.org) and npm
- [TypeScript](https://www.typescriptlang.org)

Make sure you have the latest version of [Node.js](https://nodejs.org) and npm installed by running the following command in your terminal:

```
node -v
npm -v

```

You should also have [TypeScript](https://www.typescriptlang.org) installed globally by running the following command:

```
npm install -g typescript

```

## Setting up the Project

Create a new directory for your project and navigate into it:

```
mkdir pokemon-api
cd pokemon-api

```

Initialize a new [Node.js](https://nodejs.org) project by running the following command:

```
npm init -y

```

Create a new file called `tsconfig.json` in the root of your project directory. This file will be used to configure the TypeScript compiler.

```
touch tsconfig.json

```

Add the following code to the `tsconfig.json` file:

```
{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "noImplicitAny": true,
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "build",
    "baseUrl": ".",
    "paths": {
      "*": [
        "node_modules/*"
      ]
    }
  },
  "include": [
    "src/**/*.ts"
  ]
}

```

Create a new directory called `src` in the root of your project directory. This is where your TypeScript source code will reside.

```
mkdir src

```

## Installing Dependencies

We'll be using the following packages to build our API:

- express: a popular [Node.js](https://nodejs.org) web framework for building web applications and APIs
- @types/express: the [TypeScript](https://www.typescriptlang.org) definitions for the express package
- cors: a middleware that can be used to enable CORS with various options
- @types/cors: the [TypeScript](https://www.typescriptlang.org) definitions for the cors package

To install these dependencies, run the following command in your terminal:

```
npm install express cors @types/express @types/cors

```

## Building the API

1. Create a new file called `server.ts` in the src directory.
2. Import the following modules at the top of the `server.ts` file:

```
import express from 'express';
import cors from 'cors';

```

1. Next, create an instance of express and configure it to use the `cors` middleware:

```
const app = express();
app.use(cors());

```

1. We need some data to be used in our API. For that, you can use a package like pokemon to import Pokemons data or you can use an external API service like [pokeapi](https://pokeapi.co) to fetch data.

```
import axios from 'axios';

```

1. Next, create a new route that will be used to retrieve information about a specific Pokemon. You can use `axios` to make a GET request to the [pokeapi](https://pokeapi.co), and get the data you need to return.

```
app.get('/pokemon/:name', async (req, res) => {
  try {
    const { data } = await axios.get(`https://pokeapi.co/api/v2/pokemon/${req.params.name}`);
    res.json(data);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

```

1. Finally, you need to tell your express app to start listening for incoming requests on a specific port. You can do this by adding the following line at the bottom of the `server.ts` file:

```
app.listen(3000, () => {
  console.log('Server started on http://localhost:3000');
});

```

By now, this is what your `server.ts` file should look like:

```
import express from 'express';
import cors from 'cors';
import axios from 'axios';

const app = express();
app.use(cors());

app.get('/pokemon/:name', async (req, res) => {
  try {
    const { data } = await axios.get(`https://pokeapi.co/api/v2/pokemon/${req.params.name}`);
    res.json(data);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

app.listen(3000, () => {
  console.log('Server started on http://localhost:3000');
});

```

1. Now you can run the following command to start the API

```
tsc && node build/server.js

```

1. test the API by making a GET request to `http://localhost:3000/pokemon/pikachu` in the browser or a tool like Postman

And that's it! You've successfully built a JSON REST Pokemon API using [TypeScript](https://www.typescriptlang.org), [Node.js](https://nodejs.org), and [Express](https://expressjs.com). You can now use this API to retrieve information about Pokemon and their abilities. You can also expand this example by adding more routes and functionality.

## Conclusion

Well, well, well, look who's the new Pokemon master now! With this guide, you've successfully built your very own Pokemon API and can now access all your favorite Pokemon data at the click of a button. No more waiting for other people's APIs to update, you're the one in charge now! You've just proved that with a little bit of [TypeScript](https://www.typescriptlang.org), [Node.js](https://nodejs.org), and [Express](https://expressjs.com/) knowledge, you can catch 'em all in code! Now go out there and use your new API to battle your way to the top of the leaderboard!

<!--kg-card-end: markdown-->