Point of Games

Проект представляет из себя SPA, предоставляющие информацию о видеоиграх. Информация о картах предоставляется RAWG Video Games Database API.

Оглавление

• Обзор проекта
  • Задачи проекта
    • Требования к проекту
  • Функциональность проекта
    • Использование Console API
    • Feature flag
  • Screenshot
  • Директории проекта
  • Запуск проекта
  • Ссылки
• Ход выполнения проекта
  • Используемые технологии и методологии
• Автор

Обзор проекта

Задачи проекта

Предоставить пользователям возможность поиска и просмотра информацию о видеоиграх.

Требования к проекту

• 1 уровень (обязательный)
  • Реализованы Требования к функциональности
  • React
    • Используются функциональные компоненты c хуками в приоритете над классовыми (пример)
    • Есть разделение на умные и глупые компоненты (пример умного компонента, пример глупого компонента)
    • Есть рендеринг списков (пример)
    • Реализована хотя бы одна форма (пример)
    • Есть применение Контекст API (пример)
    • Есть применение предохранителя (пример)
    • Есть хотя бы один кастомный хук (пример)
    • Хотя бы несколько компонентов используют PropTypes (пример)
    • Поиск не должен триггерить много запросов к серверу (используется debounce) (пример использования, useDebounce)
    • Есть применение lazy + Suspense (пример lazy, пример Suspense)
  • Redux
    • Используем Modern Redux with Redux Toolkit
    • Используем слайсы (пример)
    • Есть хотя бы одна кастомная мидлвара (пример)
    • Используется RTK Query (пример)
    • Используется Transforming Responses (пример)
• 2 уровень (необязательный)
  • Использование Firebase для учетных записей пользователей и их Избранного и Истории поиска
  • Настроен CI/CD
  • Реализована виртуализация списков (пример)
  • Используются мемоизированные селекторы (пример)
  • Feature Flags. Реализовать фичу “Поделиться в телеграм”, закрытую под фича флагом
  • Связь UI и бизнес-логики построена не через команды, а через события (пример нэйминга экшена, пример использования события)
  • Project Console API (фича)

Функциональность проекта

В проекте имеется возможность авторизации и регистрации пользователя. Поиска игр по названию с показом саджестов. История поиска сохраняется, пользователь имеет возможность просмотреть её е перейти к ранее выпоенному запросу, либо удалить его. Сохранение понравившихся игр в избранное и просмотр списка избранных игр с возможностью их удаления из списка. По игре можно посмотреть детальную информацию.

Использование Console API

В проекте имеется возможность управлять приложением не используя UI. Откройте консоль браузера, вы увидите приветствие и пояснения как использовать Console API. Список доступных команд:

point('/help'); // показывает список доступных команд
point('/signin [email] [password]'); // авторизация пользователя
point('/signup [email] [password]'); // регистрация пользователя
point('/logout'); // выход из аккаунта
point('/search [query]'); // поиск игры по названию
point('/showHistory'); // показывает историю поиска
point('/showFavorites'); // показывает список избранных игр
point('/addFavorite [id]'); // добавляет игру в избранное по ID
point('/removeFavorite [id]'); // удаляет игру из избранного по ID
point('/getGame [id]'); // получает игру по ID

Feature flag

В корневой директории проекта есть директория server, в которой находится локальный API для проекта, который возвращает параметр открывающей в приложении возможность поделится ссылкой на страницу понравившейся игры в Telegram (на карточке игры и на странице детального просмотра появляется соответствующая кнопка).

Для того чтобы воспользоваться данной возможностью скопируйте репозиторий себе и установите необходимые зависимости. Затем перейдите в своей IDE в директорию server и установите зависимости для него. Вернитесь в корневую директорию проекта и запустите команду npm start для запуска проекта, а в другом терминале запустите команду npm run server. Теперь вам доступен этот функционал.

Screenshot

Директории проекта

• src/app — настройки, стили и провайдеры для всего приложения
• src/entities — бизнес-сущности
• src/features — взаимодействия с пользователем, действия, которые несут бизнес-ценность для пользователя
• src/pages — композиционный слой для сборки полноценных страниц из сущностей, фич и виджетов
• src/shared — переиспользуемый код, не имеющий отношения к специфике приложения/бизнеса
• src/widgets — композиционный слой для соединения сущностей и фич в самостоятельные блоки

Запуск проекта

• npm start - режим разработки с запуском локального сервера
• npm run build - режим сборки проекта в продакшн
• npm run server - запуск локального сервера для Feature flag
• npm run test - запуск в режиме тестирования
• npm run eject - режим извлечения конфигов CRA
• npm run lint - запускает линтер
• npm run lint:fix - запускает линтер, в режиме устранения мелких замечаний
• npm run format - запуск форматера кода
• npm run prepare - подготавливает Husky к работе, запускается единожды при старте проекта
• npm run commit - запускает commitizen для коммита
• npm run storybook - запускает Storybook в режиме разработки
• npm run build-storybook - запускает Storybook в режиме продакшн

Ссылки

• Ссылка на демо-страницу проекта

Ход выполнения проекта

Используемые технологии и методологии

• Технологии
  • HTML
  • SCSS
  • CSS Modules
  • JS
  • React
  • React Router
  • Redux Toolkit
  • RTK Query
  • Firebase
  • React Hook Form
  • React error boundary
  • React virtualized
  • Yup
  • Storybook
  • Семантическая вёрстка
• Методологии
  • Feature-Sliced Design

Автор

Данила Легкобытов

• e-mail: legkobytov-danila@yandex.ru
• LinkedIn: in/danila-legkobytov
• Telegram: @danila_legkobytov
• Frontend Mentor: @danila_legkobytov