cosmetics check single page app
1.0.0
Ziel dieses Projekts ist es, eine Website zu erstellen, auf der nach den Inhaltsstoffen von Kosmetikprodukten gesucht werden kann, um festzustellen, ob diese schädliche Inhaltsstoffe für die Verwendung durch schwangere Frauen enthalten. Alle Produktinformationen werden vom SephoraCrawler-Projekt gesammelt, einem in Python geschriebenen Web-Spider. Die Datenbank umfasst alle Produktinformationen für Damen (über 7000) auf www.sephora.com.
Um den Client auszuführen,
npm install einnpm start aus. Und öffnen Sie http://localhost:3000/. Dieses Projekt dient der Implementierung einer Datenbank-Backend-Einzelseitenanwendung, die hauptsächlich zur Überprüfung verwendet wird, ob ein Hautpflegeprodukt während der Schwangerschaft sicher verwendet werden kann. Mit dieser App können Benutzer nach Namen oder Marke suchen, um nach einem bestimmten Kosmetikum zu suchen. Die relevanten Informationen werden mit einem auffälligen Schild angezeigt, das angibt, ob es für Schwangere sicher ist oder schädliche Inhaltsstoffe enthält.
Front-End ist als SPA (Single Page Application) konzipiert, das das gesamte Routing und den Datenfluss auf der Clientseite verwaltet. In diesem Projekt werden React, eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen, kombiniert mit React-Router und Redux, ein vorhersehbarer Zustandscontainer für JavaScript-Apps, zur Implementierung der App verwendet.
Die App enthält hauptsächlich 2 Funktionen. Zum einen die Suche nach Produkten und zum anderen die Prüfung der Inhaltsstoffe.
Die Startseite der App ist die Suchseite. Das Textfeld wird beim Betreten der Website automatisch fokussiert. Was diese App kann, können Nutzer anhand des selbst gestalteten Logos leicht erkennen.
Nachdem Sie eine Marke oder den Namen eines Produkts (z. B. Clinique) eingegeben und die Eingabetaste gedrückt haben, werden Benutzer zur Anzeigeseite weitergeleitet. Die Produkte sind nach 4 Artikeln in jeder Zeile und 60 Artikeln auf jeder Seite angeordnet. Und oben unter der Suchleiste sehen wir die Gesamtzahl der Suchergebnisse. Unten auf der rechten Seite befindet sich ein rosa Pfeil, mit dem Sie bequem nach oben scrollen können. Und links schwebt ein Schild, das darauf hinweist, dass ein grüner Avatar bedeutet, dass unbekannte Inhaltsstoffe gefunden wurden, und ein roter Avatar, dass schädliche Inhaltsstoffe gefunden wurden. Wenn auf einer Produktkarte kein Avatar erscheint, bedeutet dies, dass es für Schwangere sicher ist.
Unten auf der Anzeigeseite befindet sich eine Paginierungsleiste. Die aktuelle Seite wird durch die rosa Hintergrundfarbe hervorgehoben. Auf jeder Seite können maximal 60 Artikel angezeigt werden.
Wenn Sie auf eine Produktkarte klicken, erscheint ein Fenster mit detaillierteren Informationen zum Produkt. Wenn ein Produkt unsicher ist, gibt es ein auffälliges rotes Schild, das auf die darin enthaltenen schädlichen Inhaltsstoffe hinweist. Benutzer können Details und Inhaltsstoffe des Artikels überprüfen und durch Klicken auf das Bild die Website im Sephora Store aufrufen.
Eine weitere Funktion im Frontend ist die Inhaltsstoffprüfung, mit der Benutzer schädliche Inhaltsstoffe in einer Zeichenfolge herausfinden können.
Wenn keine schädlichen Inhaltsstoffe gefunden werden, erscheint ein blauer Alarm. Wenn schädliche Inhaltsstoffe gefunden werden, erscheint eine rote Warnung mit gelb hervorgehobenen bestimmten Wörtern.
