cosmetics check single page app

護膚成分查詢網站

本計畫旨在建立一個查詢化妝品成分的網站，是否含有孕婦使用的有害成分。所有產品資訊均由sephoraCrawler專案收集，該專案是一個用Python編寫的網路蜘蛛。此資料庫包含www.sephora.com上所有女性產品資訊（7000+）。

入門

要運行客戶端，

• 先安裝軟體包，輸入npm install
• 在本機上執行客戶端npm start 。並開啟http://localhost:3000/。

項目概要

該項目旨在實現一個資料庫後端單頁應用程序，主要用於檢查護膚品在懷孕期間是否可以安全使用。透過使用該應用程序，用戶可以透過名稱或品牌搜尋某種化妝品，並顯示相關訊息，並帶有明顯的標誌，表明該化妝品是否適合懷孕或含有有害成分。

前端設計

前端被設計為 SPA（單頁應用程式），它管理客戶端的所有路由和資料流。在這個專案中，React（一個用於建立使用者介面的 JavaScript 程式庫）與 React-Router 和 Redux（ JavaScript 應用程式的可預測狀態容器）結合，用於實作該應用程式。

該應用程式主要包含2個功能。一是產品搜索，二是成分檢查。

搜尋中

該應用程式的主頁是搜尋頁面。進入網站時，文字欄位會自動對焦。用戶透過查看自行設計的徽標就可以輕鬆了解此應用程式的功能。

輸入產品的品牌或名稱（例如 Clinique）並按 Enter 鍵後，使用者將導覽至顯示頁面。產品依每行 4 項、每頁 60 項排列。在搜尋欄下方的頂部，我們可以看到搜尋結果的總數。右側底部有一個粉紅色箭頭，用於向上滾動到頂部以方便使用。並且左側漂浮著一個標誌，綠色頭像表示發現未知成分，紅色頭像表示發現有害成分。如果產品卡上沒有頭像，則表示可以安全懷孕。

在顯示頁面的底部，有一個分頁欄。目前頁面以粉紅色背景色強調。每頁最多可顯示 60 則內容。

點擊產品卡時，會出現一個窗口，提供該產品的更詳細資訊。如果產品不安全，就會有明顯的紅色標誌顯示其中含有有害成分。用戶可以查看該商品的詳細資訊和成分，並透過點擊圖片進入絲芙蘭商店的網站。

成分檢查

前端的另一個功能是成分檢查，它可以讓使用者找出字串中的有害成分。

如果沒有發現有害成分，則會出現藍色警報。如果發現有害成分，則會出現紅色警報，並以黃色突出顯示特定文字。