Overview
The Pokemon Awesome project utilizes PokeAPI GraphQL Beta for all Pokemon data and artwork sourced from PokeAPI sprites. The project is built using Next.js with TypeScript and Tailwind CSS Starter Template.
Features
- Next.js 12: Utilizes the latest version of Next.js for optimal performance.
- React 18: Built with React 18 for enhanced functionality.
- Tailwind CSS 3: Styling done using Tailwind CSS 3 for modern designs.
- Prettier, ESLint, TypeScript: Includes tools for code formatting, linting, and type-checking.
- Husky & Lint Staged: Enforces code quality on commit and prevents bad code from being committed.
- Commit Lint: Ensures commit messages follow conventional patterns.
- Github Actions, Dependabot: Implements automated checks and updates on code repositories.
- Absolute Import: Simplifies module imports using ‘@/’ prefix.
- React Icons, React Power-Ups: Ease of including icons and collection of React hooks for efficient app development.
Installation
- Install project dependencies using
yarn install. - Set up environment variables by creating a
.env.local file based on .env.example. - Prepare data by running
yarn prepare-data. - Start development server with
yarn dev. - For production deployment, use
yarn build && yarn start.
Summary
Pokemon Awesome utilizes the latest web technologies like Next.js, React 18, and Tailwind CSS 3 to create a feature-rich application for exploring Pokemon data. Users can easily install the project, maintain code quality with automated checks, and benefit from a collection of React tools for faster development.
