Проект представляет из себя SPA, предоставляющие информацию о видеоиграх. Информация о картах предоставляется RAWG Video Games Database API.
Предоставить пользователям возможность поиска и просмотра информацию о видеоиграх.
- 1 уровень (обязательный)
- Реализованы Требования к функциональности
- React
- Используются функциональные компоненты c хуками в приоритете над классовыми (пример)
- Есть разделение на умные и глупые компоненты (пример умного компонента, пример глупого компонента)
- Есть рендеринг списков (пример)
- Реализована хотя бы одна форма (пример)
- Есть применение Контекст API (пример)
- Есть применение предохранителя (пример)
- Есть хотя бы один кастомный хук (пример)
- Хотя бы несколько компонентов используют PropTypes (пример)
- Поиск не должен триггерить много запросов к серверу (используется debounce) (пример использования, useDebounce)
- Есть применение lazy + Suspense (пример lazy, пример Suspense)
- Redux
- 2 уровень (необязательный)
- Использование Firebase для учетных записей пользователей и их Избранного и Истории поиска
- Настроен CI/CD
- Реализована виртуализация списков (пример)
- Используются мемоизированные селекторы (пример)
- Feature Flags. Реализовать фичу “Поделиться в телеграм”, закрытую под фича флагом
- Связь UI и бизнес-логики построена не через команды, а через события (пример нэйминга экшена, пример использования события)
- Project 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
В корневой директории проекта есть директория server
, в которой находится локальный API для проекта, который возвращает параметр открывающей в приложении возможность поделится ссылкой на страницу понравившейся игры в Telegram (на карточке игры и на странице детального просмотра появляется соответствующая кнопка).
Для того чтобы воспользоваться данной возможностью скопируйте репозиторий себе и установите необходимые зависимости. Затем перейдите в своей IDE в директорию server
и установите зависимости для него. Вернитесь в корневую директорию проекта и запустите команду npm start
для запуска проекта, а в другом терминале запустите команду npm run server
. Теперь вам доступен этот функционал.
src/app
— настройки, стили и провайдеры для всего приложенияsrc/entities
— бизнес-сущностиsrc/features
— взаимодействия с пользователем, действия, которые несут бизнес-ценность для пользователяsrc/pages
— композиционный слой для сборки полноценных страниц из сущностей, фич и виджетовsrc/shared
— переиспользуемый код, не имеющий отношения к специфике приложения/бизнесаsrc/widgets
— композиционный слой для соединения сущностей и фич в самостоятельные блоки
npm start
- режим разработки с запуском локального сервераnpm run build
- режим сборки проекта в продакшнnpm run server
- запуск локального сервера для Feature flagnpm run test
- запуск в режиме тестированияnpm run eject
- режим извлечения конфигов CRAnpm 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
- Семантическая вёрстка
- Методологии
Данила Легкобытов
- e-mail: legkobytov-danila@yandex.ru
- LinkedIn: in/danila-legkobytov
- Telegram: @danila_legkobytov
- Frontend Mentor: @danila_legkobytov