OwlMusic

## Inspiration

Most music apps are designed around discovery and recommendation. For people with a personal music library, however, the basic experience can still feel fragmented: finding an album, resuming playback, managing a queue, and moving between desktop and mobile are often more difficult than they should be.

I built OwlPlayer to make personal music feel like a first-class experience: fast, focused, and easy to use.

## What We Built

OwlPlayer is a responsive music player for managing and enjoying a personal library. The backend scans and indexes local media, exposes an authenticated API, and handles streaming and library data. The React and TypeScript frontend provides library browsing, search, artist following, queue management, playback controls, mobile navigation, and administrative tools.

Playback state is kept separate from the visual interface so that users can navigate through the application without losing their current track or queue. Tracks are loaded and prefetched as needed, while loading, empty, and error states are treated as normal parts of the experience rather than edge cases.

## How We Built It

We designed the application around a small set of clear boundaries:

• The media service owns scanning, indexing, metadata, authentication, and streaming.
• The frontend owns navigation, presentation, and user interaction.
• The player store provides one consistent source of truth for playback state.
• Automated tests verify API behavior, state transitions, URL handling, and important mobile workflows.

We iterated by focusing on real listening flows first: opening the app, finding something to play, navigating while music continues, and returning later without losing context.

## What We Learned

The biggest lesson was that an audio player is a state machine, not just a play button. Playback can change because of user actions, buffering, navigation, browser restrictions, or the end of a track. Modeling those transitions explicitly made the application more predictable.

We also learned how much platform behavior matters. Mobile browsers, especially iOS, impose restrictions around audio sessions and user interaction. Reliable playback required careful handling of stream URLs, asynchronous loading, prefetching, and recovery from interruptions.

## Challenges

The hardest parts were keeping the interface synchronized with asynchronous playback, supporting inconsistent metadata across personal libraries, and making scans safe to repeat without creating duplicate records. We also had to balance a rich desktop experience with a compact mobile layout while preserving the same core workflows.

These challenges shaped OwlPlayer into more than a collection of screens. They led to a system that treats playback continuity, library integrity, and responsive behavior as core product requirements.

## What's Next

The next steps are improving metadata management, making library indexing even faster, and expanding cross-device playback and synchronization. The long-term goal is to keep OwlPlayer simple enough for everyday listening while giving personal music libraries the care they deserve.

What's next for OwlMusic

Built With

• css3
• go
• html5-audio
• mobile-first-design
• react
• responsive-design
• rest-api
• typescript
• vite
• vitest
• zustand