Pokemon Awesome

August 27, 2022 · View on GitHub

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