← Work

MC Sounds

A fast, static web player to explore, search, and listen to every Minecraft Java Edition sound.

Year2025
RoleDesign · Development
CategoryTool · Frontend
Live site
MC Sounds — screenshot
Context

Minecraft has hundreds of unique sounds, but there's no good way to browse them outside the game. MC Sounds solves that: instant search with relevance ranking, category filtering, favorites, and a floating player with queue management — all running entirely client-side with zero backend.

Challenge

Minecraft's audio is copyrighted by Mojang and must not be redistributed. The app had to stream audio directly from Mojang's content-addressed asset system without ever storing or serving .ogg files, while still feeling fast and responsive with hundreds of sounds.

Key Decisions

Zero backend, 100% static

The entire app is a static build — no server, no database. Sound metadata is a pre-generated manifest mapping names to SHA-1 hashes, resolved at runtime to Mojang's CDN URLs.

Mojang's asset system

Instead of committing copyrighted audio, the app uses Mojang's official content-addressed storage. Each sound hash maps to a URL on resources.download.minecraft.net, streamed through an audio element.

Virtualized grid + instant search

react-window powers a virtualized grid for smooth scrolling through hundreds of sounds. Client-side filtering with relevance ranking keeps search instant.

Floating player with queue

A persistent player bar with play/pause, next/previous, loop, seek, and minimize. Users can build queues, reorder by selecting, or "Play all" from any context.

Stack
ReactTypeScriptViteTailwindCSSreact-windowVitest
Results

Fully deployed on Vercel. Instant search, floating player with queue, persistent favorites, light/dark theme, and download for any sound. GitHub Actions workflow for automated deployment.

Learnings
  1. Working around copyright constraints (no audio redistribution) forced a creative architecture that ended up being simpler and more deployable than a backend approach.
  2. Virtualized lists are essential when rendering hundreds of items — without react-window, the grid would choke on initial render.
Next ProjectKime