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.
- React
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
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.