Pokemon Evolution Guide; or, My First React App

I decided to try out React for the first time. I'm used to Vue, so hoped some of that expertise would carry over, and I think it did. But boy, there were still some difficulties!

Firstly, a description of the app. I wanted a tool to easily see, at a glance, how to evolve my Pokemon in order to complete my Pokedex in various games. Most of the time you just need to level them up to a certain point, but some need other special requirements (such as trading them with a friend, or using a special item) that aren't mentioned anywhere in the game!

So this tool helps to highlight all of these funky methods of evolution, so that I don't waste hours trying to level up Pokemon that won't evolve (as I did in my youth). Here's a screenshot:

It's hosted on Vercel for free; click here to try it out!

Using React & Next

For the most part, I was able to figure out what I needed from the React, Next, and Tailwind docs, with a few assists from StackOverflow of course. It was quite fun, as well, exploring a new framework!

The difficulties came in when I was confronted with Next's SSR-first architecture. Vue has support for SSR, though I've never used it. The idea is: asynchronous code (API calls, database queries, etc) should be handled in server components; and browser APIs and interactivity are handled in client components.

Trying to get around some of these server/client differences, and figuring out how and in what context to use hooks, and then discovering and bouncing off of contexts; all of these presented challenges to how I wanted to write the webapp code.

It even took a while to figure out how to make React react to a checkbox change! Several StackOverflow threads about it offered various wacky workarounds and extra npm packages as solutions; then I found the official React doc on using state and found it was actually quite simple after all, once you know how.

So after some more and more tweaking, after two days working on it, I've finally got this little app in a nice place where I'm really happy with it. And excited to start using it!

And as always, the code is available on GitHub.