Tutorial to Vibe-Code A Music Insights Dashboard 🎧

Guide Personal Agentic AI Cursor Spotify

Introduction

A week ago, I vibe-coded a personalized music insights app using my Spotify and Apple Music data in just five minutes.

In this post, I’ll walk you through how to build your own music dashboard as step-by-step vibe-coding tutorial. The guide is targeted towards beginners with no coding skills required.

My app turned out better than I expected. Think Spotify Wrapped, but deeper insights and always accessible. For inspiration on what you can build with your data, check it out here:

🎵 Explore Tempo Trace AI

TempoTraceAI

▶️ Watch the original vibe-coded demo

📘 Prefer the Traditional Dev Route? If you want to clone my build and plug in your own data, it’s all documented in this my GitHub repo: Tempo Trace AI on GitHub.

🧭 Vibe Coding Tutorial Overview

CategoryDetails
Skill LevelBeginner-friendly
Coding SkillsNone
Time to Build~15 minutes
Pre-requirementsDownload your music streaming data
Tools UsedCursor (or another AI Agent)
OutputCustom dashboard in your local browser

Step-by-Step Guide

1. Download Your Streaming Data (Wherever It May Live!)

📥 Spotify Data

→ Scroll to “Download Your Data”
→ Select “Extended streaming history”

📥 Apple Music Data

→ Sign in with your Apple ID
→ Click “Get a copy of your data”
→ Check only “Apple Media Services”
→ You’ll get a ZIP with your full Track Play History

2. Organize Your Files

  1. Create a folder named TempoTraceAI on your desktop.
  2. Inside, create a Data subfolder and add your downloaded files from Step 1. Unzip files before adding

3. Set Up Cursor

📝 I recommend beginners start with Cursor as it comes ready to go from installation. I personally prefer Goose, which I used to vibe-code my Tempo Trace AI app, but it requires setting up an API key. So use whatever you are comfortable with, but stick with Cursor if you are a beginner.

4. Vibe 🎨

Time to get creative. Decide what insights matter to you and write it into the Agent chat box in the right-hand panel of Cursor. Click enter after your prompt is ready.

Here’s a one-shot prompt I used if you need inspiration:

Scaffold a slick, multi-tab web app called TempoTraceAI that uses my [streaming history in the Data folder] and [optionally, the Concerts file if it exists] to surface deep listening insights.

Features:
The Pulse – Lifetime snapshot of total streams, hours listened, unique artists/albums/songs, and fun stats.
Leaderboard – Top Artists / Albums / Tracks by plays and listening time, with date filtering.
Concert Compass – Compare monthly listen counts for artists before and after I saw them live. Show a bucket list with my top 20 most-played artists, badge the ones I’ve seen.

Make it sleek, modern, and futuristic.

📝 Want to include concert data? See my concerts.json example.

5. Explore, Iterate, & Enhance

After Cursor finishes, you may have to prompt it to open the website for you (click the link it outputs).

The first AI draft is often solid, but don’t stop there. If something looks off or could be cooler, just ask. Here are some examples of areas I refined after the first demo ended:

  • I noticed an issue where the top-played album showed up as NULL. I prompted AI to fix that.
  • There was a bug in the rendering of one of the charts, so I took a screenshot and asked AI to fix it.
  • I wanted deeper charts, so I asked for an “Advanced Insights” tab. I described a few chart ideas and let the AI suggest more. It scaffolded everything in minutes.

📸 Pro tip: You can even take a screenshot of an issue and drop it into Cursor, then explain what you want changed.

Bonus: Add Spotify API Integration

Want to take your dashboard to the next level? Add album artwork and clickable Spotify links to every track, album, and artist.

Get Your Spotify Developer Credentials

  1. Visit Spotify for Developers
  2. Log in with your Spotify account
  3. Create a new app:
    • Click “Create App”
    • Name it something like “My Music Dashboard”
    • Description: “Personal music insights dashboard”
    • Check “Web API” and “Web Playback SDK”
  4. Save your credentials:
    • Copy your Client ID and Client Secret
    • Create a .env file in your project root

Vibe-Code the Integration

Add Spotify API integration to my music dashboard:

1. Create a .env file with SPOTIFY_CLIENT_ID and SPOTIFY_CLIENT_SECRET
2. Add a script that fetches album artwork and Spotify links for all tracks, albums, and artists
3. Update the UI to display album covers instead of generic icons
4. Make each item clickable to open in Spotify

✅ What’s Next?

  • 🌐 Publish it: Want to publish your dashboard to the internet? Check out my Blog Post on Vibe-Coding a Website.
  • 🧠 Remix it: Use this same workflow to vibe-code insights on whatever data matters to you.
  • 📺 Stay Tuned: I’ve got plans to vibe-code similar insights apps on my data from Strava, Goodreads, and much more.