Who's That Pokemon?!? is a full-stack quiz game based off of the famous segment of the Pokemon Anime. Its aesthetic is heavily inspired by the 98.css design system and my memory of an old Pokemon-themed Microsoft Paint clone called Pokémon Project Studio Red and Blue (I actually downloaded an old .iso of the game and used the CD's icon and the favicon for the application). The artwork I am using is the original Ken Sugimori watercolor drawings of the original 151 Pokemon. Nothing says nostolgia to me quite like an OG Ken Sugimori Charizard drawing.

Please note that this project is still far from finished and is not very polished. This is a fun side project for me to test out some new (to me) tech. If there are any changes or features you'd like to see, feel free to file an issue or a pull request on its GitHub Page -- opens in a new window

The Stack

The project's back-end utilizes Docker, PostgeSQL, and GraphQL ( via PostGraphile). The project's front-end was initially scaffolded using Create React App, the data layer is handled by Apollo Client, and its stying is written with styled-components. As for hosting, I have the back-end running on a simple EC2 instance on AWS and the front-end hosted with Netlify (because I can't get enough of their plug-n-play CI/CD 😍).

Project's Motivation

A lot of people build todo list apps as a Rorschach test for evaluating a new piece of tech, however, I use "Who's That Pokemon?!?" for this purpose. It works for me because the concept is simple, but it tests a lot of aspects of an application such as the following:

1. Pick 1 mystery Pokemon and 3 wrong answers (array manipulation)
2. User selects an answer (form handling)
3. Show if the user is correct and persist that choice (website interaction, APIs, and databases)

This particular implementation of Who's That Pokemon?!? was motivated because I unfortunately had to step away from the world of React for about a year while I worked on different tech stacks for other companies (vanilla web components, and Angular).

While I was away, a lot had changed! There are these new things called React Hooks and now, it seems uncouth to use stateful components and dare I say Redux 😱. This application was my fun way to break back into the React world while trying out another new toy that I've been meaning to learn, Docker 🐳.

Things to Work On

Currently, there are a lot of rough edges on the project. There's one shared session for all users because I will (eventually) add an account system, so each person can 🎵 be the very best, like no one ever was! 🎵

There are some serious accessibility issues with the game in its current state. These will likely be the first issues I tackle. One issue is that the keyboard navigation is awful. I can't skip past the long list of Pokedex Entries and because I am using visually-hidden radio buttons for the multiple choice answers the focus ring isn't visible.

Additionally, the mystery Pokemon literally has the answer to the question in its alt-text. I am going to change that to the Pokedex's description of the Pokemon once I scrape the data and add it to my database. Regardless of whether a person uses their eyes or a screen reader to play the game, they should be equally tested on their Pokemon Mastery 🎆.

I also have found that the native HTML dialog element to be very inconsistent from browser to browser and I am still fixing UI glitches caused by that.

Finally, I would love to add a proper victory screen with the ability to start spotting the next generation's Pokemon.

Conclusion

Wheww that's a lot of issues 😅. These will all be addressed in the future, but this game is not as pressing as my other projects at the moment. This is just a fun project for me and I hope you get some joy out of it as well! 🌹

Find an issue with this post? Think you could clarify, update or add something?

All my posts are available to edit on GitHub. Any fix, little or small, is appreciated!

Edit Post -- opens in a new window