cosmetics check single page app

Bahan Perawatan Kulit Cari Situs Web

Proyek ini dirancang untuk membangun website untuk mencari bahan-bahan produk kosmetik, apakah mengandung bahan berbahaya untuk digunakan ibu hamil. Semua informasi produk dikumpulkan oleh proyek sephoraCrawler, yang merupakan laba-laba web yang ditulis dengan Python. Basis data mencakup semua informasi produk wanita (7000+) di www.sephora.com.

Memulai

Untuk menjalankan klien,

• Pertama instal paketnya, masukkan npm install
• Jalankan klien di localhost npm start . Dan buka http://localhost:3000/.

Garis Besar Proyek

Proyek ini dirancang untuk mengimplementasikan aplikasi satu halaman back-end database, yang terutama digunakan untuk memeriksa apakah suatu produk perawatan kulit aman digunakan selama kehamilan. Dengan menggunakan aplikasi ini, pengguna dapat mencari berdasarkan nama atau merek untuk mencari kosmetik tertentu, dan informasi yang relevan ditampilkan dengan tanda nyata yang menunjukkan apakah aman untuk hamil atau mengandung bahan berbahaya.

Desain Front-End

Front-End dirancang sebagai SPA (Aplikasi satu halaman) yang mengelola semua perutean dan aliran data di sisi klien. Dalam proyek ini, React yang merupakan pustaka JavaScript untuk membangun antarmuka pengguna, dikombinasikan dengan React-Router dan Redux yang merupakan wadah keadaan yang dapat diprediksi untuk aplikasi JavaScript, digunakan untuk mengimplementasikan aplikasi.

Aplikasi ini terutama berisi 2 fungsi. Salah satunya adalah pencarian produk dan yang lainnya adalah pemeriksaan bahan.

Mencari

Halaman beranda aplikasi adalah halaman pencarian. Bidang teks difokuskan secara otomatis saat memasuki situs. Pengguna dapat dengan mudah melihat apa yang dapat dilakukan aplikasi ini dengan melihat logo yang dirancang sendiri.

Setelah mengetik merek atau nama suatu produk (misalnya Clinique) dan menekan enter, pengguna akan diarahkan ke halaman tampilan. Produk disusun berdasarkan 4 item pada setiap baris dan 60 item pada setiap halaman. Dan di atas di bawah bilah pencarian kita dapat melihat jumlah total hasil pencarian. Di sisi kanan bawah terdapat panah merah muda yang digunakan untuk menggulir ke atas agar nyaman. Dan ada tanda mengambang di sebelah kiri yang menunjukkan bahwa avatar hijau berarti ditemukan bahan yang tidak diketahui dan avatar merah berarti ditemukan bahan berbahaya. Jika tidak ada avatar yang muncul di kartu produk, berarti aman untuk ibu hamil.

Di bagian bawah halaman tampilan, ada bilah penomoran halaman. Halaman saat ini ditekankan oleh warna latar belakang merah muda. Pada setiap halaman, maksimal 60 item dapat ditampilkan.

Saat mengklik kartu produk, sebuah jendela akan muncul untuk memberikan informasi lebih rinci tentang produk tersebut. Jika suatu produk tidak aman, akan ada tanda merah yang menunjukkan kandungan bahan berbahaya di dalamnya. Pengguna dapat memeriksa detail dan bahan-bahan tentang item tersebut dan mengunjungi situs webnya di toko Sephora dengan mengklik gambar.

Pemeriksaan Bahan

Fungsi lain di front-end adalah pemeriksaan bahan, memungkinkan pengguna menemukan bahan berbahaya dalam sebuah string.

Jika tidak ditemukan bahan berbahaya, peringatan biru akan muncul. Jika ditemukan bahan berbahaya, peringatan merah akan muncul dengan kata-kata tertentu yang disorot dengan warna kuning.