ReactPokemon
reric88.github.io

I am currently trying to build a search component so users can search for Pokemon (since it is currently paginated with 20 per page.) I’m having some difficulty figuring it out, but I’m making progress.

All the information is auto-populated. It’s probably an easy thing for seasoned developers, but I’m proud to have linked the card colors, types and backgrounds to their relevant Pokemon.

Edit: search function is working now! But I I need to add “toLowerCase()”… And add prefix to the type images of some types. Otherwise, it’s working decently! The search field works in real-time, so the page is a little sluggish to load. You can search by Name, ID, Type or Ability, just start typing and your results will appear.

I opted for a single search field for simplicity and to condense the page. I can add filters, but I like it this way for now.

Next I am adding a click-to-zoom on the cards, and when they fill the screen, additional info will populate the card, and even more info on the back.

Edit 2: Instead of making click to zoom, I added a drop-down menu to change sprites between all generations. Maybe now I’ll add click to zoom!

Edit 3: I added the zoom feature and made some tweaks! Added official artwork, better pagination, generation links to display all the Pokemon from a generation, and sound effects! (My fav)

  • Kresten
    2·
    2 years ago

    That’s awesome dude. I just tested it on my phone. It certainly shows the correct pokemons, and you can even search by any part of their names.

    If you need ideas for furthering the project, then I have a couple:

    • Improve performance. It’s a little sluggish (on my phone anyway)
    • Option to show entire evolution line of the pokemon you are searching for, like how pokemon go does. You could search “ivy” with it enabled and bulbasaur should also show up.
    • search by type (I would probably do it so it only shows when the full text for the type is written e.g. “grass” not already at “gras”.

    Cheers

    • reric88🧩@beehaw.orgOP
      2·
      2 years ago

      Thanks a lot for the suggestions! Yes, I agree the performance is pretty bad. The reason is because I’m calling ALL the Pokemon data at the beginning into an array. I will optimize this after I learn more!

      I’ll work on adding the evolutionary line, that’s a good idea.

      Currently, you can search by type, but it’s not by the full text of the type. I can definitely implement that. I’ll add a drop-down menu next to the search field to select search criteria to filter irrelevant results.