Overview
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.
Features
- 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.
Installation
To run the PokéDex application locally, follow these steps:
- Clone this repository.
- Run
npm install
to install the required dependencies. - Run
npm start
to start the application. - The application will open in your web browser at
http://localhost:3000/
or any other available port.
Summary
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.