ProjectsJanuary 23, 2026

NiceGuy Sound Board

🎵 NiceGuy SoundBoard

NiceGuy SoundBoard is a simple interactive web application that allows users to instantly play various popular meme sound effects. It is built using React and Vite, featuring modern styling with Tailwind CSS. This project is designed for speed and ease of use, supporting audio playback via button clicks and keyboard shortcuts.

🌟 Key Features

Instant Audio Playback: Plays short audio clips (meme sounds) without delay.
Keyboard Shortcuts: Press specific keyboard keys to play sounds without clicking (Keybinds are listed below).
Audio Visualization: Simple animated bar effects on the card while the audio is playing.
Responsive Design: A neat grid layout utilizing Tailwind CSS.
Playback Management: Toggle feature (Play/Pause) and automatic reset when audio is replayed.

🛠️ Technologies Used

This project is built using a modern technology stack:

React (v19) - The core UI library.
Vite - A fast build tool for frontend development.
Tailwind CSS (v4) - A utility-first CSS framework for styling.
Lucide React - A lightweight and flexible icon collection.
Framer Motion / CSS Animation - For visual effects on the sound cards.

🎹 Keyboard Shortcuts List

You can use the following keyboard keys to quickly play sounds:

Key (Button)	Sound Name / Title	Short Description
Q	Get Out	"Get Out" sound effect
W	Oh Hell Nah	Viral "Oh Hell Nah" sound
E	FAHHHH	Screaming sound effect
R	4 (China)	Meme sound
T	5	Instant meme sound
A	Bahlil Ngolaah	Bahlil's voice
S	Lagu Kebangsaan	Bigmo's anthem
D	Iziiiin / Coin	Permission or Coin sound

Note: Ensure your keyboard is set to standard English (US) input mode for the keybinds to work properly.

📂 Project Structure

Text

soundboard/
├── public/
│   ├── audio/       # Audio files (.mp3)
│   └── image/       # Image assets for cards
├── src/
│   ├── components/
│   │   ├── card.tsx         # Music card component & audio logic
│   │   ├── header.tsx       # Floating header
│   │   ├── dotBG.tsx        # Dot-patterned background
│   │   └── ...
│   ├── App.jsx              # Main component & data mapping
│   ├── main.jsx             # Application entry point
│   └── index.css            # Tailwind CSS imports
├── package.json
└── vite.config.js

🚀 How to Run (Installation)

Follow these steps to run the project on your local machine:

1. Clone the Repository

Bash

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

2. Install Dependencies

Ensure you have Node.js installed. Use npm or pnpm (recommended if there's a pnpm-lock.yaml).

Bash

npm install
# or
pnpm install

3. Run Development Mode

Bash

npm run dev
# or
pnpm dev

Open your browser and navigate to the address shown in the terminal (usually http://localhost:5173).

4. Build for Production

If you want to deploy the application:

Bash

npm run build

🤝 Contribution

Contributions are always welcome! If you'd like to add new sounds or other features:

Fork this repository.
Create a new feature branch (git checkout -b cool-feature).
Commit your changes (git commit -m 'Added new sound').
Push to the branch (git push origin cool-feature).
Open a Pull Request.

Related projects

Rumio.id: Next-Generation Property Marketing & Exploration Platform

Rumio.id is a comprehensive property marketing and exploration platform designed to connect seekers, owners, and property agents with an interactive 360° experience using modern web technologies.

Read case study View project

Panggih Sedulur: Unsoed Student Club Aptitude Questionnaire

An interactive questionnaire platform for Unsoed student clubs, featuring a 5-category scoring system, branching questions, and personalized recommendations.

Read case study View project

Official Website of BEM Universitas Jenderal Soedirman

Development and management of the official website for the Student Executive Board of Universitas Jenderal Soedirman (BEM-U) using WordPress, Elementor, and custom HTML inject.

Read case study View project

URL Shortener BEM Unsoed Edition

Development of a professional URL shortener application with a Glassmorphism interface for the publication needs of BEM Universitas Jenderal Soedirman.

Read case study View project

GrowTo: Delivery Order Directory Platform for Purwokerto

Development of an information platform for delivery order services in the Purwokerto area as the Final Project for the Soedirman Digital School 2025 program.

Read case study View project

Edu-Tajwid: Digital Educational Platform for Tajweed

TajwidApps is a web-based educational platform designed to help users learn the rules of Quranic recitation (Tajweed), articulation points (makharijul huruf), and characteristics of letters fluently.

Read case study View project

Digital Transformation of Rabiha Tour & Travel: Branding and Website Development

Development of a visual identity, social media content design using CorelDRAW & Photoshop, and building a company profile website using WordPress Elementor.

Read case study

Najmi Calculator: Interactive Calculator with Real-Time Features

Development of a responsive calculator app using Vanilla JavaScript, featuring Dark Mode and a custom Error Handling system.

Read case study View project