Pokedex

Prerequisites

• node.js
• pnpm

Getting Started

    # Clone the repository
    git clone https://github.com/benqsz/pokedex.git

    # Navigate to the project directory
    cd pokedex

    # Install dependencies
    pnpm install

    # Start the development server
    pnpm dev

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

Architecture

This project shows a list of pokemons using data from the PokéAPI.

Functionalities

1. Home page
   • Displays list of Pokémons
   • A search bar allows users to filter Pokémons by name
   • Pagination
   • Option to adjust the number of Pokémon displayed per page
   • Each pokemon card shows pokemon name, image and id with link to details page
2. Pokemon details page
   • Displays detailed information about the selected pokemon

Technologies

• Next.js
• TypeScript
• Tailwind CSS
• Pokenode-ts - node.js wrapper for the PokéAPI with built-in types.

Requirements

• Display 12 Pokémon on the home page with pagination
• Show Pokémon name and image on the card
• Pokémon cards link to their respective details page
• Search bar to filter pokemons by name
• Show a loading skeleton for the Pokémon list
• Fully responsive design
• Public API using Next.js route handlers communicating with PokéAPI via Pokenode-ts
• Custom UI components using the ShadCN UI library
• TypeScript integration

Additional features

• Dark mode
• Automatically generated sitemap.xml and robots.txt
• SEO optimizations, including metadata and Open Graph image using vercel/og
• Possibility to display more pokemons on home page
• Custom 404 page

Metrics

You can view the full Lighthouse reports here:

• Home page report
• Pokemon page report

License

MIT