Тестове завдання для Increasio

Для виконання тестового завдання необхідно реалізувати веб-додаток, який буде відображати список рецептів. Рецепти потрібно брати з API DummyJSON. Додаток повинен максимально використовувати Server Side Rendering, Suspense Boundary та інші можливості Next.js.

Завдання 1

• Зображення
• Список тегів включно до визначенної довжини масиву
• Назва
• Складові рецепту (лише до двох рядків)
• Рівень складності який змінє колір
• Вид кухні
• Кнопка перегляду рецепта
• Бейдж популярного рецепту на основі зазначеного рейтингу

Завдання 2

Потрібно реалізувати можливість фільтрації рецептів за тегами. При кліку на тег відображаються тільки ті рецепти, які містять вказаний тег. Також цей функціонал має працювати при кліку на тег в карточці рецепту.

Завдання 3

Потрібно реалізувати пагінацію. При завантаженні рецептів вертається інформація про загальну кількість рецептів. За допомогою цього значення потрібно побудувати пагінацію та показувати тільки 3 сторінки.

Завдання 4

Потрібно зробити сторінку рецепту, на якій будуть відображатись інструкції по приготуванню. Інструкції мають бути розділені на кроки. Також, на цій сторінці потрібно динамічно генерувати мета тайтл.

Завдання 5

Потрібно реалізувати загрузку данних з використанням Suspense. При кожному оновленні чи зміні сторінки та фільтра повинно відображатись скелетон-завантаження. Данні які використовуються лише раз повинні не завантажуватись повторно.

Завдання 6

Потрібно реалізувати можливість зберігання стану фільтрації та пагінації в URL. При перезавантаженні сторінки або переході по посиланню повинен відображатись відповідний стан.

Завдання 7

Потрібно зробити мобайл версію

Приклад готового проекту

Примітки:

• Для реалізації завдання використовувати Next.js та TypeScript
• Для стилізації використовувати Tailwind CSS, Shadcn або інші бібліотеки
• Для searchParams використовувати nuqs
• Всі необходні ресурси є в відповідних папках