theshiveshnetwork/pokedex

A web app to display pokemons using the pokeapi.

Hi there 👋

I am Shivesh a dedicated and enthusiastic Full Stack Developer with a lifelong passion for coding. My journey into the world of programming began when I was just 11 years old, tinkering with Visual Basic and realizing the incredible power of bringing ideas to life through code. Since then, I've embarked on an exciting learning adventure, exploring languages like Python, Java, and JavaScript, honing my skills to create immersive digital experiences.

Little about me:

• I'm based in India
• I'm learning different languages and frameworks

🛠️ Languages and Tools

Here are a few languages and tools that I use:

                                     

🏅 Badges

🏆 Trophies

🔥 My Stats

pokedex's Issues

Improve the pokemon search

What does this issue mean?

Currently the search works on only the rendered pokemon cards. It should search in the whole pokemon response.

Steps to fix the issue

• Use the pokeapi to get all the pokemons and filter for the searched keyword in pokemon name
• Display the filtered pokemon cards
• Optimize the code. It should not have multiple api calls that slow down the app.

How to contribute

If you are interested, reply below and I'll assign this to you.

• Create a PR
• Submit and wait for response
• If the PR is reviewed, it wil be merged

Happy Hacking !!!

Height and Weight for each pokemon are incorrect units

The API documentation shows that the height number returned is in decimeters and the weight is in hectograms. Not sure which metric you would prefer to show but may need a calculation to convert those numbers to m and kg if you would like to use those still.

(I'm new to open source but saw this and figured I would open an issue. Let me know if I did this wrong!)

Add loader when image is loading

What does this issue mean?

On page load, the images take some time while loading. The fix must add a loader or may be a skeleton that matches the app theme to display while the image is loading.

Steps to fix the issue

• Create a custom loader / skeleton
• Define a hook to check if image is loading
• If the image is loading, then display the loader or skeleton

How to contribute

If you are interested, reply below and I'll assign this to you.

• Create a PR
• Submit and wait for response
• If the PR is reviewed, it wil be merged

Happy Hacking !!!

Improve the pokemon card UI

What does this issue mean?

The pokemon cards need Improvement in style.

Steps to fix the issue

• A better style will be considered

How to contribute

If you are interested, reply below and I'll assign this to you.

• Create a PR
• Submit and wait for response
• If the PR is reviewed, it wil be merged

Happy Hacking !!!

add dark mode (my eyes hurt)

Advanced Search

I thought of some new additions to the search feature. I think it would be really neat if users would be able to "filter" based on various conditions. My first thought is by generation, i.e. a user can look at only gen 5 pokemon or maybe only gen 2 pokemon. I'll definitely look into what other possibilities could be done with filtering but as for now, this is the base functionality for advanced search I want to add.

Let me know what you think @TheShiveshNetwork and please assign me to this issue if you approve. Thanks!

Add infinite scrolling on homepage

Context

On the homepage, there are only 20 Pokemon cards.

Expected behavior

The API should fetch and display more data as we scroll

Change the title form "Vite + React" to "Pokedex"

@TheShiveshNetwork
I kindly request that you assign this issue to me under Hacktoberfest

Optimize the filters

Optimize the filters.

Add infinite scroll to the app

What does this issue mean?

The page currently has only a few number of Pokemons. Add an infinite scroll so that when user scrolls down the page, knew pokemons starting showing up.

Steps to fix the issue

• Use the pokeapi (firstly it fetches 25 pokemons, after scroll it should fetch 50)
• When user scrolls down the page, fetch the further pokemon data
• Render the new fetched data

Any better approach can also be considered.

How to contribute

If you are interested, reply below and I'll assign this to you.

• Create a PR
• Submit and wait for response
• If the PR is reviewed, it wil be merged

Happy Hacking !!!