Используя стороннее API в качестве источника данных (например: Star Wars API https://swapi.dev/), реализовать SPA приложение React и Typescript, состоящее из двух страниц. На главной странице отобразить список или карточки персонажей, к списку добавить возможность пагинации. На главной странице должен быть реализован поиск или фильтрация персонажей (в зависимости от выбранного API). Реализовать страницу с подробной информацией по выбранному персонажу.
Плюсы:
- Аккуратная верстка
- Использование UI фреймворка (Material, Ant, Bootstrap и т.п.)
Также важно выполнить:
- Для работы с данными использовать хранилище Redux
- Редактировать информацию о персонаже локально, без отправки на сервер
- Тесты
Приветствую!
Для выполнения задачи использовал последние версии TypeScript, React, React Router, Redux через Toolkit с Query, для стилзации CSS Modules. Проект "приправлен" Webpack'ом и ESLint'ом.
В качестве API решил взять SpaceX API, а для UI взял AntDesign.
RTK Query использовал впервые, но весьма понравилось, до этого использовал свои решения на Axios или SWR для Next.
Демо задеплоил на GH Pages.
Постарался создать удобную файловую структуру.
В /api находится конфигурация API слайса и типы, описывающие запросы/ответы.
В /core находятся глобальные компоненты и слайс, там же настроен и роутинг.
В /features находятся отдельные фичи, например страницы списка "запусков" и страница "запуска".
В /store глобальные сущности Redux'а.
Часто применяю code-splitting, например роуты грузятся "лениво" и обернуты в ErrorBoundary и Suspense. Сделал обработку состояний, error, loading, nodata. Использовал семантические теги. Разбиваю код на небольшие компоненты.
Для тестов в проекте решил сделать только e2e тесты через cypress, на другие оставалось не так много времени. Но так же был опыт unit тестов на jest, компонентных тестов и тестов для стора Redux.
Статика, бандлы и чанки собраны и минифицированы через Webpack.