Algorithmic Visualizer

Deskripsi Singkat

Algorithmic Visualizer adalah sebuah platform edukasi interaktif yang dibangun dengan React.js, dirancang untuk mengubah algoritma sorting yang abstrak menjadi animasi yang dinamis dan mudah dicerna. Proyek ini bukan sekadar aplikasi CRUD biasa, melainkan sebuah demonstrasi kemampuan front-end dalam menangani logika kompleks, manajemen state yang canggih, dan rendering dinamis untuk memecahkan masalah non-trivial.

Fitur Unggulan

Proyek ini dilengkapi dengan fitur-fitur canggih yang dirancang untuk memberikan pengalaman belajar yang mendalam dan interaktif:

• Visualisasi Multi-Algoritma: Mendukung beberapa algoritma sorting klasik, termasuk:

  • Bubble Sort
  • Selection Sort
  • Merge Sort (menunjukkan kemampuan menangani rekursi)

• Kontrol Penuh Atas Animasi:

  • Eksekusi Langkah-demi-Langkah: Tombol Play, Pause, dan Next Step memberikan kontrol penuh kepada pengguna untuk menganalisis setiap operasi perbandingan dan pertukaran.
  • Kecepatan Dinamis: Slider untuk menyesuaikan kecepatan animasi secara real-time.
  • Ukuran Data Fleksibel: Atur jumlah elemen dalam array (dari 10 hingga 200) untuk melihat bagaimana performa algoritma berubah dengan skala data yang berbeda.

• Panel Kode & Penjelasan Interaktif:

  • Sinkronisasi Visual & Kode: Saat animasi berjalan, baris pseudocode yang relevan akan ikut menyala (highlight), menghubungkan secara langsung antara teori dan praktik.
  • Penjelasan Real-Time: Sebuah kotak penjelasan dinamis memberikan deskripsi tekstual tentang apa yang sedang terjadi di setiap langkah ("Membandingkan nilai X dengan Y...", "Melakukan pertukaran...").

• Desain Modern & Responsif: Dibangun dengan antarmuka yang bersih, modern, dan responsif, memberikan pengalaman pengguna yang profesional di berbagai ukuran layar.

Tumpukan Teknologi

• React.js: Untuk membangun antarmuka pengguna yang reaktif dan berbasis komponen.
• React Hooks (useState, useEffect, useRef): Untuk manajemen state dan siklus hidup komponen.
• CSS Modern: Styling canggih dengan variabel, Flexbox, dan transisi untuk UI yang mulus.
• JavaScript (ES6+): Untuk implementasi logika algoritma yang bersih dan efisien.

Instalasi & Menjalankan Secara Lokal

Untuk menjalankan proyek ini di lingkungan pengembangan Anda, ikuti langkah-langkah berikut:

1. Clone repositori ini:

   git clone https://github.com/your-username/algorithmic-visualizer.git

2. Masuk ke direktori proyek:

   cd algorithmic-visualizer

3. Install semua dependency yang dibutuhkan:

   npm install

4. Jalankan aplikasi:

   npm run dev

   Aplikasi akan tersedia di http://localhost:5173 (atau port lain yang tersedia).