Test project 6 Apr 2023
betelgeuse - a pokemon catalogue rebuilt as a pokedex field guide
- React 18
- TypeScript
- Redux Toolkit
- React Router
- Ant Design
- SCSS
- Cloudflare
A React catalogue over the public PokeAPI - a paginated species grid, a name search with a type filter, and a per-entry detail view - rebuilt end to end. The original leaned on the default Ant Design theme with no identity of its own and carried real defects underneath: the catalogue called hooks after an early return and set state during render (a rules-of-hooks violation), pagination kept the page in a one-shot snapshot so browser back and forward desynced from the list, card detail fetches had no error path so a failed request spun forever, the modal dereferenced official artwork that can be null, per-render random colours flickered on every paint, and the API client pointed at a relative base so requests off the default page silently failed. Those went first. On top sits one bespoke system: a warm-paper OKLCH palette with a single Pokedex-crimson accent, Space Grotesk and Space Mono paired with Inter, and an 18-type colour system as the signature - every type owns a colour that drives the type chips, the per-card glow and the detail modal header, with specimen cards carrying an oversized dex-number watermark. The search was reworked from a broken antd table, whose image, type and experience columns never populated, into a cohesive card grid with a type filter resolved through the type endpoint. Accessibility is a real floor: a skip link, header, main and footer landmarks, one h1 per page with a correct heading order, cards as real keyboard-operable buttons, labelled controls, a focus-visible ring and a reduced-motion guard over every animation and the scroll reveals. The layout is a genuine 390-to-1440 responsive pass, a one-to-four-column grid with a hamburger drawer on mobile, and the UX gained skeleton loading with no layout shift, empty and error states with retry, real copy in place of the lorem hero, and a custom favicon. React 18 + TypeScript + Redux Toolkit + React Router + Ant Design + SCSS, statically built with Create React App and deployed on Cloudflare Pages.