Perfume Lab 🧪✨

Perfume Lab adalah platform inovatif yang menggabungkan seni wewangian dengan teknologi AI untuk membantu Anda menemukan atau merancang parfum impian Anda. Dengan visualisasi interaktif dan analisis cerdas, kami membawa pengalaman laboratorium parfum profesional langsung ke layar Anda.

✨ Fitur Utama

• Interactive Lab Visualizer: Rancang parfum Anda dengan memilih top, middle, dan base notes. Lihat perubahan warna cairan dalam botol Erlenmeyer secara real-time berdasarkan kombinasi yang Anda pilih.
• AI-Powered Recommendation: Sistem analisis cerdas yang memprediksi karakter aroma, ketahanan (longevity), dan pancaran aroma (sillage) berdasarkan preferensi Anda.
• Product Discovery: Jelajahi koleksi parfum premium dengan filter yang mudah digunakan dan sistem pencarian yang terintegrasi.
• Micro-Animations & Premium UI: Desain berbasis glassmorphism dengan animasi halus menggunakan Framer Motion untuk pengalaman pengguna yang mewah.
• Brand Partner Hub: Platform kolaborasi untuk brand parfum lokal maupun internasional.
• AI Chatbot Assistant: Asisten virtual yang siap membantu Anda menjawab pertanyaan seputar dunia parfum.

🚀 Teknologi

Proyek ini dibangun menggunakan stack teknologi modern untuk performa dan pengalaman pengembang yang optimal:

• Frontend: React 18 dengan Vite
• Bahasa: TypeScript
• Styling: Tailwind CSS
• Komponen: Shadcn UI (Radix UI)
• Animasi: Framer Motion
• Icons: Lucide React
• Charts: Recharts
• State Management: TanStack Query
• Routing: React Router DOM

🛠️ Instalasi & Pengembangan

Pastikan Anda telah menginstal Node.js di sistem Anda.

1. Clone repository:

   git clone https://github.com/username/perfume-lab.git
   cd perfume-lab

2. Instal dependensi:

   npm install

3. Jalankan server pengembangan:

   npm run dev

4. Build untuk produksi:

   npm run build

🧪 Pengujian

Proyek ini menggunakan Vitest untuk unit testing.

npm run test           # Jalankan tes sekali
npm run test:watch     # Jalankan tes dalam mode watch

📁 Struktur Folder

src/
├── assets/      # Gambar, logo, dan aset statis
├── components/  # Komponen UI yang reusable (Shadcn + Custom)
├── data/        # Mock data (perfumes, notes, dll)
├── hooks/       # Custom React hooks
├── lib/         # Konfigurasi utilitas (utils, api, dll)
├── pages/       # Komponen halaman utama (Lab, Marketplace, dll)
├── types/       # Definisi interface TypeScript
└── App.tsx      # Entry point aplikasi & Routing

---