live Fullstack

ForgeMoist — Skincare Recommender & Analysis

Sistem rekomendasi pelembap wajah pintar berbasis kesesuaian bahan aktif dan masalah kulit menggunakan Jaccard Similarity.

TypeScriptTailwind CSSNode.jsReact
ForgeMoist — Skincare Recommender & Analysis thumbnail

ForgeMoist adalah aplikasi pencari dan analisis pelembap wajah (moisturizer) pintar berbasis web. Sistem ini dirancang untuk memandu pengguna awam maupun antusias skincare menemukan produk pelembap terbaik yang paling cocok dengan kebutuhan biologis kulit mereka.

Fitur Utama:

  1. Interactive 3-Step Recommendation Quiz: Alur kuis modern untuk mengumpulkan input Tipe Kulit, Masalah Kulit (Acne, Hydration, Aging, dll.), dan Preferensi Tekstur (Gel, Cream, Lotion).
  2. Jaccard Similarity Matching Engine: Mengkalkulasi tingkat kecocokan formula bahan aktif terhadap masalah kulit secara akurat di sisi server dengan performa sub-milidetik.
  3. Formula Safety Verification Claims: Verifikasi otomatis kandungan sensitif seperti bebas paraben (paraben-free), bebas alkohol (alcohol-free), aman untuk jerawat jamur (fungal acne-safe), dll.
  4. Active Ingredients Breakdown: Visualisasi komprehensif kegunaan bahan aktif utama (seperti Ceramide, Niacinamide, Centella Asiatica, Retinol) sehingga pengguna paham mengapa produk tersebut direkomendasikan untuk mereka.
  5. Female Daily Review Bridge: Integrasi URL ulasan eksternal guna memfasilitasi pengguna melihat ulasan komunitas secara transparan sebelum membeli.
The Problem

Banyak pengguna skincare kesulitan memilih pelembap wajah (moisturizer) yang benar-benar sesuai dengan kondisi kulit unik mereka. Membaca label kandungan kimia secara manual sangat membingungkan bagi orang awam. Akibatnya, banyak yang membeli produk yang salah, memicu reaksi alergi (breakout), atau menyia-niąkan biaya untuk produk yang tidak memberikan hasil optimal.

The Solution

Membangun ForgeMoist, aplikasi web rekomendasi pelembap wajah yang memadukan tipe kulit, preferensi tekstur, dan masalah kulit spesifik. Menggunakan kuis interaktif 3-langkah yang ramah pengguna, sistem memfilter kecocokan secara ketat menggunakan data bahan aktif, serta menghitung peringkat kesesuaian menggunakan formula Jaccard Similarity (bobot 60%), penilaian komunitas (15%), dan popularitas produk (25%).

Architecture

Frontend dibangun menggunakan Next.js App Router (React) dengan TypeScript untuk pengetikan statis yang aman, dan Tailwind CSS untuk desain UI/UX minimalis yang premium dan responsif. Backend API route Next.js (/api/recommend) berlatensi rendah untuk kalkulasi kecocokan dinamis secara real-time. Data layer menggunakan dataset terstruktur (clean_dataset.json dan enriched_dataset.json) untuk menghilangkan latensi query database server-side. Skrip otomatisasi ditulis dengan Puppeteer untuk scraping rating produk dan ulasan yang hilang secara otomatis.

Gallery
ForgeMoist — Skincare Recommender & Analysis screenshot 1
ForgeMoist — Skincare Recommender & Analysis screenshot 2
ForgeMoist — Skincare Recommender & Analysis screenshot 3
ForgeMoist — Skincare Recommender & Analysis screenshot 4
ForgeMoist — Skincare Recommender & Analysis screenshot 5