The ultimate Pokemon web-app for quickly finding the information you need.

Background.

A friend and I got into Pokemon nuzlockes, a punishing and challenging way of playing the games. We were constantly looking for a fast way to find certain information about either our own Pokemon or those we were about to battle. There are many great resources out there, but when having to look up things constantly we noticed the buildup of tabs and that certain information took one too many clicks to access, especially when we were constantly doing it.

I wanted to see if I could build a tool for just the two of us, that would suit our needs.

Development.

I’m not a huge fan of delving into the excruciating dense and ever-changing jungle of web-development, and in particular the realm of JavaScript frameworks. Nevertheless, I heard good things about Svelte and decided this was an opportunity to give it a whirl, in addition I wanted to try Tailwind despite loathing the idea of convoluting my components with literally hundreds of CSS classes.

The core of the micro-site is of course a truckload of data, which quite conveniently is readily accessible through an open API by the name of PokeAPI. I was expecting some sort of limit or a premium version but luckily it was all free, although usage at the the developer’s discretion. Having tested and studied the API and it’s many endpoints I came to realize that in order to get the majority of the information I’m after, we’d be making a whole lot of queries. Even if the API was limitless and I could in theory abuse it, I wasn’t about to take advantage of this fantastic resource. I started with exploring the possibility of service workers in order to cache the contents, which in theory allows the user to come back to page without having to go through the painful loading times. Of course, there was a better way and in addition to caching, we were going to store that data on our server, occasionally calling PokeAPI in the background to make sure all our information is up to date.

Status.

The site can be found here. It is live and working, currently being updated on a semi-daily basis. I’m still working on implementing a database but more fun functionality has taken precedence as I’ve started using it quite a bit, for our nuzlockes, recreational PokeRogue runs and most importantly because my 5-yeard old is obsessed with Pokemon and enjoys seeing all the Pokemon listed.

In addition I’ve planned to display even more information, but to be respectful of the queries I’ll save this for after the database is implemented. Many design elements are currently in a “function over form”-state and overall the page and many of the elements need to be tidied up.

If the project still tickles that itch I have a handful of tools and detailed views that I’ve been thinking about, all of these exist on other pages, so once again it would be cool to have everything readily available in one place.

Features

• Quickly find any of the 1025 Pokemon

  • Search bar and type filter buttons - always on top for quick access with a fast clear function

• Displays important information for each Pokemon

  • Pokedex #

  • Type and Type match-ups

  • Base stats (with a star-rating system)

  • Base stat distribution and tier

  • EVs gained

  • Indication for notable species traits such as mythical, baby or pseudo-legendary

  • Direct links to evolution data, locations, moves and their respective Bulbapedia page.

  • Misc. info such as growth rate, height and weight, base xp

• Displays history of last 10 Pokemon selected

• Service worker for saving bandwidth, speeding up loading of data and for potential offline use.

• Easter egg(s)

• Responsive design

  
  

  
  

Tools

• Sveltekit

• Skeleton UI (Tailwind)

• Visual Studio Code

• Affinity Designer

• Git and GitHub