This project is a responsive web application that enables users to search for Pokémon using Algolia. It integrates with the PokéAPI to enrich the Pokémon data and implementing dynamic search features with filters, including a language switcher to display Pokémon names in multiple languages. It also includes an image switcher and a modal that represents each Pokémon.
The pokedex/
directory contains the Algolia indexing of the relevant PokéAPI resources. See its readme for more.
The web app is located in react-boilerplate/
directory (as forked from the original repo).
It's deployed with Vercel and can be found at: https://demo-engineers-assignement-minja-slavkovics-projects.vercel.app/
Vercel deployment relies on the dist/
subdirectory being present and it can be updated by running $ npm run build
- Algolia InstantSearch
- React
- TypeScript
- Vite
- React Spectrum
- TailwindCss
- Vercel
- Live search results page: We're using InstantSearch to dynamically display results while typing in the search bar.
- Search refinement list: The sidebar on the left contains search filters and range sliders (using Spectrum).
- Search results preview: When clicked on the individual Pokémon, a modal window pops up and displays its image and characteristics.
- Language Switcher: Allows users to switch between different languages for the application.
- This setting is preserved upon page reload, which is implemented using react local storage.
- Image Switcher: Provides users with the ability to switch between different Pokémon image sets.
- This setting is preserved upon page reload, which is implemented using react local storage.