Тестовое задание 6 Apr 2023
betelgeuse - каталог покемонов, пересобранный как полевой справочник-покедекс
- React 18
- TypeScript
- Redux Toolkit
- React Router
- Ant Design
- SCSS
- Cloudflare
Каталог на React поверх публичного PokeAPI - постраничная сетка видов, поиск по имени с фильтром по типу и детальная карточка вида - пересобранный целиком. Оригинал держался на дефолтной теме Ant Design без собственной идентичности и нёс реальные дефекты под капотом: каталог вызывал хуки после раннего return и менял state во время рендера (нарушение rules-of-hooks), пагинация хранила страницу одноразовым снимком, из-за чего кнопки назад и вперёд рассинхронивались со списком, у запросов детали карточки не было ветки ошибки, поэтому упавший запрос крутился вечно, модалка обращалась к официальному артворку, который может быть null, случайные цвета на каждый рендер мерцали при любой перерисовке, а API-клиент указывал на относительный base, из-за чего запросы вне дефолтной страницы тихо падали. С них и начал. Поверх - одна авторская система: тёплая бумажная палитра OKLCH с единственным акцентом цвета покедекс-кримсон, Space Grotesk и Space Mono в паре с Inter, и 18-цветная система типов как фирменный приём - каждый тип владеет цветом, который ведёт type-чипы, свечение карточки и шапку детальной модалки, а карточки-образцы несут крупный водяной декс-номер. Поиск переделан из сломанной antd-таблицы, где колонки изображения, типа и опыта никогда не заполнялись, в цельную сетку карточек с фильтром по типу через эндпоинт type. Доступность - честный уровень: skip-ссылка, лендмарки header, main и footer, один h1 на страницу с корректным порядком заголовков, карточки как настоящие клавиатурные кнопки, подписанные контролы, видимый фокус и учёт prefers-reduced-motion для всех анимаций и scroll-reveal. Вёрстка - честный адаптив 390-1440, сетка от одной до четырёх колонок с бургер-дровером на мобиле, а в UX добавились скелетная загрузка без сдвига вёрстки, пустые состояния и ошибки с повтором, реальный текст вместо lorem-героя и кастомный фавикон. React 18 + TypeScript + Redux Toolkit + React Router + Ant Design + SCSS, статическая сборка Create React App и деплой на Cloudflare Pages.