Тестовое задание на позицию Frontend-разработчик в ООО Разумные решения

Задание

Реализовать проект на Vue “Поиск книг”.

API документация: https://developers.google.com/books/docs/v1/using

Для авторизации запросов к API выбрать способ с предоставлением API Key. https://developers.google.com/books/docs/v1/using#APIKey

Функционал ● Должны быть текстовое поле и кнопка поиска. По введенной пользователем подстроке производится поиск книг. Триггером к поиску является либо нажатие Enter (когда текстовое поле в фокусе), либо нажатие кнопки поиска. ● Фильтрация по категориям. Ниже текстового поля располагается селект с категориями: all, art, biography, computers, history, medical, poetry. Если выбрано "all" (выбрано изначально), то поиск производится по всем категориям. ● Сортировка. Рядом с селектом категорий находится селект с вариантами сортировки: relevance (выбран изначально), newest. ● Найденные книги отображаются карточками, каждая из которых состоит из изображения обложки книги, названия книги, названия категории и имен авторов. Если для книги приходит несколько категорий, то отображается только первая. Авторы отображаются все. Если не приходит какой-либо части данных, то вместо нее просто пустое место. ● Над блоком с карточками отображается количество найденных по запросу книг. ● Пагинация реализована по принципу 'load more'. Ниже блока с карточками находится кнопка 'Load more', по клику на нее к уже загруженным книгам подгружаются еще. Шаг пагинации - 30. ● При клике на карточку происходит переход на детальную страницу книги, на которой выводятся ее данные: изображение обложки, название, все категории, все авторы, описание.

Требования: ● Реализовать проект на JavaScript, (typescript не нужен); ● Использование SCSS на ваше усмотрение; ● Обязательное использование Vuex; ● Во время загрузки книг необходимо показывать компонент загрузки; ● Реализовать обработки ошибок сервера;

Демо-страница: https://candid-muffin-d8b6c7.netlify.app/

Использованные технологии

• Vue 3 - реактивный фреймворк, основа проекта
• Vuex - менеджер состояния для Vue
• Vue-Router - роутер je для Vue
• Vite - инструментарий автоматизации рабочих процессов внутри проекта

Установка

npm install

npm run dev