ProjectsJanuary 23, 2026

NiceGuy Sound Board

🎵 NiceGuy SoundBoard

NiceGuy SoundBoard adalah aplikasi web interaktif sederhana yang memungkinkan pengguna memutar berbagai efek suara meme populer secara instan. Dibangun menggunakan React dan Vite dengan styling modern menggunakan Tailwind CSS. Proyek ini dirancang untuk kecepatan dan kemudahan penggunaan, mendukung pemutaran audio melalui klik tombol maupun shortcut keyboard.

🌟 Fitur Utama

Pemutaran Audio Instan: Memutar klip audio pendek (meme sounds) tanpa delay.
Keyboard Shortcuts: Tekan tombol keyboard tertentu untuk memutar suara tanpa harus mengklik (Keybinds tersedia di bawah).
Visualisasi Audio: Efek animasi bar sederhana pada kartu saat audio sedang diputar.
Desain Responsif: Tampilan grid yang rapi dengan Tailwind CSS.
Manajemen Playback: Fitur toggle (Play/Pause) dan reset otomatis saat audio diputar ulang.

🛠️ Teknologi yang Digunakan

Proyek ini dibangun menggunakan stack teknologi modern:

React (v19) - Library UI utama.
Vite - Build tool yang cepat untuk pengembangan frontend.
Tailwind CSS (v4) - Framework CSS utility-first untuk styling.
Lucide React - Koleksi ikon yang ringan dan fleksibel.
Framer Motion / CSS Animation - Untuk efek visual pada kartu suara.

🎹 Daftar Shortcut Keyboard

Anda dapat menggunakan tombol berikut pada keyboard untuk memutar suara secara cepat:

Tombol (Key)	Nama Suara / Judul	Deskripsi Singkat
Q	Get Out	Efek suara "Get Out"
W	Oh Hell Nah	Efek suara viral "Oh Hell Nah"
E	FAHHHH	Efek suara teriak
R	4 (China)	Meme suara
T	5	Meme suara instan
A	Bahlil Ngolaah	Suara Bahlil
S	Lagu Kebangsaan	Bigmo sound
D	Iziiiin / Coin	Efek suara Izin atau Koin

Catatan: Pastikan keyboard Anda dalam mode input bahasa Inggris (US) standar agar keybind berfungsi dengan baik.

📂 Struktur Proyek

Text

soundboard/
├── public/
│   ├── audio/       # File audio (.mp3)
│   └── image/       # Aset gambar untuk kartu
├── src/
│   ├── components/
│   │   ├── card.tsx         # Komponen kartu musik & logika audio
│   │   ├── header.tsx       # Header melayang
│   │   ├── dotBG.tsx        # Latar belakang bermotif dot
│   │   └── ...
│   ├── App.jsx              # Komponen utama & data mapping
│   ├── main.jsx             # Entry point aplikasi
│   └── index.css            # Import Tailwind CSS
├── package.json
└── vite.config.js

🚀 Cara Menjalankan (Instalasi)

Ikuti langkah-langkah berikut untuk menjalankan proyek ini di komputer lokal Anda:

1. Clone Repositori

Bash

git clone [https://github.com/najmifaza/soundboard.git](https://github.com/najmifaza/soundboard.git)
cd soundboard

2. Install Dependencies

Pastikan Anda sudah menginstall Node.js. Gunakan npm atau pnpm (disarankan jika ada pnpm-lock.yaml).

Bash

npm install
# atau
pnpm install

3. Jalankan Mode Development

Bash

npm run dev
# atau
pnpm dev

Buka browser dan akses alamat yang muncul di terminal (biasanya http://localhost:5173).

4. Build untuk Production

Jika ingin men-deploy aplikasi:

Bash

npm run build

🤝 Kontribusi

Kontribusi selalu diterima! Jika Anda ingin menambahkan suara baru atau fitur lain:

Fork repositori ini.
Buat branch fitur baru (git checkout -b fitur-keren).
Commit perubahan Anda (git commit -m 'Menambah suara baru').
Push ke branch (git push origin fitur-keren).
Buat Pull Request.

Related projects

Rumio.id: Platform Marketing & Eksplorasi Properti Generasi Baru

Rumio.id adalah platform pemasaran dan eksplorasi properti komprehensif yang dirancang untuk menghubungkan pencari, pemilik, dan agen properti dengan pengalaman interaktif 360° menggunakan teknologi web modern.

Read case study View project

Panggih Sedulur: Kuisioner Minat Bakat UKM Unsoed

Platform kuisioner interaktif untuk UKM Unsoed dengan sistem scoring 5 kategori utama, branching questions, dan rekomendasi personalisasi.

Read case study View project

Website Resmi BEM Universitas Jenderal Soedirman

Pengembangan dan pengelolaan website resmi Badan Eksekutif Mahasiswa Universitas Jenderal Soedirman (BEM-U) menggunakan WordPress, Elementor, dan custom inject HTML.

Read case study View project

URL Shortener BEM Unsoed Edition

Pengembangan aplikasi pemendek URL profesional dengan antarmuka Glassmorphism untuk kebutuhan publikasi BEM Universitas Jenderal Soedirman.

Read case study View project

GrowTo: Platform Direktori Delivery Order Purwokerto

Pengembangan platform informasi layanan delivery order untuk area Purwokerto sebagai Final Project program Soedirman Digital School 2025.

Read case study View project

Edu-Tajwid: Platform Edukasi Digital Ilmu Tajwid

TajwidApps adalah platform edukasi berbasis web yang dirancang untuk membantu pengguna mempelajari hukum bacaan Al-Qur'an (Tajwid), makharijul huruf, dan sifat huruf secara fasih dan tartil.

Read case study View project

Transformasi Digital Rabiha Tour & Travel: Branding dan Pengembangan Website

Pengembangan identitas visual, desain konten media sosial menggunakan CorelDRAW & Photoshop, serta pembangunan website company profile menggunakan WordPress Elementor.

Read case study

Najmi Calculator: Kalkulator Interaktif dengan Fitur Real-Time

Pengembangan aplikasi kalkulator responsif menggunakan Vanilla JavaScript dengan fitur Dark Mode dan sistem Error Handling kustom.

Read case study View project