React Pokedex

🐉 A React pokedex using Next.js

🧪  Technologies

This project was developed with the following technologies:

• React
• Next
• TypeScript
• SASS

Project Dependencies:

• radix
• axios
• nuqs
• react-select
• usehooks
• classnames
• sharp
• next
• react
• react-dom

Dev Dependencies:

• @types/node
• @types/react
• @types/react-dom
• sass
• typescript

🧑🏻‍💻  Getting Started

Clone the project and access the project folder

$ git clone https://github.com/aristofany-herderson/react-pokedex
$ cd react-pokedex

To run it, follow the steps below:

# Install dependecies
$ pnpm install

# Run the project
$ pnpm dev

Open http://localhost:3000 with your browser to see the result.

💻  Project

Resume: 🐉 A complete pokemon data for you. Including pokemon image, name, types, stats, characteristhics, evolutions and more!

❔  Why do it?

Because I like the games made by Nitendo and together we test new advanced features of the next.js

🎨  Assets

Pokemons Data: From pokeapi.co, All the Pokémon data you'll ever need in one place, easily accessible through a modern free open-source RESTful API.

Design: Inspired by the project Pokemon Pokedex Website Redesign Concept

🚀  Features

• Search Pokemons by name
• Search Pokemons by filters (type, weakness, ability, height, weight)
• View Pokemon data (image, type, is/no legendary, gender, abilities, characteristics, stats, evolution chain and more)
• Responsive aplication

🧠  Used tools

• useMemo - to memorize the state of the application, reducing part of the processing usage
• useTransition - to define the most essential part of the UI to load, allowing the component not to crash while another component renders
• useDebounce - to set a time interval for a task to run
• useIntersectionObserver - to "observe" when an element comes into view on the user's screen
• useQueryState - to maintain some application state directly in the url (URLState)

🧑🏻  Author

Aristofany Herderson

🕹️ Credits

Thanks to PokéAPI.co for data, of course to Nintendo, Game Freak, and The Pokémon Company for making such an awesome series of games.

📰 Copyright Notice

This is an unofficial, non-commercial, fan-made app and is NOT affiliated, endorsed or supported by Nintendo, Game Freak and The Pokémon Company in any way. Many images used in this app are copyrighted and are supported under fair use. Pokémon and Pokémon character names are trademarks of Nintendo. No copyright infringement intended.