Страница для поиска товаров (верстка)

Оглавление

1. Краткое описание проекта
2. Стек технологий
3. Установка и запуск приложения
4. Особенности разработки и работы приложения
5. Улучшение

1. Краткое описание проекта

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

Ссылки на проект:
Задание: https://living-vinca-df3.notion.site/59dd74de2c384fb8b4e359b8fe676fda
Макет: https://www.figma.com/file/oade9pxS8wGXjRvJa3pL8H/Untitled?node-id=1-354&t=fGDZJ2QyQDuAHLiN-0
Деплой: https://elrouss.github.io/spiks/

(к оглавлению)

2. Стек технологий

(к оглавлению)

3. Установка и запуск приложения

1. git clone https://github.com/elrouss/spiks.git - клонировать репозиторий (HTTPS)
2. npm i - установить зависимости
3. npm run prepare - установить husky
4. npm run start - запустить приложение и перейти по ссылке http://localhost:8080/

(к оглавлению)

4. Особенности разработки и работы приложения

• В изначально предложенный шаблон с настройками Gulp внесены дополнения, которые позволяют автоматизировать процесс сборки страниц и компонентов из .json файлов. Также добавлена минификация js, css и html файлов
• Модифицирована изначальная структура шаблона проекта, которая позволяет создавать блоки и элементы интерфейса как компоненты, обеспечивая их слабую связность и повышая безопасность разработки
• Для единства стиля разработки подключены инструменты форматирования кода Prettier и ESLint
• В приложение не заложен отзывчиво-адаптивный интерфейс (будет плохо отображаться на маленьких ноутбуках, планшетах и мобильных телефонах)
• Ползунки реализованы через библиотеку nouislider (по требованию задания)

(к оглавлению)

5. Улучшение

• Подготовить UI Kit, используя Storybook (на этапе разработки была страница Blocks, удаленная перед деплоем)
• Переписать проект на TypeScript для повышения безопасности разработки проекта при его дальнейшем разрастании (в рамках задания стояло обязательное требование реализации на JavaScript)
• Доработать ползунок со шкалой диапазона ароматов (nose): добавить возможность выбора нужной шкалы не на клик столбца, а при зажатии левой кнопки мышью
• Разработка стилей для удобства в пользовании интерфейсом людьми с ограниченными возможностями (прежде всего, фокусы, которые не отрисованы дизайнером в макете)

(к оглавлению)