My 3rd issue this Hacktober was in a fun web app that was looking to recreate the Pokedex. This particular issue was about improving the search functionality, more specifically by increasing the number of Pokemon from 20 to 1017 and the many variants that come with that number.
As someone who loves Pokemon and grew up with the series, I figured I'd give it a shot since it would be something fun.
Process
Based on the requirements realistically all I would need to do is change the request URL for the PokeAPI call. So, when I first forked the app, I explored the many files found within trying to find where my addition would go. Luckily everything was nicely organized within folders and I ended up finding it in a file called FetchApi.js. Simply changing the number from 20 to 1017 would have technically met the requirements for the overall functionality. Though the way things were being handled when a user loaded the site, 1017 requests were simultaneously made to grab the image files of every Pokemon, which of course is terrible practice and ended up breaking the app.
The requirements also noted to reduce the number of API calls being made in order to speed the app up, so clearly the way this information was being handled wasn't appropriate for 1017 Pokemon.
To fix this, I decided to implement 'Lazy Loading' a loading technique used on webpages with a lot of dynamic data that allows users to batch call data when it's needed (i.e. when it's on their screen). After getting it implemented in the PokemonCard.jsx file, everything worked flawlessly! There was one small problem though, some data in the PokeAPI wasn't entirely up to date, most likely because some Pokemon were too new.
Even though Sinistcha has some art floating around, none of it is really official and it's mainly just in-game models that are used. I consulted the owner of the repo and asked how I should handle it. I proposed either leaving it or adding a default image and the owner said to add a default image for Pokemon with no image references. I added the default image and it definitely looked a lot better:
and with that, my job was done... or so I thought. Turns out, I completely forgot to fetch and pull from the main repo, and to make things worse, there were a ton of changes to it. The biggest change was a version of literal Infinite Scrolling which seemed to have completely broken the app. The way this was being handled was by constantly calling the API as you scroll down. The worst part about it was that it would constantly fling you back to the top of the page. Here's an example using my favourite Pokemon as to how it broke the search functionality:
The owner ended up asking me to remove the infinite scrolling stuff, and after getting that resolved, everything was done. The final PR can be found here.
What would I do differently?
Well, this was definitely a big step up from the previous PR but I definitely made mistakes that I have to learn from. Not keeping my fork updated, made my job way harder than it needed to be. It's definitely something that I have to keep in mind when developing an active repo and a lesson I won't soon forget.
Top comments (0)