https://github.com/stpkkk/google-books

Test assignment for the position of Frontend developer at Future-Group company using the Google Books API
https://github.com/stpkkk/google-books

Last synced: 2 days ago
JSON representation

Test assignment for the position of Frontend developer at Future-Group company using the Google Books API

• Host: GitHub
• URL: https://github.com/stpkkk/google-books
• Owner: stpkkk
• Created: 2023-09-04T14:20:53.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-10-09T18:07:34.000Z (about 1 year ago)
• Last Synced: 2023-10-09T19:27:11.678Z (about 1 year ago)
• Language: TypeScript
• Homepage: https://google-books-peach.vercel.app
• Size: 1.64 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Google Books

## App stack

- Next.js

- React.js

- Typescript

- Redux-Toolkit

- RTK Query

- Tailwind

# Тестовое задание на позицию frontend разработчика

👨‍💻

Необходимо выполнить задание и разместить результат на своей странице Github. Срок выполнения 5 рабочих дней с момента получения задания.

## Задание

Необходимо разработать React-приложение поиска книг с помощью Google Books API. Документация: https://developers.google.com/books/docs/v1/using. Для авторизации запросов к API выбрать способ с предоставлением API key (https://developers.google.com/books/docs/v1/using#APIKey).

Дополнительным плюсом будет: Финальный билд приложения должен быть запускаться из **Docker контейнера** (хотябы с минимальной конфигурацией)

**Функционал**

- Должны быть текстовое поле и кнопка поиска. По введенной пользователем подстроке производится поиск книг. Триггером к поиску является либо нажатие Enter (когда текстовое поле в фокусе), либо нажатие кнопки поиска.

- Фильтрация по категориям. Ниже текстового поля располагается селект с категориями: all, art, biography, computers, history, medical, poetry. Если выбрано "all" (выбрано изначально), то поиск производится по всем категориям.

- Сортировка. Рядом с селектом категорий находится селект с вариантами сортировки: relevance (выбран изначально), newest.

- Найденные книги отображаются карточками, каждая из которых состоит из изображения обложки книги, названия книги, названия категории и имен авторов. Если для книги приходит несколько категорий, то отображается только первая. Авторы отображаются все. Если не приходит какой-либо части данных, то вместо нее просто пустое место.

- Над блоком с карточками отображается количество найденных по запросу книг.

- Пагинация реализована по принципу 'load more'. Ниже блока с карточками находится кнопка 'Load more', по клику на нее к уже загруженным книгам подгружаются еще. Шаг пагинации - 30.

- При клике на карточку происходит переход на детальную страницу книги, на которой выводятся ее данные: изображение обложки, название, все категории, все авторы, описание.

**Замечания**

- **Обязательно** использование Redux/MobX.

- **Желательно** Typescript

- Во время загрузки книг стоит показать какой-то индикатор

- Использование сторонних библиотек будет плюсом только в случае если это оправданно и вы сможете объяснить причину выбора. Показав свои знания в грамотном применении сторонних готовых решений, вы имеете шанс повысить свою профессиональную привлекательность для нас.

- Пишите код так, как бы вы его писали в работе — внутренности задания будут оцениваться даже тщательней, чем внешнее соответствие заданию. Код должен быть организован так, чтобы его можно было заново использовать.

- Помните про обработку ошибок!

- Верстка может быть самая простая, однако она не должна ломаться при разрешениях от 320px до 1920px. Визуализацию и украшение делайте на ваш вкус. Мы не против использования [Bootstrap](http://getbootstrap.com/) или похожего UI фреймворк, но только для UI представления (нельзя использовать JS код для решения задачи, но можно использовать для оформительских эффектов (анимации и тому подобное))!