Membangun Multi-step Quiz Interaktif Berkinerja Tinggi dengan Next.js App Router

Antarmuka pengguna (UI) berupa kuis beberapa langkah (multi-step quiz) sering kali menjadi gerbang utama aplikasi modern untuk mengumpulkan preferensi pengguna. Di dunia skincare, kuis ini harus terasa nyaman, cepat, dan intuitif agar calon pengguna tidak meninggalkan halaman di tengah jalan.

Pada pengembangan ForgeMoist, saya berfokus mendesain halaman kuis rekomendasi yang ramah perangkat seluler, memiliki animasi transisi yang mulus, dan berkinerja tinggi tanpa menggunakan pustaka pihak ketiga yang rumit.

Berikut adalah beberapa tips dan teknik implementasi frontend yang saya gunakan.

---

1. Arsitektur State Sederhana untuk Setiap Langkah

Alih-alih menggunakan pustaka manajemen state global yang berat (seperti Redux), kuis multi-langkah ini cukup dikelola menggunakan hook useState bawaan React.

Kita membagi kuis menjadi 4 status indeks langkah:

1. Langkah 0: Pemilihan Tipe Kulit (Normal, Berminyak, Kering, Kombinasi, Sensitif).
2. Langkah 1: Pemilihan Masalah Kulit Utama (Bisa memilih lebih dari satu).
3. Langkah 2: Pemilihan Preferensi Tekstur Produk (Gel, Cream, Lotion).
4. Langkah 3: Menampilkan Hasil Rekomendasi (Loading statis dilanjutkan dengan rendering produk).

const [currentStep, setCurrentStep] = useState(0);
const [selectedSkinType, setSelectedSkinType] = useState<string>("");
const [selectedConcerns, setSelectedConcerns] = useState<string[]>([]);
const [selectedTexture, setSelectedTexture] = useState<string>("");

---

2. Animasi Transisi & Indikator Progres Minimalis

Untuk menyajikan pengalaman premium, indikator progres (progress bar) dinamis diletakkan di bagian atas halaman kuis. Lebar progres dihitung secara otomatis berdasarkan indeks langkah aktif:

function ProgressBar({ step, total }: { step: number; total: number }) {
  return (
    <div className="w-full max-w-md mx-auto mb-10">
      <div className="progress-track bg-stone-100 rounded-full h-1.5 overflow-hidden">
        <div
          className="progress-fill bg-stone-900 h-full transition-all duration-500 ease-out"
          style={{ width: `${(step / (total - 1)) * 100}%` }}
        />
      </div>
    </div>
  );
}

Penggunaan transisi CSS transition-all duration-500 ease-out bawaan Tailwind CSS memastikan pergerakan garis indikator berjalan sangat mulus ketika pengguna beralih langkah.

---

3. UI/UX Pilihan yang Hidup (Interactive Micro-interactions)

Agar elemen pilihan kuis terasa interaktif, saya menambahkan micro-animations pada kartu opsi. Saat pengguna mengarahkan kursor (hover) atau memilih opsi tersebut, warnanya akan berubah secara elegan dengan efek bayangan tipis:

<button
  className={cn(
    "p-6 rounded-3xl border text-left transition-all duration-300",
    selectedSkinType === item.value
      ? "border-stone-900 bg-stone-50/50 shadow-md translate-y-[-2px]"
      : "border-stone-200 hover:border-stone-400"
  )}
  onClick={() => setSelectedSkinType(item.value)}
>
  <!-- Ikon & Konten Opsi -->
</button>

---

4. Lazy Loading & API Handshake yang Mulus

Saat pengguna menekan tombol "Dapatkan Rekomendasi" di langkah terakhir, status kuis dialihkan ke layar pemuatan (loading state). Komponen menampilkan spinner loading berbasis SVG dari pustaka ikon lucide-react:

const fetchRecommendations = async () => {
  setIsLoading(true);
  try {
    const response = await fetch(
      `/api/recommend?skin_type=${selectedSkinType}&concerns=${selectedConcerns.join(',')}&form=${selectedTexture}`
    );
    const data = await response.json();
    setResults(data.recommendations);
    setCurrentStep(3); // Pindah ke halaman hasil
  } catch (error) {
    console.error("Gagal memuat rekomendasi:", error);
  } finally {
    setIsLoading(false);
  }
};

Dengan mengisolasi logika pemuatan dan memisahkan halaman hasil rekomendasi, antarmuka pengguna tetap terasa responsif bahkan saat melakukan pemrosesan data di belakang layar. Hasilnya adalah kuis skincare yang interaktif, berkinerja tinggi, dan siap memberikan kepuasan navigasi instan bagi pengunjung situs portofolio Anda.