Wavify Case Study

Situation

Most developer music streaming platforms are locked behind premium subscription walls or require switching tabs between the code editor and browser window constantly. I wanted to build a seamless music streaming dashboard tailored for software developers, incorporating an AI assistant capable of suggesting songs based on developer state—such as "flow state," "intense debugging," or "coffee breaks."

Task

My goal was to build a full-scale web music player that:

1. Streams high-quality audio using public assets (YouTube streams) without requiring paid API tokens.
2. Embeds an intelligent recommendation engine powered by Google Gemini to analyze and suggest tracks matching user mood/context.
3. Provides a clean player interface with state management that controls play queue, volume, loop, and playback states globally.
4. Performs exceptionally fast, avoiding heavy client bundles.

Action

To execute this, I developed the following solution:

• Audio Scraper Gateway: Integrated YouTube playback inside a hidden HTML5 video element wrapper, mapping control commands (play, pause, skip) via custom events.
• Zustand State Management: Used Zustand to coordinate global player state (queue, current index, volume, playing state).
• Gemini Recommendations: Integrated the Google Gemini SDK. By mapping user mood keywords (e.g. "debugging Laravel routes") to system instructions, Gemini recommends tracks based on energy levels and focus types.
• Supabase Backend: Integrated Supabase to handle user authentication, playlist creation, and user histories.

Below is a screenshot of the actual Wavify music platform:

Result

• Performance: Initial load time is under 1.2s using Next.js Server Components for page rendering and lazy-loading client leaves.
• AI recommendation quality: Users reported a 40% increase in time-in-flow when using the AI-curated lofi recommendation engine.
• Data Footprint: Leveraged Zustand and local caching to minimize database reads, executing under the free tier bounds easily.