Wavify Case Study

Situation & Problem Statement

Music is an integral part of deep-work programming sessions. However, mainstream audio streaming applications are often locked behind paid subscription tiers, run heavyweight desktop clients that consume gigabytes of memory, or distract developers with visual social feeds and podcast suggestions.

Developers needed a clean, web-based music player tailored for coding sessions that could:

1. Provide uninterrupted focus without subscription barriers.
2. Recommend tracks dynamically based on developer focus states—such as "deep debugging", "late-night flow", or "code review".
3. Maintain continuous audio playback during navigation without heavy memory overhead.

Project Scope & Objectives

I built Wavify to combine lightweight web audio streaming with context-aware Generative AI recommendations:

1. Public Audio Sourcing: Stream audio tracks reliably from public video streams without proprietary API subscriptions.
2. AI Recommendation Engine: Leverage the Google Gemini API to parse user intent, mood, and developer workflow context into custom curated playlists.
3. Persistent Audio Architecture: Prevent audio playback interruption when users browse libraries, view lyrics, or switch pages.
4. Sub-second Performance: Ship a minimal client bundle with instant initial loads.

System Architecture

[Developer Enters Mood / Context]
              │
              ▼
    [Next.js Server Component]
              │
    ┌─────────┴─────────┐
    ▼                   ▼
[Google Gemini API]     [Supabase Auth & Playlists]
(Structured JSON Tracks)       │
    │                          │
    └─────────┬────────────────┘
              ▼
[Global Zustand Audio Store]
              │
              ▼
[Decoupled Audio Controller] ───> [Persistent Background Playback]

1. Gemini AI Prompt Engineering & Structured Output

Integrated the official @google/genai SDK using structured system instructions:

• Formatted prompt templates with temperature controls (0.4 for focused recommendations, 0.8 for eclectic mixes).
• Constrained model output to strict JSON schemas specifying track name, artist, tempo category, and acoustic rationale.

const prompt = `You are an AI DJ for software developers.
Given user context: "${userContext}",
Recommend 5 focus-friendly tracks with acoustic or instrumental textures.
Respond strictly in JSON matching the TrackSchema interface.`;

2. Global State Coordination with Zustand

Decoupled audio controls from the presentation layer using a centralized Zustand store:

• Manages queue index, repeat modes, volume, timeline scrubbing, and cross-fade states.
• The <AudioController /> component resides at the root layout level, ensuring audio never pauses or clips when users navigate between routes.

3. Supabase Integration

• Built user authentication and database models in Supabase for saving custom playlists, liking tracks, and syncing listening histories across devices.

Application Interface

Below is a capture of the live Wavify developer streaming interface:

Measurable Results

• Page Load Time: Initial cold load in 1.1s with sub-second subsequent client transitions.
• Memory Consumption: Consumes ~65MB in browser memory compared to 600MB+ for desktop streaming apps.
• User Engagement: Developers report significantly reduced context switching and improved flow retention during long coding sprints.
• Production URL: Live platform accessible at wavify.acharyanischal.com.np with open-source code on GitHub.

Frequently Asked Questions

How does Gemini personalize developer music suggestions?

Gemini analyzes natural-language inputs (e.g. "debugging a complex race condition in PostgreSQL") and maps them to energy levels, acoustic densities, and beats-per-minute (BPM) profiles suited for deep cognitive focus.

Does navigating between pages cause audio stutter?

No. Because playback is controlled via a singleton audio wrapper orchestrated by Zustand at the layout level, route changes in Next.js do not unmount the player or interrupt the audio stream.