Проект Hero Academy

Представляет собой веб-приложение для вербовки различных героев. Вдохновлено видеоигрой "Endless Space 2" от Amplitude Studios.

Описание

В приложении реализован следующий функционал:

• загрузка данных о героях с удалённого сервера
• сортировка героев по следующим параметрам: их показателю влияния и принадлежности к той или иной фракции, в алфавитном порядке, по стоимости
• поиск героев по ключевым словам (запросы отложены с помощью debounce)
• возможность выбирать различные варианты опций при вербовке героя, такие как его уровень и должность
• отображение количества героев в корзине и их общей стоимости
• реализована страница с расширенной корзиной, где можно посмотреть выбранных героев и увеличить/уменьшить их количество, полностью удалить из корзины, очистить всю корзину
• при попытке перейти на несуществующий адрес будет отображена соответствующая страница
• при клике на героя открывается отдельная страница с подробной информацией о нём

Технологии:

1. Адаптивная вёрсткая
2. Использование препроцессора Sass/SCSS
3. Использование методологии БЭМ
4. Приложение было собрано с помощью CRA (Create React App)
5. Был использован компонентный подход с использованием технологий React
6. Использован React Content Loader для создания скелетонов карточек с героями (заглушка для ожидания ответа от сервера с данными о картах)
7. Для маршрутизации была использована библиотека React Router
8. Логика состояний фильтрации (типа сортировки, выбранной фракции, ключевых слов) и логика корзины (добавление/удаление героев, увеличение/уменьшение числа уже выбранных героев, полная очистка корзины) реализованы с помощью стейт-менеджера Redux Toolkit
9. Все данные о героях хранятся на удалённом ресурсе mockAPI (https://645d3679e01ac610589fc7ea.mockapi.io/heroes)
10. Код типизирован при помощи TypeScript

Статус разработки:

Был разработан основной функционал приложения

Планы для доработки:

• работа с localStorage (сохранение выбранных героев пользователем)
• доработка страницы с подробной информацией о герое
• стилизация роута несуществующей страницы

Инструкция по развёртыванию:

1. Клонируйте данный репозиторий локально на своё устройство
2. Установите зависимости при помощи команды npm i
3. Запустите проект с помощью команды npm run start

Ссылки

Демо: https://stankena.github.io/hero-academy