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.
this post was submitted on 13 Jun 2023
27 points (100.0% liked)
Programming
13376 readers
1 users here now
All things programming and coding related. Subcommunity of Technology.
This community's icon was made by Aaron Schneider, under the CC-BY-NC-SA 4.0 license.
founded 2 years ago
MODERATORS
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
It looks really nice! Keep up the good work!
Thank you!
Oooh, I love the style!
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.
Pretty good work. And I know this part doesn't have much to do with programming but I just love that the items are presented kinda like they were Pokémon cards.
Thanks! I put it here because there wasn't a coding space to put it. But I've updated the link, the other one was a little old. Now the Pokemon make sounds! (Their recent cries, not the older ones.)
What API are you using? Where is the data stored? Would be easier to answer with more data on how this is setup.
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
It looks pretty nice. Though, I couldn't get the search to work on mobile
Thanks! It doesn't work, yet. I've commented out the pre-baked search results just so they don't clutter the interface
Great work so far anyhow!
The search function is working now
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
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.
Sounds like a plan!