Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/elrouss/spiks
Страница для поиска товаров (верстка)
https://github.com/elrouss/spiks
elrouss gulpjs html5 javscript pug sass scss spiks
Last synced: about 1 month ago
JSON representation
Страница для поиска товаров (верстка)
- Host: GitHub
- URL: https://github.com/elrouss/spiks
- Owner: elrouss
- Created: 2024-03-23T10:07:38.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-03-28T17:04:02.000Z (10 months ago)
- Last Synced: 2024-12-10T20:37:27.230Z (about 2 months ago)
- Topics: elrouss, gulpjs, html5, javscript, pug, sass, scss, spiks
- Language: SCSS
- Homepage: https://elrouss.github.io/spiks/
- Size: 716 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Страница для поиска товаров (верстка)
Оглавление
- Краткое описание проекта
- Стек технологий
- Установка и запуск приложения
- Особенности разработки и работы приложения
- Улучшение
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/
3. Установка и запуск приложения
1. `git clone https://github.com/elrouss/spiks.git` - клонировать репозиторий (HTTPS)
2. `npm i` - установить зависимости
3. `npm run prepare` - установить husky
5. `npm run start` - запустить приложение и перейти по ссылке `http://localhost:8080/`
4. Особенности разработки и работы приложения
- В изначально предложенный шаблон с настройками Gulp внесены дополнения, которые позволяют автоматизировать процесс сборки страниц и компонентов из .json файлов. Также добавлена минификация js, css и html файлов
- Модифицирована изначальная структура шаблона проекта, которая позволяет создавать блоки и элементы интерфейса как компоненты, обеспечивая их слабую связность и повышая безопасность разработки
- Для единства стиля разработки подключены инструменты форматирования кода Prettier и ESLint
- В приложение не заложен отзывчиво-адаптивный интерфейс (будет плохо отображаться на маленьких ноутбуках, планшетах и мобильных телефонах)
- Ползунки реализованы через библиотеку nouislider (по требованию задания)
- Подготовить UI Kit, используя Storybook (на этапе разработки была страница Blocks, удаленная перед деплоем)
- Переписать проект на TypeScript для повышения безопасности разработки проекта при его дальнейшем разрастании (в рамках задания стояло обязательное требование реализации на JavaScript)
- Доработать ползунок со шкалой диапазона ароматов (nose): добавить возможность выбора нужной шкалы не на клик столбца, а при зажатии левой кнопки мышью
- Разработка стилей для удобства в пользовании интерфейсом людьми с ограниченными возможностями (прежде всего, фокусы, которые не отрисованы дизайнером в макете)
