UmbraDex

A Fan-made Pokédex using Next.js and PokeAPI. Click here for a live version preview.

🌟 Features:

Explore a complete list of Pokémon from the Pokémon franchise.
Dedicated Page for Each Pokémon: Access individual pages for every Pokémon to view detailed information about their stats, moves, and trivia.
Filters: Easily filter Pokémon by type, generation, and name. You can combine filters to find specific Pokémon easily.
Sort: Arrange Pokémon alphabetically or numerically, with the option to choose between descending or ascending order.
Random Pokémon: Explore a randomly selected Pokémon with a single click.
Shiny Pokémon and Alternate Forms: Check out the shiny versions and various forms of each Pokémon.
Animated Random Webdoor: Experience a dynamic entry into the Pokédex with 10 animated heroes that change every time you load the page. Rumor says there are hidden secrets waiting to be unlocked by entering a famous code.

💬 About:

What is this project?

I'm a huge Pokémon fan, just like most of us '90s and early '20s kids. Upon discovering PokeAPI, an open-source Pokémon project containing a lot of Pokémon data in form of an API, I felt inspired to embark on this project. Originally, my goal was to amp up my skills in handling HTTP requests and simultaneously delve deeper into React and TypeScript. During the project development, I decided to revamp it, opting for GraphQL and Next.js to elevate it into a more robust and refined application.

🎨 Layout:

I created the base layout and did all the SVG drawings for the project on Figma.

🤖 Technologies and Tools:

Technologies:

Next.js with TypeScript
SWR
Sass
nanoid
Radix (used specifically for modals and tabs)
Recharts

Developer utilities:

ESLint
Prettier
Stylelint
Husky
Commitlint with conventional commits and lint-staged

Tools:

IconMoon (used for Pokémon types icons, as SVGs were too large for repetitive use)
Figma
RealFaviconGenerator

👨‍💻 Running Locally

You must have Git and Node) installed.

On your favorite terminal, run the following commands:

# Clone the repository
$ git clone git@github.com:LuanSergio/UmbraDex.git

# Navigate to the repository
$ cd UmbraDex

# Install dependencies
$ npm install

# Run the application locally
$ npm run dev

# Build the application for production
$ npm build

📝 License

This project is under the MIT license. Click here for more information.