Slowpoke-dex

A NodeJS website built with the PokeAPI

Visit The Website View Code

About this project

Using the PokeApi, Slowpoke-dex fetches pokemon data in JSON. The JSON is then sent from the Node server to the client to then be mapped by EJS, and styled with CSS/bootstrap. The website also uses a move, items, and sprites dataset provided by Fanzeyi to be matched to the accompanying pokemon. Each pokemon is shown with their base stats, Pokedex entries, evolutions, types, weaknesses, abilities, moves, and more information found in most Pokedex.

Technologies

  • NodeJS/Express
  • HTML
  • CSS/Bootstrap
  • JavaScript/EJS
  • PokeAPI

Why?

--Why did i build it?

I love Pokemon. That's all the justification I need to build this project.

Honesty while replaying Pokemon Emerald(the best generation btw), I, like almost every player, constantly saw myself looking at online pokedexs to get info on new pokemon. Though most of these pokedexs are simple to follow, I felt like they can be even simpler, and highlight information only relevant to the video games. Thus Slowpoke-dex was made. A website that allows pokemon players the ability to quickly look up accurate stats about their beloved pocket monsters.

Gotta Catch Em' All

--Why EJS/NodeJS?

Because the quickest way for me to get most of the useful pokemon data was to call an API(i.e. the PokeAPI), I felt there were only three options for me to render the incoming JSON data to the client. A) Using a framework like React. B) Using vanilla Javascript to fetch the data to then be rendered in HTML. C) Using NodeJS to fetch data serverside to then be rendered client-side using a templating engine like EJS or Pug. Using a framework like ReactJS felt like a bit of overkill for a project as simple as this, and I didn't want to torture myself trying to use vanilla JavaScript to retrieve all the data the PokeAPI had to offer. That left me with using NodeJS and a templating engine.

Using Node and EJS, I was able to set up routes with HTTP requests to send data to the client. Easier to set up than ReactJS and simpler to render than vanilla JS. That perfect sweet spot. Finally, I only picked EJS simply because I liked the syntax more than Pug or Haml.

Problems/Bugs as of now

  • Initial page load is still pretty slow. This is likely due to heroku's dynos sleeping

  • Page footer does not stick to the bottom of the page

  • There is no favicon

  • There is way too much empty space between the moves table

  • Some pokemon's pokedex entries seem to include weird symbols that need to be removed

  • The evolution chain styling needs to be a lot easier to read. That includes more spacing between the arrows and words and a complete do over of the eevee evolution chain, because wow is it horrible to look at

  • Some of the EJS pages such as evolution.ejs, and moves.ejs are extremely difficult to read. Too much of the ejs syntax has been mixed with HTML, making the page incredibly confusing to look at

  • Other pages such as pokemon.ejs, and types.ejs are too bloated and need to be spit up to avoid unreadibility

  • This didn't really need bootstrap

  • Many, many more that I'm not thinking of