Interactive web app
Poke-Pro
Interactive Pokédex with search, compare, and text-to-speech.
- React 18
- TypeScript
- Vite
- Redux Toolkit
- AWS Polly
Overview
Poke-Pro is a client-side Pokédex aimed at fast exploration of a large dataset. The focus is responsive UX, predictable state, and a polished compare flow rather than backend complexity.
Problem
Pokémon data is relational (types, stats, evolutions) and users expect instant feedback when typing. Off-the-shelf demos often skip autocomplete, accessibility, or a sane state model when features like “compare two Pokémon” are added.
Solution
A single-page app with normalized Redux state, debounced search with keyboard-friendly suggestions, a dedicated compare surface, and optional speech via AWS Polly for names and descriptions.
Architecture
React function components with feature-oriented slices in Redux Toolkit. Data is fetched from a public API and cached in the store; derived views (filters, compare) are selectors to avoid duplicated logic. Vite keeps iteration fast and bundles lean.
Key decisions
Redux Toolkit over ad hoc context to keep async flows and compare selection reproducible. Autocomplete is debounced and capped to limit API churn. Polly is isolated behind a thin client adapter so voices and errors do not leak across the UI.
Challenges
Balancing perceived performance with API limits, handling inconsistent or missing fields from upstream data, and keeping compare mode understandable on small screens.
Outcome
A deployable showcase of frontend architecture, state design, and third-party integration suitable for hiring conversations about product-quality SPA work.