Pokemon Card Search

In the wake of the franchise's boosted popularity, I recently rediscovered Pokemon cards. It's become a pretty exciting hobby - something about the combination of organization and mechanics really speaks to the programmer in me. The physical form and layout of the cards, in particular, crossed some wires in my head with CSS layouts, and I was inspired to combine the two interests.

I started out by just replicating a card as an element and doing some 3D transformations on it. I measured the dimension ratio (and wrote some SCSS to maintain it), slapped images on the front and back of it, and had fun spinning it around and applying a drop-shadow filter. Then I discovered the Pokemon TCG API, and things really got interesting.

I've always loved writing front-ends for APIs; seeing huge swaths of data populate these generic structures you've written is so exciting. This one was particularly simple. An input element, a keyup listener, and a couple jQuery statements later, I was listing (and arguably fully rendering) all cards that match an arbitrary search string. It only took a couple of hours and the result is quite fun to use. I replaced the spin effect with a float effect so they were easier to browse, and added zooming on hover, and now many of the people I play cards with are using it to look things up.

go to project