Effects 🔊

A sound effects soundboard built with Svelte 5 and Vite.

🌐 Live demo: chenpeleg.github.io/effects

Features

• 🎵 25+ one-click sound effects (laughing, screaming, alarms, songs, and more)
• 🗂️ Filter sounds by category: General, Funny, Scary, Games, Song, Rude
• 🌊 Animated wave indicator while a sound is playing
• ⏹️ Stop button to interrupt any currently playing sound
• 📱 Responsive layout — works on desktop and mobile
• 💾 Optional Firebase backend for saving custom categories (when deployed with Firebase)

Tech Stack

Getting Started

Prerequisites

• Node.js ≥ 18

Install dependencies

npm install

Run the development server

npm run dev

The app will be available at http://localhost:5173.

Available Scripts

Project Structure

src/
├── assets/          # Static assets (audio files, images)
├── config/          # App configuration (env-aware)
├── data/            # Sound card definitions
├── lib/             # Svelte components
│   ├── animation/   # Wave animation component
│   ├── components/  # UI components (cards, header, nav)
│   ├── models/      # Shared types and category definitions
│   ├── router/      # Client-side routing
│   └── style/       # Global styles
├── provider/        # Firebase provider
├── services/        # App services (audio, language, …)
├── store/           # Svelte stores (cards, main state, settings)
└── main.js          # App entry point

Deployment

GitHub Pages

npm run build:pages

The build output lands in build/ and is deployed automatically via GitHub Actions to https://chenpeleg.github.io/effects/.

Firebase Hosting

npm run build:site

Deploy the build/ directory with the Firebase CLI. Firebase mode enables the optional user-login and category-saving features.

License

MIT