• PokeAPI - Frontend Challenge
  • 🎯 Challenge
  • 🥳 App demo
  • ✅ Features
    • App Architecture
    • App functionalities
  • 🖊️ Commit Messages
  • ⚙️ Scripts
  • 💻 Made with
  • Folder structure
  • 🚀 How to run
  • 👀 To be continued

PokeAPI - Frontend Challenge

🎯 Challenge

Create a web application witch ReactJS that allows users to search for Pokémon by name and see details about the Pokémon. The API used is called PokeAPI and the details that should be displayed here. For this project started in the Figma file to get the idea of a design.

🥳 App demo

✅ Features

App Architecture

• Create a good structured React App using Vite with TypeScript end config ESLint, Prettier, Husky and Lint Staged for code quality
• Ready for testing with Vitest and React Testing Library
• Setup Redux for state management and Redux Toolkit for better performance
• Themed application with light and dark mode using And Design and Styled Components
• Services and requests cached using Axios and React Query
• Fully responsive
• Documentation

App functionalities

• List of Pokémon
• Pagination
• Search for Pokémon by name or number
• Pokemon card with image, name and types
• Modal with Pokémon details
• Page with type of species detailed
• Deploy

🖊️ Commit Messages

This repository uses Conventional Commits to standardize the commit messages. The pattern used is:

<type>[optional scope]: <description>

The tools that help to follow this pattern are:

• Commitlint (to lint the commit messages)
• Husky (hook to run the git hooks)
• Lint Staged (to run the linters and formatters before the commit)
• Commitizen (cli to help with the commit messages)

⚙️ Scripts

This app already has some scripts configured:

• dev: run the application in development mode
• build: build the application
• preview: run the application in preview mode
• test: run the tests
• test:watch: run the tests in watch mode
• test:coverage: run the tests and generate the coverage report
• lint: run the linter
• format: run the formatter
• prepare: install the git hooks
• commit: run the commitizen to help with the commit messages

💻 Made with

Folder structure

📦
├─ .github
├─ .vscode
├─ .husky
│  ├─ commit-msg
│  └─ pre-commit
├─ public
│  ├─ assets
│  │  ├─ images
│  │  └─ svgs
├─ src
│  ├─ @types
│  ├─ assets
│  ├─ components
│  ├─ hooks
│  ├─ layout
│  ├─ main.tsx
│  ├─ pages
│  ├─ providers
│  ├─ queries
│  ├─ services
│  ├─ store
│  ├─ styles
│  ├─ tests
│  └─ utils

🚀 How to run

1. Clone the repository:

2. Install the dependencies:

   npm install

3. Run the application in development mode:

    npm run dev

👀 To be continued

• Make it responsive
• Develop unit, integration and e2e tests
• Add a favorite page to save the favorite Pokémon (local storage)