cosmetics check single page app
1.0.0
Этот проект предназначен для создания веб-сайта для поиска ингредиентов косметической продукции, содержит ли она вредные для беременных ингредиенты. Вся информация о продуктах собирается проектом sephoraCrawler, который представляет собой веб-паук, написанный на Python. База данных включает всю информацию о женских продуктах (более 7000) на сайте www.sephora.com.
Чтобы запустить клиент,
npm installnpm start . И откройте http://localhost:3000/. Этот проект предназначен для реализации одностраничного приложения с базой данных, которое в основном используется для проверки безопасности использования продукта по уходу за кожей во время беременности. Используя это приложение, пользователи могут выполнять поиск по названию или бренду, чтобы найти определенное косметическое средство, а соответствующая информация отображается с заметным знаком, указывающим, безопасно ли оно для беременных или содержит вредные ингредиенты.
Интерфейсный интерфейс спроектирован как SPA (одностраничное приложение), которое управляет всей маршрутизацией и потоком данных на стороне клиента. В этом проекте для реализации приложения используется React, который представляет собой библиотеку JavaScript для создания пользовательских интерфейсов, в сочетании с React-Router и Redux, который является контейнером прогнозируемого состояния для приложений JavaScript .
Приложение в основном содержит 2 функции. Один — это поиск продуктов, другой — проверка ингредиентов.
Домашняя страница приложения — это страница поиска. Текстовое поле фокусируется автоматически при входе на сайт. Пользователи могут легко увидеть, на что способно это приложение, посмотрев на разработанный ими логотип.
После ввода бренда или названия продукта (например, Clinique) и нажатия клавиши «Ввод» пользователи перейдут на страницу отображения. Товары расположены по 4 наименования в каждой строке и по 60 наименований на каждой странице. А вверху под строкой поиска мы можем увидеть общее количество результатов поиска. Внизу справа есть розовая стрелка, используемая для удобной прокрутки вверх. Слева плавает знак, указывающий, что зеленый аватар означает обнаружение неизвестных ингредиентов, а красный аватар означает обнаружение вредных ингредиентов. Если на карточке товара нет аватара, значит, он безопасен для беременных.
Внизу страницы отображения находится панель нумерации страниц. Текущая страница выделена розовым цветом фона. На каждой странице может отображаться не более 60 элементов.
При нажатии на карточку товара появляется окно с более подробной информацией о товаре. Если продукт небезопасен, на нем имеется заметный красный знак, указывающий на наличие в нем вредных ингредиентов. Пользователи могут проверить информацию и состав товара, а также перейти на его веб-сайт в магазине Sephora, щелкнув картинку.
Еще одна функция внешнего интерфейса — проверка ингредиентов. Она позволяет пользователям находить вредные ингредиенты в строке.
Если вредные ингредиенты не обнаружены, отображается синий сигнал тревоги. Если обнаружены вредные ингредиенты, отображается красный сигнал тревоги, а конкретные слова выделяются желтым цветом.
