cosmetics check single page app
1.0.0
Este proyecto está diseñado para crear un sitio web para buscar los ingredientes de los productos cosméticos, si contienen ingredientes nocivos para el uso de mujeres embarazadas. Toda la información de los productos se recopila mediante el proyecto sephoraCrawler, que es una araña web escrita en Python. La base de datos incluye toda la información de productos femeninos (más de 7000) en www.sephora.com.
Para ejecutar el cliente,
npm installnpm start . Y abra http://localhost:3000/. Este proyecto está diseñado para implementar una aplicación de base de datos de una sola página, que se utiliza principalmente para verificar si un producto para el cuidado de la piel es seguro de usar durante el embarazo. Al usar esta aplicación, los usuarios pueden buscar por nombre o marca un determinado cosmético, y la información relevante se muestra con un letrero visible que indica si es seguro para las embarazadas o si contiene ingredientes nocivos.
Front-End está diseñado como un SPA (aplicación de página única) que gestiona todo el enrutamiento y el flujo de datos en el lado del cliente. En este proyecto, para implementar la aplicación se utiliza React, que es una biblioteca de JavaScript para crear interfaces de usuario, combinado con React-Router y Redux, que es un contenedor de estado predecible para aplicaciones de JavaScript .
La aplicación contiene principalmente 2 funciones. Una es la búsqueda de productos y otra es la comprobación de ingredientes.
La página de inicio de la aplicación es la página de búsqueda. El campo de texto se enfoca automáticamente al ingresar al sitio. Los usuarios pueden ver fácilmente lo que puede hacer esta aplicación mirando el logotipo de diseño propio.
Después de escribir una marca o el nombre de un producto (por ejemplo, Clinique) y presionar Intro, los usuarios accederán a la página de visualización. Los productos están organizados en 4 artículos en cada fila y 60 artículos en cada página. Y arriba, debajo de la barra de búsqueda, podemos ver el número total de resultados de búsqueda. En la parte inferior del lado derecho hay una flecha rosa que se usa para desplazarse hacia la parte superior para mayor comodidad. Y hay un letrero flotando a la izquierda que indica que avatar verde significa ingredientes desconocidos encontrados y avatar rojo significa ingredientes dañinos encontrados. Si no aparece ningún avatar en la tarjeta de un producto, significa que es seguro para embarazadas.
En la parte inferior de la página de visualización, hay una barra de paginación. La página actual está resaltada por el color de fondo rosa. En cada página se pueden mostrar como máximo 60 elementos.
Al hacer clic en la ficha de un producto, aparece una ventana que brinda información más detallada del producto. Si un producto no es seguro, hay un letrero rojo visible que indica los ingredientes dañinos que contiene. Los usuarios pueden consultar los detalles y los ingredientes del artículo e ir a su sitio web en la tienda Sephora haciendo clic en la imagen.
Otra función en el front-end es la verificación de ingredientes, que permite a los usuarios encontrar ingredientes dañinos en una cadena.
Si no se encuentran ingredientes dañinos, aparece una alerta azul. Si se encuentran ingredientes dañinos, aparece una alerta roja con palabras específicas resaltadas en amarillo.
