test-task-renaissance-paintings

Тестовое задание на позицию frontend-разработчика от Banki.shop.

Интернет-магазин картин эпохи Возрождения с возможностью поиска, покупки и просмотра детальной информации о товарах.

Деплой

https://test-task-renaissance-paintings.vercel.app/

Технологии

• Vue 2 (Options API)
• TypeScript
• SCSS
• Webpack 5 (через Vue CLI 5)

Требования

• Node.js 16.x

Установка

# Переключиться на Node 16
nvm use 16

# Установить зависимости
npm install

Запуск

# Режим разработки
npm run serve

Приложение будет доступно по адресу http://localhost:8080/

Сборка

# Продакшн-сборка
npm run build

Результат сборки попадёт в папку dist/

Форматирование кода

# Запуск Prettier для всех файлов
npm run format

Функционал

1. Строка поиска

• Поиск по названиям картин в реальном времени
• Фильтрация списка товаров без перезагрузки страницы

2. Кнопка "Купить"

• Три состояния кнопки:
• Купить — начальное состояние с иконкой корзины
• Обработка — анимированный спиннер на 2 секунды
• В корзине — иконка галочки, кнопка неактивна
• Состояния визуально оформлены SVG-иконками

3. Сохранение состояния

• Состояние корзины сохраняется в localStorage
• После перезагрузки страницы товары в корзине отображаются корректно

4. Подробное описание позиции

• Модальное окно при клике на карточку или изображение
• Содержит: описание, цену, слайдер с изображениями
• Слайдер поддерживает переключение по миниатюрам

5. Адаптивная вёрстка

• Респонсивный дизайн до 360px
• Бургер-меню на мобильных устройствах
• Адаптивная сетка карточек: 4 → 3 → 2 → 1 колонка

Webpack

Проект использует Vue CLI 5, который включает Webpack 5. Конфигурация Webpack доступна через vue.config.js и может быть просмотрена командой:

npx vue-cli-service inspect

Кроссбраузерность

Приложение корректно отображается в:

• Chrome
• Firefox
• Safari
• Edge

Автор

shaba-cmd