Coffee feed test task
Задача
Создать бесконечно расширяемую ленту карточек с сортами кофе по примеру в конце документа. Это творческое задание — точное соответствие макету не требуется. Макет носит приблизительный характер.
Источники данных
- ☕ Горячий кофе: https://api.sampleapis.com/coffee/hot
Обязательные требования
- Изначально выводится одна карточка.
- В конце списка есть кнопка «Добавить», при клике загружается и отображается новая карточка.
- Карточки загружаются на стороне клиента.
- Все ключевые поля API должны быть отображены в карточке.
- Если список тегов не помещается по ширине — должен горизонтально скроллиться. Проверьте работу скролла на разных платформах и разрешениях.
- Пока изображение не загружено — показывается плейсхолдер.
- Каждые 30 секунд при отсутствии активности (без кликов) автоматически добавляется новая карточка.
- Пока карточка загружается — нельзя добавить следующую.
Ограничения и стек
- Целевой браузер: Latest Chrome
- Использовать стек: Svelte + TypeScript + CSS Modules
- Можно использовать boilerplate: everton-dgn/boilerplate_astro_svelte
- Стили карточек — самостоятельно написанные (не готовые UI-библиотеки).
- Готовый проект необходимо выложить в публичный репозиторий (например GitHub) и запустить на любом бесплатном хостинге (например GitHub Pages или Vercel).
Будет оцениваться
- Минимальное копирование кода из внешних источников.
- Корректность работы в соответствии с ТЗ.
- Удобство UX.
- Качество и чистота кода.
- Сложность и аккуратность вёрстки.
- Производительность и поведение на замедленной сети.
- Применение возможностей браузера и Svelte (реактивность, асинхронность).
- Общий объём загружаемых ресурсов.
