Next.js Pokedex APP

A pokedex APP that is built on PokéAPI using Next.js.

Note:

Vercel does imposes some limits when using their platform.

• If you ran into any error when viewing the live demo provided below, I strongly recommend taht you build the project on your own machine.

• In the codebase, Promise.allsettled was used as a workaround for deployment error on Vercel.

Features

• SSG, SSR, route transition, Suspense.
• Search Pokemon through type, generation, id or name.
• Sort Pokemon through multiple ways.
• Support multiple languages.
• Displayed as table or cards.
• Rich information, including evolution chains, moves...
• Infinite scroll.

Tech Stack

• React
• Next.js
• TypeScript
• Material UI
• React Data Table Component
• React-i18next
• Jest
• Bootstrap

Installation

1. Clone the repo: git clone https://github.com/alveifbklsiu259/PokedexNext.git
2. Change directory: cd PokedexNext
3. Install dependencies: npm install
4. Start dev mode: npm run dev
5. Build: npm run build
6. Start production mode: npm start

Demonstration

live demo: https://pokedex-next-zeta-sand.vercel.app/en/pokemons

Image credits

https://freepngimg.com/png/37466-pokeball-image
https://en.wikipedia.org/wiki/File:Pok%C3%A9_Ball_icon.svg
License: Attribution-NonCommercial 4.0 International (CC BY-NC 4.0)