Nuxar Perfumery
Full-Stack Developer
Gambaran Umum
Website merek Parfum tingkat Tinggi berselimutkan pesona Animasi Cinematik 3 Dimensi, scroll Trigger serta partikel debu menyatu. Engine didorong dengan performa Railway dalam naungan mesin Golang.
Masalah
Merek wewangian premium membutuhkan kehadiran digital yang sesuai dengan kemewahan dan kecanggihan produk mereka. Template e-commerce standar gagal menyampaikan seni, emosi, dan keahlian di balik wewangian halus. Nuxar Perfumery membutuhkan website yang menghadirkan pengalaman merek sinematik dan imersif — bukan sekadar katalog produk — dengan animasi dramatis, efek 3D, dan antarmuka tema gelap premium yang mencerminkan keanggunan koleksi wewangian mereka.
Solusi
Nuxar Perfumery adalah website wewangian sinematik kelas atas yang dibangun dengan React 19, TypeScript, dan Vite. Situs ini menampilkan animasi scroll bertenaga GSAP, efek 3D Three.js, bidang partikel kustom, tema gelap canggih dengan efek glassmorphism, kursor kustom, dan animasi partikel mengambang berbasis kanvas. Chatbot AI terintegrasi bertenaga Google Gemini menyediakan layanan konsultasi wewangian. Backend menggunakan Supabase untuk data produk dan Google Generative AI untuk kecerdasan percakapan, dengan rate limiting Upstash Redis dan perlindungan bot Cloudflare Turnstile.
Fitur Unggulan
Animasi GSAP Sinematik
Animasi scroll-triggered tingkat profesional dengan efek typewriter, transisi blur-reveal, reveal clip-path, dan animasi elastis. Cubic-bezier kustom untuk gerakan dramatis dan halus.
Efek 3D & Sistem Partikel
Integrasi Three.js untuk elemen visual 3D. Bidang partikel mengambang berbasis kanvas dengan efek paralaks. Overlay tekstur noise dan aberasi kromatik untuk atmosfer sinematik.
Konsultan Wewangian AI
Chatbot bertenaga Google Gemini untuk rekomendasi wewangian yang dipersonalisasi, edukasi catatan wewangian, dan penemuan produk. Respons AI streaming untuk pengalaman percakapan real-time.
Tema Gelap Premium
Skema warna hitam dan merah canggih dengan efek glassmorphism. Sepenuhnya responsif dengan optimasi mobile-first dan dukungan reduced motion untuk aksesibilitas.
Keamanan Enterprise
Rate limiting Upstash Redis (algoritma token bucket) untuk perlindungan API. Cloudflare Turnstile untuk perlindungan bot yang ramah privasi pada formulir kontak.
Arsitektur
Frontend React 19 + TypeScript dibangun dengan Vite. GSAP (ScrollTrigger) menangani animasi berbasis scroll. Three.js via @react-three/fiber menyediakan rendering 3D. Google Generative AI (Gemini Pro) mendukung chatbot AI dengan Vercel AI SDK untuk respons streaming. Supabase berfungsi sebagai backend untuk data produk dan konten blog. Upstash Redis menyediakan infrastruktur rate limiting.
Cara Penggunaan
Kunjungi website untuk merasakan halaman arahan sinematik dengan animasi scroll GSAP dan efek 3D. Jelajahi katalog wewangian dengan kartu produk interaktif, informasi wewangian mendetail, dan harga. Gunakan chatbot AI untuk rekomendasi wewangian yang dipersonalisasi berdasarkan preferensi. Formulir kontak dilindungi oleh Cloudflare Turnstile untuk pencegahan spam. Pengguna admin mengelola katalog produk melalui database Supabase secara langsung.
Dampak & Hasil
Menghadirkan pengalaman merek mewah yang membedakan Nuxar Perfumery dari pesaing e-commerce standar. Animasi GSAP dan efek 3D Three.js menciptakan koneksi emosional dengan pengunjung, meningkatkan keterlibatan dan waktu-kunjungan. Chatbot AI Google Gemini menyediakan konsultasi wewangian yang dipersonalisasi 24/7, mengurangi beban dukungan pelanggan sambil meningkatkan tingkat konversi. Rate limiting Upstash Redis mencegah penyalahgunaan API sambil mempertahankan performa responsif.