cosmetics check single page app
1.0.0
Este projeto tem como objetivo a construção de um site para consulta de ingredientes de produtos cosméticos, para saber se contêm ingredientes nocivos para uso por gestantes. Todas as informações dos produtos são coletadas pelo projeto sephoraCrawler, que é um web spider escrito em Python. O banco de dados inclui todas as informações de produtos femininos (mais de 7.000) em www.sephora.com.
Para executar o cliente,
npm installnpm start . E abra http://localhost:3000/. Este projeto foi desenvolvido para implementar um aplicativo de back-end de banco de dados de página única, que é usado principalmente para verificar se um produto para a pele é seguro para uso durante a gravidez. Ao usar este aplicativo, os usuários podem pesquisar por nome ou marca para procurar um determinado cosmético, e as informações relevantes são exibidas com um sinal visível indicando se é seguro para grávidas ou contém ingredientes prejudiciais.
Front-End é projetado como um SPA (aplicativo de página única) que gerencia todo o roteamento e fluxo de dados do lado do cliente. Neste projeto, React, que é uma biblioteca JavaScript para construção de interfaces de usuário, combinado com React-Router e Redux, que é um contêiner de estado previsível para aplicativos JavaScript, são usados para implementar o aplicativo.
O aplicativo contém principalmente 2 funções. Uma é a busca de produtos e outra é a verificação de ingredientes.
A página inicial do aplicativo é a página de pesquisa. O campo de texto é focado automaticamente ao entrar no site. Os usuários podem ver facilmente o que este aplicativo pode fazer observando o logotipo criado por eles mesmos.
Após digitar a marca ou nome de um produto (por exemplo Clinique) e pressionar Enter, os usuários serão direcionados para a página de exibição. Os produtos são organizados por 4 itens em cada linha e 60 itens em cada página. E no topo, abaixo da barra de pesquisa, podemos ver o número total de resultados da pesquisa. Na parte inferior do lado direito há uma seta rosa usada para rolar até o topo para facilitar. E há uma placa flutuando à esquerda indicando que o avatar verde significa ingredientes desconhecidos encontrados e o avatar vermelho significa ingredientes prejudiciais encontrados. Se nenhum avatar aparecer no cartão do produto, significa que é seguro para grávidas.
Na parte inferior da página de exibição, há uma barra de paginação. A página atual é enfatizada pela cor de fundo rosa. Em cada página podem ser exibidos no máximo 60 itens.
Ao clicar no cartão de um produto, aparece uma janela com informações mais detalhadas do produto. Se um produto não for seguro, há um sinal vermelho visível indicando os ingredientes nocivos nele contidos. Os usuários podem conferir detalhes e ingredientes do item e acessar seu site na loja Sephora clicando na imagem.
Outra função do front-end é a verificação de ingredientes, que permite ao usuário descobrir ingredientes nocivos em uma string.
Se nenhum ingrediente prejudicial for encontrado, um alerta azul será exibido. Se forem encontrados ingredientes nocivos, um alerta vermelho aparecerá com palavras específicas destacadas em amarelo.
