This is an interactive web-based application for Pokémon fans that allows users to track their progress at catching ’em all. Each game in the series takes place in a different region, and as a result has different native Pokémon species. The Living PokéDex is a gameplay strategy where one catches one example of every single available species, sorted by their index ID number.
With the release of Pokémon Home, fans of the game series can now store their entire series-wide Living PokéDex in the cloud.
Technologies used
- HTML & CSS
- JavaScript
- Bootstrap
- Firebase
Why I built the Living PokéDex Tracker
Many people picked up a new hobby or skill during the COVID-90 pandemic; building an interactive PokéDex was mine. I started working on it in March of 2020 when I was placed on furlough for a month, as a way to keep my skills fresh and stay productive during my downtime. I’ve always been a fan of the Pokémon games, and this was the perfect way to combine my passion for the games with maintaining my design and coding skills.
Designing the website
I designed this site with a mobile-first mindset; everything should work natively and gracefully on smaller devices, and scale upward for larger screens. As a result, the design of the Pokémon boxes is fully responsive and adjusts to the size of the device. All of the interactions are also touchscreen compatible.
The interface has a light mode and dark mode, complete with CSS adjustments for both modes. This improves usability and accessibility, especially since many users prefer dark mode interfaces.
In July of 2023, I released a significant update to the website. Previously, users clicked on a Pokémon’s icon to cycle it through four different states, but many users simply wanted to toggle between two states. When I added a fifth state, it made sense to change the default interaction to toggle between the two most common states and put the other three states in a context menu.
After publishing the interface update, I’ve seen a significant increase in active users combined with a decrease in user events. This means that more people are using the site, and having to click fewer times to manage their PokéDex. I’d call that a better user experience.
Database challenges
The first iteration of the app had no way to store user data. I actually kept my own progress stored in a JSON file on my computer, but that wasn’t an option once other people started using the app. I chose to implement a database to allow my users to safely store data and synchronize it between devices.
After initially attempting to rework the website to use a MySQL database, I switched over to Firebase since it was much more intuitive and user-friendly for me to work with. This also allows me to have single sign-on for my users via Google, Facebook, and multiple other providers.
Current state
It’s still a work in progress, and I have several thousand users registered to use the website. They provide me feedback, and a few of them have volunteered to beta test new features as I develop them. I also offer supporters on Ko-fi and Patreon the ability to vote on which feature I develop next.
Screenshots
