pokemon-world icon indicating copy to clipboard operation
pokemon-world copied to clipboard

The official pokemon website is not that cool? Here is the alternative ๐Ÿ˜‰

Pokemon Awesome

Pokemon Awesome thumbnail

Pokemon Data

All Pokemon data used in this project comes from PokeAPI GraphQL Beta.
Playground: https://beta.pokeapi.co/graphql/console/

All Pokemon images (artwork) comes from https://github.com/PokeAPI/sprites

Getting Started

  1. Install dependencies using yarn install.
  2. Prepare environment variables (.env.local), refer to .env.example file.
  3. Prepare data using yarn prepare-data.
  4. Run development server using yarn dev.

For production, use this script: yarn build && yarn start

Quality Check

  • Prettier check: yarn format
  • ESLint check: yarn lint
  • TypeScript check: yarn lint:types
  • End-to-end test check: yarn test:e2e

Misc.

This project is using Next.js [TypeScript] + Tailwind CSS Starter Template.
The starter template contains:

  • โšก๏ธ Next.js 12
  • โš›๏ธ React 18
  • ๐ŸŽ Tailwind CSS 3
  • ๐Ÿช„ Prettier โ€” Format your code automatically, this will also run on save
  • ๐Ÿงผ ESLint โ€” Find & fix problems in your code, and auto sort your imports
  • ๐Ÿถ Husky & Lint Staged โ€” Check & fix code when commit, block commit if bad code detected
  • ๐Ÿ“œ Commit Lint โ€” Make sure the commit message follows the conventional commit
  • โš™๏ธ Github Actions โ€” Check your code on push & pull-request
  • ๐Ÿค– Dependabot โ€” Create pull-request to update your dependencies
  • ๐Ÿ”— Absolute Import โ€” Import modules using @/ prefix
  • ๐Ÿ’Ÿ React Icons โ€” Include popular icons in your React projects easily
  • ๐ŸŒŸ React Power-Ups โ€” Collection of React hooks to speed-up your app development