Matera Digital

AnimalSounds

Project Write-up

AnimalSounds · Static Next.js 14 soundboard for GitHub Pages

A static Next.js 14 soundboard built with Bun, NextUI, and Tailwind CSS. Audio ships as offline-ready MP3s from public/audio, imagery from bundled assets with optional Pexels enrichment, and analytics/favorites persist locally in localStorage. Deployed to GitHub Pages.
Problem

User need

I wanted a simple, offline-capable soundboard app to learn static export with Next.js 14 and Bun. The app needed to ship its own audio files so it works without a network, keep favorites and usage stats without a backend, and deploy cleanly to GitHub Pages with proper base path handling.

Solution

What I built

A static Next.js 14 soundboard deployed to GitHub Pages. Audio ships from public/audio as offline-ready MP3s, and imagery comes from bundled assets with optional Pexels enrichment. Analytics and favorites persist locally in localStorage — no server required. A GitHub Actions workflow handles the static export with NEXT_PUBLIC_BASE_PATH injection so asset paths resolve correctly under the GitHub Pages subdirectory.

User interface

  • Navbar with navigation and theme toggle
  • Hero section introducing the soundboard
  • Filters for browsing sounds by category
  • Favorites bar for quick access to saved sounds
  • Sound cards with playback controls
  • Stats overview showing usage analytics
  • NextUI components with Tailwind CSS styling

Technical implementation

  • Next.js 14 static export for GitHub Pages
  • lib/base-path.js for base path resolution in static hosting
  • lib/analytics.js for local analytics load/save/summarize
  • localStorage persistence for favorites and usage stats
  • GitHub Actions workflow with NEXT_PUBLIC_BASE_PATH injection
  • Optional Pexels API for image enrichment (disabled during static export)
  • Offline-ready MP3s shipped from public/audio
My Role

What I did

  • Solo developer — built the entire application (1 contributor)
  • Configured Next.js 14 static export with Bun for GitHub Pages deployment
  • Built soundboard components: navbar, hero, filters, favorites-bar, sound-card, stats-overview, theme-toggle, providers
  • Implemented base path resolution for correct asset paths under GitHub Pages
  • Built local analytics and favorites persistence with localStorage
  • Set up GitHub Actions workflow with NEXT_PUBLIC_BASE_PATH injection
  • Integrated optional Pexels image enrichment
What's in the Repo

Real artifacts you can verify

  • GitHub repo: github.com/BradleyMatera/AnimalSounds
  • Live demo: bradleymatera.github.io/AnimalSounds
  • Created: October 26, 2024
  • Commits: 23 commits, 1 contributor
  • Languages: JavaScript (97.7%), CSS (2.3%)
  • License: MIT
  • Components: navbar, hero, filters, favorites-bar, sound-card, stats-overview, theme-toggle, providers
  • Deployment: GitHub Actions workflow publishes static export to Pages
  • Honest limitations: Analytics and favorites stay in localStorage (no server persistence). Pexels API disabled during static export. No backend — fully client-side.
Tech Stack

Technologies used

Next.js 14BunNextUITailwind CSSJavaScriptlocalStorageGitHub PagesGitHub Actions