Ngopimas / pokedex

Pokedex

Pokedex

Introduction

This Pokedex is a responsive web application that enables users to search for Pokémon using Algolia, including a language switcher to display Pokémon names in multiple languages and dynamic search features with filters.

Stack

• Algolia -> Doc
• React -> Doc
• Tailwindcss -> Doc
• Typescript -> Doc
• Vite -> Doc

Node Version

Used Node.js 20.12.2 for this project.

Project

You can first clone the project:

git clone [e-mail]:Ngopimas/pokedex.git

Setup

Make sure to install the dependencies:

# yarn
yarn install

# npm
npm install

# pnpm
pnpm install

Environment Variables

Create a .env file in the root of the project and add the following environment variables:

VITE_ALGOLIA_INDEX_NAME=
VITE_ALGOLIA_APP_ID=
VITE_ALGOLIA_SEARCH_API_KEY=
ALGOLIA_ADMIN_API_KEY=

Data

You might want to enrich your initial data with the script provided in the scripts folder. This script will fetch the data from the PokeAPI and update your Algolia index.

Development Server

Start the development server on http://localhost:5173

npm run dev

Production

Build the application for production:

npm run build

Locally preview production build:

npm run preview

Bonus

The search bar displays your recent searches, like on YouTube or Google. To submit a search, make sure to press Enter on the query. Once you do, you’ll see it appear as a recent search.

Credits

• Initial data enriched with PokeAPI
• Design inspired by this dribbble from Saepul Nahwan and Damien Toscano.

License

This Pokedex is open-source software licensed under the MIT license