alexeyshalikwork / coffee

Задача: построить бесконечно расширяемую ленту карточек с сортами кофе по примеру в конце документа. Это творческое задание, точное соответствие предложенному в примере макету не обязательно. Источники данных: ● Сорта кофе: https://random-data-api.com/api/coffee/random_coffee ● Картинки: https://loremflickr.com/500/500/coffee%20bean Требования: ● Изначально выводится одна карточка ● В конце списка есть кнопка добавления еще одной карточки, по клику на которую - загружаются данные и выводится еще одна карточка ● Карточки загружаются на стороне клиента ● Должны выводиться все поля, кроме id и uid ● Поле notes выводится как набор тегов/лейблов ● Если теги notes не влезают в карточку по ширине, они должны скроллитьсяпо горизонтали ● Картинка для карточки должна подгружаться асинхронно. Пока она не загружена, должен показываться плейсхолдер ● Отображение и логика должны быть одинаково работоспособными как на обычных, так и touch-устройствах ● Каждые 30 секунд, если не было действия со стороны пользователя, подгружается еще одна карточка ● Пока карточка не загружена, загрузить новую нельзя Ограничения: ● ● ● ● Целевой браузер Latest Chrome Разрешается использование сборщиков при необходимости Карточки стилей должны быть описаны, а не заимствованы Допускается подключение reset-стилей и webfonts Что будет учитываться при оценке: ● Нужно уложиться в стек проекта Webpack + Svelte + Typescript + LESS ● Корректность работы и соответствие требованиям задачи ● UX - качество отображения, спецэффекты, производительность ● Любые улучшения, не описанные в требованиях, но сделанные соискателем для улучшения UX ● Чистота и качество кода ● Время выполнения задачи - мы ожидаем, что суммарно на нее уйдет не более 4-х чистых рабочих часов и до 3-х календарных дней ● Количество заимствований из публично доступных источников (например, копипаста с SO) - в идеале их не должны быть совсем ● Размер финальных скриптов и стилей, а также сложность разметки ● Общий объем загружаемых ресурсов (кроме данных из источников данных) ● Использование возможностей браузеров и возможностей выбранных решений Не обязательно, но будет плюсом: ● Тесты ● Минимальная потеря эффективности при замедлении сети/CPU (throttling) По результатам, в случае отказа по результатам задания, мы предоставим развернутый фидбек с обоснованием нашего решения и указания проблемных мест.