Ссылка на задание: https://gist.github.com/nonamenix/fc7609de3ebe2642db6324bc962295b2
Веб страница, на которой можно посмотреть все корабли игры «Мир Кораблей» с возможностью сортировки, поиска и фильтрации.
- На главной странице можно выбрать категорию кораблей для начала просмотра.
- Отдельно можно задать фильтры по различным параметрам корабля - нации, типу и классу.
- Также доступе текстовый поиск по названию корабля.
- Выбранные корабли можно дополнительно отсортировать по влзврастанию или убыванию по соответствующему параметру.
Каталог выбранных кораблей можно посмотреть в двух режимах - в виде таблицы или в виде сетки с карточками кораблей.
Чтобы получить подробное описание нужного корабля, нужно кликнуть по карточке или строку таблицы.
- React - реактивный фреймворк, основа проекта
- Apollo Client - библиотека для работы с GraphQL-запросами
- Redux Toolkit - менеджер состояния
- React Icons - библиотека иконок
- Vite - инструментарий автоматизации рабочих процессов внутри проекта
- Typescript - типизированный JavaScript
- Оптимизация
Можно реализовать ленивую загрузку / отображение по страницам или добавить виртуализацию. Но в текущем виде сетевым запросом можно получить только данные сразу по всем кораблям и поэтому полезность ленивой загрузки уже полученных данных небольшая. Текущее количество данных не нагружает страницу радикально, при этом в большинстве сценариев использования отображаются только отфильтрованная часть данных.
- Адаптив
Улучшить адаптивный дизайн для небольших экранов. В текущем виде страница доступна для мобильных устройств, но остаются шероховатости. Не помешало бы добавить использование медиа-запросов.
- Смена темы оформления
В проекте использована стандартная тёмная минималистская тема шаблона Vite для Vue. Можно добавить переключение на светлую тему.
- Сменая языка
В запросе можно указать язык контента, поэтому возможно реализовать смену языка.
npm installnpm run dev