cosmetics check single page app
1.0.0
このプロジェクトは、化粧品の成分を調べ、妊婦が使用すると有害な成分が含まれているかどうかを調べるためのウェブサイトを構築することを目的としています。すべての製品情報は、Python で書かれた Web スパイダーである sephoraCrawler プロジェクトによって収集されます。データベースには、www.sephora.com にあるすべての女性向け製品情報 (7000 以上) が含まれています。
クライアントを実行するには、
npm installと入力します。npm startでクライアントを実行します。そして http://localhost:3000/ を開きます。 このプロジェクトは、主にスキンケア製品が妊娠中に使用しても安全かどうかを確認するために使用される、データベース バックエンドのシングル ページ アプリケーションを実装するように設計されています。このアプリを使用すると、名前やブランドで検索して特定の化粧品を調べることができ、妊婦に安全かどうか、有害な成分が含まれているかどうかを示す標識とともに関連情報が表示されます。
フロントエンドは SPA (シングル ページ アプリケーション) として設計されており、クライアント側ですべてのルーティングとデータ フローを管理します。このプロジェクトでは、ユーザー インターフェイスを構築するための JavaScript ライブラリである React を、 JavaScript アプリの予測可能な状態コンテナーである React-Router および Redux と組み合わせて、アプリの実装に使用します。
アプリには主に2つの機能が含まれています。 1つは商品の検索、もう1つは成分の確認です。
アプリのホームページは検索ページです。サイトに入ると、テキスト フィールドが自動的にフォーカスされます。ユーザーは、独自にデザインしたロゴを見ることで、このアプリで何ができるかを簡単に確認できます。
ブランドまたは製品名 (Clinique など) を入力して Enter キーを押すと、表示ページに移動します。商品は各行に 4 アイテム、各ページに 60 アイテムずつ配置されています。検索バーの下の上部には、検索結果の合計数が表示されます。右側の下部には、上までスクロールするのに便利なピンクの矢印があります。そして、左側には緑色のアバターが未知の成分が検出されたことを意味し、赤色のアバターが検出された有害な成分を意味することを示す標識が浮かんでいます。製品カードにアバターが表示されていない場合は、妊娠中でも安全であることを意味します。
表示ページの下部にはページネーション バーがあります。現在のページはピンクの背景色で強調されています。各ページには最大 60 件のアイテムを表示できます。
製品カードをクリックすると、製品の詳細情報が表示されるウィンドウが表示されます。製品が安全でない場合は、有害な成分が含まれていることを示す赤い標識が表示されます。ユーザーは画像をクリックすると、商品の詳細や成分を確認したり、セフォラストアのウェブサイトにアクセスしたりできます。
フロントエンドのもう 1 つの機能は成分チェックです。これを使用すると、ユーザーは文字列内の有害な成分を見つけることができます。
有害な成分が検出されない場合は、青色の警告が表示されます。有害な成分が検出された場合、赤色の警告が表示され、特定の単語が黄色で強調表示されます。
