Тестовое задание для Stroy.Sale

Демо: https://stroy.ptash.now.sh/

Используйте любое имя и пароль для логина.
Просмотр данных доступен только для авторизованных пользователей.
Удалите данные в localStorage, чтобы выйти из авторизованного режима.

Используемые технологии/библиотеки в соответствии с техническим заданием:

• TypeScript
• ReactJS
• Redux
• Redux Saga
• Styled-components
• Material-UI

Дополнительно были использованы следующие библиотеки:

• react-responsive
• react-router-dom
• React Table v6

Внимание: В React Table v6 имеется баг (Custom Cell components cause whole table to re-render #1118), приводящий к перерисовке всех ячеек, где используются кастом Cell. В данном проекте это столбец с картинками материалов и столбец с кнопкой удаления и добавления строки таблицы.

Тестовое задание

Используемые технологии/библиотеки:

• TypeScript
• ReactJS
• Redux
• Redux Saga
• Styled-components
• MaterialUI: https://material-ui.com/

Рекомендуется использовать именно этот стек, т.к. это даст нам понимание, как вы справляйтесь с вопросами ресерча, исследования новых технологий и их применения.

Макет: https://www.figma.com/file/9Yq0XcHfZXEGCejbkj0fTJ/%D0%A2%D0%B5%D1%81%D1%82%D0%BE%D0%B2%D0%BE%D0%B5_%D0%B7%D0%B0%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B4%D0%BB%D1%8F_frontend_%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%B0?node-id=0%3A23

Задания:

1. Используя библиотеку MaterialUI реализовать верстку страницы «Тестовое №1» и логику авторизации приложения. Фронт делает запрос c данными из формы на бекенд (бекенда у нас нет, поэтому имитируем запрос и возвращаем мок), бекенд возвращает ответ в виде {jwt: ‘86fasfgfsogHGad’}. JWT токен должен будет храниться в localStorage. При наличии токена в localStorage приложение должно редиректиться на страницу «Тестовое №2».
2. Без библиотеки MaterialUI реализовать верстку страницы «Тестовое №2». Данные должны тянуться из стора приложения.

Подсказки:

• Макеты содержат в себе UXовые ошибки и недоработки. Если в ходе решение задания вы нам о них сообщите, предложите решение, зададите вопрос нашему дизайнеру, для вас это будет плюс. Данный пункт неактуален на финальном этапе проверки тестового задания (см. последний пункт).
• Постарайтесь максимально изолировать бизнесовую логику от вью приложения.
• Все преобразования данных выполните вне реактовской компоненты.
• Все утилзы и хелперы выносите в отдельные модули.
• Данное тестовое задание позволит нам понять ваши навыки в разработке, а также уровень вашей коммуникативности и коммуникабельности.