I'm a beginner web developer and coder and just want to show this little work-in-progress Pokemon app I'm building to help me learn React and API integration

3 years ago by reric88🧩 to c/programming

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!

wraithcoop 5 points 3 years ago

Nice work so far, keep it up! Going to another page makes the whole page flash with "Loading" - think about how you can send the next request without re-rendering into that 'loading' state each time.

save

path: 0 119247, hotness: undefined, score: 5, children: 1

reric88 1 point 3 years ago

Hey! The loading state was on purpose to show the user something was happening, but I did remove it! It didn't seem to take that long

save

path: 0 119247 186361, hotness: undefined, score: 1, children: 0

UnexampledSalt 3 points 3 years ago

It looks really nice! Keep up the good work!

save

path: 0 115957, hotness: undefined, score: 3, children: 1

reric88 5 points 3 years ago

Thank you!

save

path: 0 115957 115958, hotness: undefined, score: 5, children: 0

qwacko 2 points 3 years ago

Good work, interesting to see how you have made it work with limited additional libraries (i.e. react-query, next etc...), and interesting to see how all the catches can lead to callback hell....

But good work, and keep it up.

save

path: 0 119672, hotness: undefined, score: 2, children: 0

KerPop47 2 points 3 years ago

Oooh, I love the style!

save

path: 0 117271, hotness: undefined, score: 2, children: 0

terebat 1 point 3 years ago

What API are you using? Where is the data stored? Would be easier to answer with more data on how this is setup.

save

path: 0 115392, hotness: undefined, score: 1, children: 1

reric88 3 points 3 years ago

I'm using https://pokeapi.co/api/v2/pokemon as the api. I can grab all the names but that seems very inefficient and had put a lot of load when calling it.

I'm looking at just making an array of Pokemon names to exist within the app, and search through that and then call the specific endpoint using that name.

Edit: Here is the source code https://github.com/reric88/pokemon-vite.git

Also, I don't expect anyone to help out, I really just wanted to show it to someone! But any comments, suggestions etc are greatly appreciated. I have less than 3 or 4 months experience with JavaScript

save

path: 0 115392 117547, hotness: undefined, score: 3, children: 0

kresten 0 points 3 years ago

It looks pretty nice. Though, I couldn't get the search to work on mobile

save

path: 0 118041, hotness: undefined, score: 0, children: 5

reric88 0 points 3 years ago

Thanks! It doesn't work, yet. I've commented out the pre-baked search results just so they don't clutter the interface

save

path: 0 118041 118042, hotness: undefined, score: 0, children: 4

kresten 2 points 3 years ago

Great work so far anyhow!

save

path: 0 118041 118042 118043, hotness: undefined, score: 2, children: 3

reric88 0 points 3 years ago

The search function is working now

save

path: 0 118041 118042 118043 191269, hotness: undefined, score: 0, children: 2

kresten 1 point 3 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

save

path: 0 118041 118042 118043 191269 191270, hotness: undefined, score: 1, children: 1