A web application that helps Pokémon beginners easily understand type matchups and effectiveness calculations.
- Service: https://poke-match-type.site
This web service provides an intuitive way to check Pokémon type effectiveness for beginners who find the type matchup system challenging. The project focuses on external API integration and data caching using React Query.
- Framework: React 18.2 + TypeScript 5.4
- Build Tool: Vite 5.2
- Styling: Emotion (React + Styled)
- Server State: TanStack Query 5.40
- Client State: React Context API
- Storage: Local Storage for user preferences
- PokeAPI: Pokemon data and type information
poke-match-type/
├── src/
│ ├── ads/ # Advertisement components
│ ├── api/ # API integration layer
│ ├── components/ # React components
│ │ ├── commons/ # Reusable components
│ │ ├── modal/ # Modal dialogs
│ │ ├── nav/ # Navigation components
│ │ ├── quizes/ # Quiz mode components
│ │ ├── search/ # Search functionality
│ │ ├── skeleton/ # Loading skeletons
│ │ └── table/ # Type chart components
│ ├── const/ # Constants and configurations
│ ├── datas/ # Static JSON data
│ ├── hooks/ # Custom React hooks
│ │ └── queries/ # TanStack Query hooks
│ ├── models/ # TypeScript type definitions
│ ├── pages/ # Page components
│ ├── styles/ # Global styles
│ ├── utils/ # Utility functions
│ └── imgs/ # Image assets
├── public/ # Static assets
└── Configuration files
- Pokemon Search-Based Type Effectiveness
- Type Selection-Based Effectiveness
- Ability Type Support
- Terastal Type Support
- Interactive Quiz Mode
- Type Effectiveness Reference Table
- Internationalization (Korean, English, Japanese)
- Theme Support (Light/Dark mode)
This project is open source and available under the MIT License.
For detailed development process and troubleshooting stories, visit: