screenshot of Pokedex


A simple Pokémon catalogue, built with React, Material-UI and PokéAPI.


PokéDex is a simple Pokémon catalogue built using React, Material-UI, and the PokéAPI. It allows users to view basic details of each Pokémon, filter Pokémon based on region and type, sort Pokémon by ID or name, search for Pokémon by their name or ID, and toggle between light and dark mode. The application also includes features such as lazy loading of images, responsive design, and a scroll-to-top function.


  • View basic details of each Pokémon: Users can easily access and view information about each Pokémon, such as its name, image, and type.
  • Filter Pokémon based on Region and Type: Users can filter the Pokémon catalogue based on their preferred region or type, allowing for easy categorization and organization.
  • Sort Pokémon by ID/Name: Users have the option to sort the Pokémon catalogue either by their ID or name, making it easier to find specific Pokémon.
  • Search Pokémon by Name/ID: Users can search for Pokémon either by their name or ID, providing a quick and efficient way to find specific Pokémon.
  • Dark mode toggle: The application offers a dark mode option to improve visibility and customization for users.
  • Scroll to top: Users can easily navigate back to the top of the Pokémon catalogue with a scroll-to-top function, providing a seamless user experience.
  • Lazy loading of images: The application loads Pokémon images lazily, improving performance by only loading images when the user scrolls to them.
  • Responsive design: The layout of the application adapts to different screen sizes, ensuring a consistent user experience across devices.


To run the PokéDex application locally, follow these steps:

  1. Clone this repository.
  2. Run npm install to install the required dependencies.
  3. Run npm start to start the application.
  4. The application will open in your web browser at http://localhost:3000/ or any other available port.


PokéDex is a React-based Pokémon catalogue built using Material-UI and the PokéAPI. It offers a range of features, including the ability to view basic Pokémon details, filter and sort Pokémon, search by name or ID, switch between light and dark mode, scroll to the top, and experience lazy loading and responsive design. The application can be easily installed and run locally by following a few simple steps. Contributions, issues, and feature requests are welcome, and users can show their support by starring the repository.


React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components


SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

Material UI

material-ui adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.

Framer Motion

Alpine.js is a lightweight JavaScript framework that simplifies the process of creating dynamic, reactive user interfaces on the web. It uses a declarative syntax that offers a higher level of abstraction compared to vanilla JavaScript, while being more performant and easier to use than jQuery.