Modern Pokédex

This is a Pokédex web app used to quickly explore and discover Pokémon with their abilities, stats, and other detailed information. It's written in TypeScript and built using the React framework Next.js, and styled with Tailwind CSS. This app pulls data from the PokéAPI (a RESTful API for Pokémon info).

This app has been deployed to Vercel and you can access its live demo here, or its repository here.

The user can search and choose a Pokémon from the homepage:

On the Pokémon info page, the user can view various details and use the left/right arrows to navigate to the previous/next Pokémon:

The Stats Chart tab contains an interactive bar chart that dynamically updates based on the Pokémon ability that the user selects:

There're also other extra features, such as when the user hovers on a Pokémon type on the info page, it will display its strengths and weaknesses:

The app is optimized with lazy loading and has fallback skeletons for anything that needs to be loaded from the API, for example:

And it also handles errors in case the API fails:

Again, feel free to check out the live demo.