Gallera

Архив фотоколлекций на React 19: фильтр по категориям, поиск, пагинация, лайтбокс. Архитектура — Feature-Sliced Design, данные — REST API на MockAPI.

Демо: https://egorov-tech.github.io/gallera/

Десктоп	Мобильный

Что умеет

• Коллекции: обложка и три миниатюры, скелетоны на время загрузки
• Фильтр по категориям: все / море / горы / архитектура / города
• Поиск по названию без учёта регистра
• Пагинация по 3 коллекции на страницу
• Лайтбокс: полноэкранный просмотр, закрытие по Escape и клику по фону, блокировка прокрутки

Архитектура

Feature-Sliced Design: каждый слой импортирует только из слоёв ниже себя.

src/
├── app/                        точка входа, глобальные стили и токены
├── pages/main/                 главная: собирает фичи и сущности, владеет состоянием
├── features/filter-collections фильтр категорий и поиск (UI + константы категорий)
├── entities/collection/        карточка коллекции и лайтбокс
└── shared/
    ├── api/                    запрос к MockAPI
    ├── lib/                    чистые функции (фильтр по названию)
    └── ui/Pagination/          пагинация

Фичи и сущности не знают друг о друге и получают данные через пропсы — состояние (категория, страница, поиск) живёт на уровне страницы.

Решения и компромиссы

Отбрасывать устаревшие ответы. При быстром переключении категорий или страниц ответы приходят вразнобой, и медленный старый мог перезаписать свежий — пользователь видел не ту категорию. Эффект помечает запрос устаревшим в cleanup и игнорирует его результат. AbortController отменил бы и сам запрос, но при трёх коллекциях на страницу экономия трафика несущественна, а флаг проще.

Поиск на клиенте. Фильтр по названию работает по уже загруженной странице — мгновенно и без запросов на каждый символ. Цена: ищет только среди текущих трёх коллекций, для поиска по всему архиву нужен параметр поиска в API.

Переезд с Create React App на Vite. CRA объявлен устаревшим и тянул сотни транзитивных пакетов. На Vite 8 сборка идёт меньше секунды, npm audit — 0 уязвимостей, а тесты переехали на Vitest без смены синтаксиса. PropTypes удалены: React 19 их не проверяет, а сам пакет приезжал только транзитивно через ESLint-плагин.

Качество

CI на каждый push и PR: ESLint (react, react-hooks), Vitest, сборка. Тесты:

• приложение рендерит коллекции из API (сеть подменена — тесты не зависят от MockAPI);
• устаревший ответ после смены категории не перезаписывает свежий (регрессионный тест);
• поиск по названию без учёта регистра.

Запуск

npm install
npm run dev     # http://localhost:5173

Команда	Что делает
npm test	тесты (Vitest)
npm run lint	ESLint
npm run build	продакшн-сборка (VITE_BASE_PATH — базовый путь, для Pages /gallera/)

Стек

React 19 · Vite 8 · Vitest · Testing Library · Feature-Sliced Design · MockAPI