Тестовое задание для позиции React JS разработчик (frontend software engineer)
Веб-приложение "интернет-магазин"
Требования к функционалу
Приложение должно состоять из двух страниц: списка товаров и корзины.
В шапке должна отображаться ссылка на страницу "Корзина" со счетчиком количества заказанных товаров.
Товар в списке должен включать изображение, заголовок, стоимость и возможность множественного добавления товара в корзину.
На странице "Корзина" должен отображаться список добавленных товаров и их суммарная стоимость. Должна быть реализована возможность удалить товары из корзины (по одному или все сразу), а также возможность изменить количество заказанных наименований товара.
Все действия должны происходить без перезагрузки страницы.
После перезагрузки страницы состояние приложения и содержимое корзины должно быть восстановлено.
Приложение должно следовать требованиям юзабилити, должна быть предусмотрена адаптация под разные размеры экрана.
Инициализация приложения
Должна иметься возможность в коде инициализации приложения указать список идентификаторов дилеров, товары которых будут подгружаться в интернет-магазин. Если список дилеров не указан, должны подгружаться товары всех дилеров.
Приложение должно инициализироваться по требованию "внешнего" кода:
<html>
<head>
<script src="/path/to/app.js"></script>
<link href="/path/to/app.css">
</head>
<body>
<div id="app-root"></div>
<script>
document.addEventListener('DOMContentLoaded', () => {
var app = new window.App();
if (app && app.start) {
app.start({ dealers: ['id1', 'id2'] });
}
});
</script>
</body>
</html>Стек технологий
- React
- Redux (Redux Toolkit, RTK Query)
- TypeScript
- ESLint
- Webpack
- Ant Design
Представление приложения
Приложение должно быть представлено в виде ссылки на git репозиторий, а также общедоступной ссылки для просмотра работающего приложения или Docker контейнера.
Описание API
Получить список товаров всех дилеров
GET https://test-frontend.dev.int.perx.ru/api/goods/
Пример ответа:
[
{
"name": "Python",
"price": 5.35,
"image": "/logo/python.png"
},
{
"name": "Go",
"price": 7.55,
"image": "/logo/go.png"
},
{
"name": "Node.js",
"price": 9.99,
"image": "/logo/node.png"
}
]Получить список товаров определённых дилеров
GET https://test-frontend.dev.int.perx.ru/api/goods/?dealers=0c4aab30,86e64a33
Пример ответа:
[
{
"name": "Python",
"price": 5.35,
"image": "/logo/python.png"
},
{
"name": "Go",
"price": 7.55,
"image": "/logo/go.png"
}
]Получить список идентификаторов дилеров
GET https://test-frontend.dev.int.perx.ru/api/dealers/
Пример ответа:
[
"0c4aab30",
"1efa7e46",
"86e64a33"
]Изображение товара
GET https://test-frontend.dev.int.perx.ru/logo/node.png
