Tестовое задание Modsen Art Museum

Содержание

• Техническое задание
• API
• Необходимый функционал
• Пример графического представления
• Используемые технологии
• Тестирование
• Полезные ссылки

Техническое задание

Реализовать приложение для отображения каталога с картинами.

API:

Список API для использования (если представленные API не удовлетворяют каким-либо условиям задания, можно использовать любые другие открытые API): Art API

Необходимый функционал

• Получение данных о картинах с внешнего API;
• Отображение списка картин с возможностью пагинации;
• Реализация формы поиска с валидацией введенных данных;
• Использование роутинга для разделения страниц приложения;
• Реализация дебаунса для поисковой формы с помощью кастомного хука;
• Возможность добавления картины в список избранных с сохранением их в SessionStorage;
• Возможность просмотра более детальной информации о картине и возврате на главную страницу;
• Интерфейс для просмотра списка избранных и возможности удаления из списка;
• Реализация возможности сортировки картин по различным критериям (по названию произведения) (продумать самостоятельно).

Пример графического представления

Ссылка на макет: "Modsen Art Museum".

Так же проект предполагает

• При загрузке товаров необходимо реализовать Loader;
• Оптимизацию дизайна под мобильные устройства (до 360px);
• Реализацию burger-menu;
• Обработку ошибок через паттерн Error Boundaries;
• Использование TypeScript для типизирования и уменьшения количества потенциальных багов;
• Использование алиасов для импортирования файлов;
• Покрытие тестами 35% функциональности приложения;
• Организацию файловой структуры react приложения. Ссылка на структуру: Структура проекта;
• Деплой приложения на платформу Vercel или Netlify;
• Настройку конфигурации eslint, prettier, husky, commitlint;
• Использование корректного GitFlow в проекте;
• Использование сторонних библиотек для стилей - запрещены, кроме рекомендуемых в пункте “Используемые технологии”.

Описание экранов

Главная страница представляет собой информационную часть приложения, в которой можно выполнить поиск и отсортировать получаемые данные. Также на главной странице необходимо реализовать пагинацию по трем картинам. При клике на выбранную картину должен осуществляться переход на страницу с детальной информацией, чтобы изучить произведение подробнее(необходимо самостоятельно добавить кнопку возврата на главную страницу). Понравившиеся произведения можно поместить в избранное, чтобы иметь быстрый доступ к их изучению и просмотру.

Используемые технологии

• node.js - программная платформа, основанная на движке V8 (транслирующем JavaScript в машинный код);
• eslint - линтер для JavaScript кода;
• prettier - инструмент для автоформатирования кода;
• yarn - менеджер пакетов;
• react - JavaScript-библиотека для создания пользовательских интерфейсов;
• typescript - строго типизированный язык для уменьшения количества потенциальных багов;
• SCSS - препроцессор, который служит для быстрого написания CSS стилей;
• jest - библиотека для unit-тестирования;
• react-router-dom - библиотека для навигации между разными частями веб-приложения;
• yup - библиотека для валидации форм;
• react-hook-form - библиотека для обработки элемента ввода формы.

Полезные ссылки

React React hooks Eslint Prettier SCSS Husky GitFlow Commit Convention