Loading project details.
Merio
A DJ profile and listening website that brings mixtape-inspired visuals, a searchable mix catalog, and SoundCloud playback into one focused experience.
Context & problem
Merio needed a focused artist profile where the music and visual identity could live together. The goal was a small website with deliberate UI/UX: introduce the DJ, help visitors find a mix, and provide a clear path to listen or send a request.
Outcome
Visitors can explore mixes, filter special requests, and keep listening through a persistent mini player on desktop and mobile.
Engineering decisions
Designed and built a mixtape- and flyer-inspired interface around MERIO’s existing banner, artwork, and Indonesian copy. Used bold typography and contrasting section colors to establish identity, then kept the listening room task-focused with title search, special-request filters, sorting, and progressive loading. Integrated the official SoundCloud player with previous/next controls and a persistent mini player. The initial catalog is rendered on the server, with cached metadata refresh and a local snapshot fallback when upstream access fails.
My contribution
Shaped the visual direction, content hierarchy, responsive layout, and frontend implementation around a DJ’s music and existing artwork.
Built mix discovery with title search, special-request filtering, sorting, and progressive loading.
Connected SoundCloud playback to previous/next controls, automatic continuation, and a persistent mini player.
Handled loading, empty, refresh, and playback error states with direct links to the original mixes.
Included keyboard navigation, visible focus states, touch-friendly controls, and reduced-motion support.
Trade-offs
- Kept the scope focused on artist identity and listening rather than adding accounts, booking infrastructure, or a custom audio backend.
- Kept audio hosted by SoundCloud; cached catalog metadata and a local snapshot provide a fallback for discovery, while playback still depends on the provider.