Gotta Code 'Em All: A Guide to Building Your Own Pokemon API

Gotta Code 'Em All: A Guide to Building Your Own Pokemon API was initially published on Friday January 13 2023 on the Tech Dev Blog. For the latest up-to-date content, fresh out of the oven, visit https://techdevblog.io and subscribe to our newsletter!

Introduction

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, Node.js, and Express 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 and npm
TypeScript

Make sure you have the latest version of Node.js and npm installed by running the following command in your terminal:

node -v
npm -v

You should also have TypeScript 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 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 web framework for building web applications and APIs
@types/express: the TypeScript definitions for the express package
cors: a middleware that can be used to enable CORS with various options
@types/cors: the TypeScript 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

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

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

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

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

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 to fetch data.

import axios from 'axios';

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, 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 });
  }
});

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');
});

Now you can run the following command to start the API

tsc && node build/server.js

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, Node.js, and Express. 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, Node.js, and Express 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!