Pokémon Type Effectiveness Calculator
A web application that helps Pokémon beginners easily understand type matchups and effectiveness calculations.
- Service: https://poke-match-type.site
Overview
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.
Tech Stack
Core Technologies
- 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 & quiz stamps, Session Storage for quiz sessions
External APIs
- PokeAPI: Pokemon data and type information
Project Structure
poke-match-type/
├── src/
│ ├── ads/ # Advertisement components
│ ├── api/ # API integration layer
│ ├── components/ # React components
│ │ ├── commons/ # Reusable components
│ │ ├── modal/ # Modal dialogs
│ │ ├── nav/ # Navigation components
│ │ ├── quiz/ # Quiz gameplay components
│ │ ├── quizHome/ # Quiz dashboard & selection
│ │ ├── 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
│ │ └── quiz/ # Quiz flow pages (intro, play, result)
│ ├── styles/ # Global styles
│ ├── utils/ # Utility functions
│ └── imgs/ # Image assets
├── public/ # Static assets
└── Configuration files
Features
- Pokemon Search-Based Type Effectiveness
- Type Selection-Based Effectiveness
- Ability Type Support
- Terastal Type Support
- Interactive Quiz Mode (4 types, stamp card, ranking)
- Type Effectiveness Reference Table
- Internationalization (Korean, English)
- Theme Support (Light/Dark mode)
License
This project is open source and available under the MIT License.
blog
For detailed development process and troubleshooting stories, visit: