Perancangan Front-End Aplikasi Mukha untuk Manajemen Pemakaian Produk Kecantikan Wajah Berbasis Web

Abstract

Pengelolaan produk kosmetik harian yang dilakukan secara manual menyebabkan pengguna sering melewatkan tanggal kadaluarsa produk. Selain itu, minimnya pemahaman terhadap kandungan bahan kimia aktif berisiko memicu iritasi karena tidak sesuai jenis kulit, serta sulitnya pelacakan pengeluaran pembelian menjadi kendala utama pencatatan tidak terpusat. Untuk mengatasi masalah tersebut, penelitian ini mengembangkan sistem informasi manajemen pemakaian produk kecantikan wajah berbasis web bernama Mukha yang mengintegrasikan seluruh riwayat produk dalam satu platform. Kontribusi utama penelitian ini terletak pada mekanisme notifikasi peringatan dini berbasis aturan kamus bahan berbahaya yang dapat dinamis diperbarui oleh admin. Metode pengembangan sistem dilakukan melalui tahap analisis kebutuhan fungsional dengan pemodelan use case, perancangan antarmuka bertema rose gold, hingga implementasi kode menggunakan arsitektur terpisah antara Laravel sebagai back-end dan React sebagai front-end. Komunikasi data antar-arsitektur tersebut dijembatani oleh komponen Axios, Context API, dan React Hooks. Hasil implementasi menunjukkan bahwa sistem berhasil mengotomatisasi perhitungan selisih hari kadaluarsa dan menampilkan status risiko komposisi bahan berbahaya secara langsung pada tabel halaman Koleksi Anda. Halaman Manajemen Peringatan mempermudah admin memperbarui basis data kamus bahan kosmetik berisiko tanpa perlu memodifikasi kode program utama, sementara fitur ulasan dan rekomendasi mampu menyaring kandungan produk yang aman sesuai profil kulit pengguna. Seluruh hasil pengujian fungsional pada formulir manipulasi data produk juga terbukti konsisten memberikan umpan balik notifikasi yang valid. Penelitian ini menyimpulkan bahwa penggabungan notifikasi berbasis aturan dengan arsitektur Laravel-React efektif meningkatkan kewaspadaan keamanan produk sekaligus mempermudah manajemen kosmetik mandiri.