DEV Community

Matt Williams for Tech Dev Blog

Posted on • Originally published at techdevblog.io on

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

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:

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

Enter fullscreen mode Exit fullscreen mode

You should also have TypeScript installed globally by running the following command:

npm install -g typescript

Enter fullscreen mode Exit fullscreen mode

Setting up the Project

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

mkdir pokemon-api
cd pokemon-api

Enter fullscreen mode Exit fullscreen mode

Initialize a new Node.js project by running the following command:

npm init -y

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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"
  ]
}

Enter fullscreen mode Exit fullscreen mode

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

mkdir src

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode
  1. Next, create an instance of express and configure it to use the cors middleware:
const app = express();
app.use(cors());

Enter fullscreen mode Exit fullscreen mode
  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 to fetch data.
import axios from 'axios';

Enter fullscreen mode Exit fullscreen mode
  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, 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 });
  }
});

Enter fullscreen mode Exit fullscreen mode
  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');
});

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode
  1. Now you can run the following command to start the API
tsc && node build/server.js

Enter fullscreen mode Exit fullscreen mode
  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, 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!

Top comments (0)