cosmetics check single page app
1.0.0
Ce projet vise à créer un site Web permettant de rechercher les ingrédients des produits cosmétiques, s'ils contiennent des ingrédients nocifs pour les femmes enceintes. Toutes les informations sur les produits sont collectées par le projet SephoraCrawler, qui est une araignée Web écrite en Python. La base de données comprend toutes les informations sur les produits féminins (plus de 7 000) sur www.sephora.com.
Pour exécuter le client,
npm installnpm start . Et ouvrez http://localhost:3000/. Ce projet est conçu pour mettre en œuvre une application back-end d'une seule page de base de données, qui est principalement utilisée pour vérifier si un produit de soin de la peau peut être utilisé en toute sécurité pendant la grossesse. En utilisant cette application, les utilisateurs peuvent effectuer une recherche par nom ou par marque pour rechercher un certain produit cosmétique, et les informations pertinentes sont affichées avec un signe visible indiquant s'il est sans danger pour les femmes enceintes ou s'il contient des ingrédients nocifs.
Front-End est conçu comme un SPA (application monopage) qui gère tout le routage et le flux de données côté client. Dans ce projet, React, une bibliothèque JavaScript permettant de créer des interfaces utilisateur, combiné à React-Router et Redux, un conteneur d'état prévisible pour les applications JavaScript, sont utilisés pour implémenter l'application.
L'application contient principalement 2 fonctions. L’une est la recherche de produits et l’autre la vérification des ingrédients.
La page d'accueil de l'application est la page de recherche. Le champ de texte est automatiquement mis au point lors de l'entrée sur le site. Les utilisateurs peuvent facilement voir ce que cette application peut faire en regardant le logo qu'ils ont eux-mêmes conçu.
Après avoir tapé une marque ou le nom d'un produit (par exemple Clinique) et appuyé sur Entrée, les utilisateurs seront dirigés vers la page d'affichage. Les produits sont classés par 4 articles sur chaque ligne et 60 articles sur chaque page. Et en haut, sous la barre de recherche, nous pouvons voir le nombre total de résultats de recherche. En bas du côté droit se trouve une flèche rose utilisée pour faire défiler vers le haut pour plus de commodité. Et il y a un panneau flottant sur la gauche indiquant que l'avatar vert signifie des ingrédients inconnus trouvés et l'avatar rouge signifie des ingrédients nocifs trouvés. Si aucun avatar n’apparaît sur une fiche produit, cela signifie qu’il est sans danger pour les femmes enceintes.
En bas de la page d'affichage, il y a une barre de pagination. La page actuelle est soulignée par une couleur de fond rose. Sur chaque page, au maximum 60 éléments peuvent être affichés.
En cliquant sur une fiche produit, une fenêtre apparaît pour donner des informations plus détaillées sur le produit. Si un produit est dangereux, un panneau rouge visible indique les ingrédients nocifs qu’il contient. Les utilisateurs peuvent vérifier les détails et les ingrédients de l'article et accéder à son site Web dans la boutique Sephora en cliquant sur l'image.
Une autre fonction frontale est la vérification des ingrédients, elle permet aux utilisateurs de découvrir les ingrédients nocifs dans une chaîne.
Si aucun ingrédient nocif n’est trouvé, une alerte bleue apparaît. Si des ingrédients nocifs sont détectés, une alerte rouge apparaît avec des mots spécifiques surlignés en jaune.
