Museum of Art

Веб-сайт с отображением каталога произведений искусств на любой вкус!

Содержание

1. Экраны
   1.1 Главная
   1.2 Страница просмотра картины
   1.3 Страница c избранными картинами
2. Как запустить проект локально
3. Техническое задание
   3.1 Основные требования
   3.2 Дополнительные требования
   3.3 Дополнительно
4. Комментарии
5. Используемые технологии

Внешний вид

Главная

Главная станица: пагинация по пяти картинам, поиск, сортировка картин

Страница просмотра картины

Страница просмотра картины: просмотр детальной информации, увеличение картины при клике

Страница с избранными картинами

Страница с избранными картинами: просмотр избранных картин, удаление из избранных

Как запустить проект локально

0. Необходимая подготовка:

• Если у вас не установлен Node.js, установите отсюда (используйте версию 20.18.0 или выше)

• Проверьте версию node

node -v // Должно вывести "v20.18.0" или выше.

• Проверьте версию npm

npm -v // Должно вывести "10.9.0" или выше.

1. Теперь склонируйте репозиторий проекта:

git clone https://github.com/PikuzaMarie/art-museum.git

2. Перейдите в репозиторий:

cd art-museum

3. Установите зависимости:

npm install

4. Запустите ппроект:

npm run dev

будет загружен автоматически на http://localhost:3000/

Запуск тестов

Сначала перейдите в FavoriteButton, закомментируйте строку 4 и раскомментируйте строки после. Теперь можно запускать!

npm run test

Для запуска тестов и дополнительного вывода статистики покрытия выполните команду ниже:

npm run coverage

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

Основные требования

• Получение данных о картинах с внешнего API - реализовано;
• Отображение списка картин с возможностью пагинации - управление пагинацией реализовано в HomePage, компонент пагинации Pagination;
• Реализация формы поиска с валидацией введенных данных - реализовано в компоненте формы SearchForm, функция для валидации validationFunction;
• Использование роутинга для разделения страниц приложения - реализовано, компонент роутера Router;
• Реализация дебаунса для поисковой формы - реализовано, хук useDebounce;
• Возможность добавления картины в список избранных с сохранением их в SessionStorage - реализовано, управление состоянием через хук useFavorites и хранение состояния в контексте FavoritesContext;
• Возможность просмотра более детальной информации о картине - реализовано, страница ArtworkPage;
• Интерфейс для просмотра списка избранных и возможности удаления из списка - просмотр избранных доступен на странице FavoritesPage и добавление/удаление нажатием на FavoriteButton;
• Реализация возможности сортировки картин по различным критериям - реализовано по названию картины или имени художника (возрастание/убывание), компонент сортировки SortControls

Дополнительные требования

• При загрузке товаров необходимо реализовать Loader - реализовано в компоненте Loader;
• Оптимизацию дизайна под мобильные устройства (до 420px) - реализована оптимизация для мобильных 320-425px;
• Реализацию burger-menu и кастомного хука при закрытии - кастомный хук useDetectOutsideClick и сайдбар SideBar;
• Использовать React context по необходимости - использован для хранения состояния о загруженных картинах в ArtworksContext и избранных картинах в FavoritesContext;
• Использование TypeScript для типизирования и уменьшения количества потенциальных багов - реализовано, общие типы описаны в types;
• Использование алиасов для импортирования файлов - реализовано;
• Покрытие тестами 40% функциональности приложения - общее покрытие ~55% скриншот;
• Организацию файловой структуры react приложения. Ссылка на структуру: Структура проекта - реализовано (конфигурационные файлы остались в корневой папке, так как при их перемещении пошли ошибки);
• Деплой приложения на платформу GitHub Pages или иные другие (Netlify, Vercel) - деплой на Netlify доступен по ссылке;
• Настройку конфигурации eslint, prettier, husky - реализовано;
• Использование корректного GitFlow в проекте - реализовано;
• Использование сторонних библиотек для стилей - запрещены, кроме рекомендуемых в пункте “Используемые технологии” - соблюдено.

Дополнительно

• Навигация на предыдущую страницу со страницы ArtworkPage при нажатии на кнопку Back
• При отсутствии избранных картин или конкретной картины на странице ArtworkPage отображается фолбэк контент со ссылкой на HomePage
• При увеличение изображения на ArtworkPage отображается также альтернативный текст

Комментарии

• Реализация сортировки картин на клиенте: поскольку сортировка с сервера доступна только по полю даты добавления и требует дополнительных поисковых запросов для сортировки по другим критериям, была реализована сортировка на клиентской стороне. Пользователи могут сортировать картины по названию или имени художника (по возрастанию/убыванию) без необходимости дополнительных запросов к серверу.
• Оганичение пагинации: пагинация рассчитана на 20 страниц по 5 картин на каждой, поскольку API ограничивает максимальное количество картин в одном запросе до 100. Так как сортировка на клиенте, динамическая загрузка данных не самое хорошее решение (изменения коснутся всех работ сразу, а не только подгруженных => предыдущие загруженные картины окажутся на других страницах).
• Незагруженные картины: не все картины загружаются по ссылке, предусмотренной API для этого. Для каждой картины предусмотрен альтернативный текст, который отображается вместо изображения.

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

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