Для работы приложения необходим API ключ c rapidapi.com

1. Тестовое задание
   • Разработка веб-приложения на Vue 3 и Nuxt 3
   • Описание проекта
   • Технические требования
   • Функциональные требования
   • Дополнительные указания
   • Цель
2. Используемые технологии
3. Конфигурация Nuxt.js
4. Описание функционала

Необходимо создать веб-приложение, используя фреймворк Nuxt 3. Приложение должно представлять собой каталог с возможностью поиска и отображением списка элементов.

• Фронтенд: Vue 3 с использованием Composition API.
• Стилизация: Использование flexbox/grid и SCSS.
• Типизация: Typescript для управления типами данных.
• Стейт-менеджмент: Использование Pinia.
• API: Интеграция с любым публичным API из списка Free APIs Collection.

• Поиск: Реализация глубокого клиентского поиска по свойствам элементов (например, название, цвет, размер и т.д.).
• Отображение списка: Два вида отображения списка элементов – плиточный и горизонтальный список.
• Пагинация: Добавление пагинации для управления отображением элементов.
• Детализация элемента: При клике на элемент необходимо отображать его свойства. Это может быть реализовано через модальное окно или переход на отдельную страницу.

• Не использовать готовые UI библиотеки и Bootstrap для стилизации.
• Особое внимание уделить организации и чистоте кода.

Цель задания – продемонстрировать навыки работы с современными технологиями и паттернами разработки на Vue 3 и Nuxt 3, а также способность к созданию интерактивных и пользовательских интерфейсов без использования готовых решений.

Используются Vue 3 и Nuxt 3 для создания приложения, Pinia для управления состоянием, SCSS, Flexbox, и Grid для стилизации, Axios для HTTP-запросов, TypeScript для типизации, @nuxt/image для оптимизации изображений и nuxt-icon для работы с иконками.

Файл nuxt.config.ts настроен с учетом следующих параметров и модулей:

• css: файл стилей SCSS (~/assets/scss/main.scss).
• modules: В проект включены следующие модули Nuxt.js:
  • @pinia/nuxt - интеграция состояния управления Pinia.
  • @nuxt/image - модуль для оптимизации изображений.
  • @nuxtjs/google-fonts - модуль для подключения Google Fonts.
  • nuxt-icon - модуль для упрощения использования иконок.
• googleFonts: Для текстов используются шрифты семейства Roboto с различными начертаниями (300, 400, 500, 700) и подмножеством cyrillic для поддержки кириллицы.

• Глубокий поиск: Реализован на клиентской стороне, позволяет фильтровать список фильмов по различным свойствам через поиск.
• Изменение отображения списка элементов: Предусмотрены два вида отображения - плиточный и горизонтальный список.
• Пагинация: Добавлена поддержка пагинации (бесконечная прокрутка).
• Детализация элемента: При клике на элемент из списка открывается модальное окно с детальной информацией о фильме.
• Управление избранным: Реализовано через localStorage с проверкой process.client, что гарантирует корректное использование функционала в условиях SSR, где доступ к localStorage возможен только после полной загрузки страницы на стороне клиента.