How to Build Spotify Wrapped using Spotify API

In this tutorial, we’ll walk through how to build your own Spotify Wrapped-style app using the Spotify Web API on Emergent - no advanced coding skills required. By the end, you’ll have a fun, shareable web app that lets anyone log in with their Spotify account, view their top artists, tracks, and genres, and even generate a beautiful summary card - just like Spotify Wrapped.

Before we begin, let’s understand what this means in simple terms.

The Spotify API is like a secure bridge between your app and Spotify. Instead of building everything from scratch, your app can simply ask Spotify for information - like “What are this user’s top tracks?” or “Who are their favorite artists?” Spotify then returns this data safely (only after the user gives permission).

Once we have that data, Emergent takes care of everything else - it automatically generates the backend logic, connects your app to Spotify, processes the user’s data, and displays it in a clean, interactive dashboard. You don’t need to worry about coding the authentication or complex visualization yourself - Emergent builds that for you.

By the end of this tutorial, you’ll have:

• A working Spotify login (OAuth) system

• A dashboard that displays your top artists, tracks, and genres

• Interactive charts showing listening patterns

• A “Wrapped Summary Card” you can download or share

You’ll also understand how to safely use APIs, visualize data, and personalize user experiences - all without writing a single line of code.

Here’s a preview of what the final app looks like:

Let’s start by building our app on Emergent - where the entire experience begins with a single detailed prompt.

Building on Emergent

Once you’re on Emergent, creating your Spotify Wrapped app starts with a single detailed prompt. This is where you describe exactly what you want your app to do - Emergent’s AI will then handle everything: authentication, API setup, backend logic, and even the dashboard design.

Here’s the exact prompt we used to build the app:

Prompt Used:

Build a web dashboard app called Spotify Wrapped that connects to a user’s Spotify account through the Spotify Web API.

After authentication, the app should fetch and visualize the user’s top tracks, artists, and genres in a Wrapped-style dashboard.

Core Features

Spotify OAuth Integration

Allow users to securely sign in with their Spotify account.

Use the Spotify Web API for authentication and data access.

Request permissions to access user-top-read and basic profile data.

Top Tracks and Artists

Fetch the user’s top tracks and artists from:


/me/top/tracks

/me/top/artists


Support different time ranges: short-term, medium-term, and long-term.

Data Visualization

Display top artists, tracks, and genres using interactive charts and cards.

Include metrics like play count, artist popularity, and track duration.

Add a “Listening Summary” showing:


Most listened-to genre

Favorite artist

Song of the year (most repeated track)

Wrapped Summary Card

Generate a personalized summary card that includes top stats and an aesthetic design (like Spotify Wrapped).

Allow users to download or share the card as an image.

User Experience

Clean, minimal, and festive interface inspired by Spotify Wrapped.

Smooth transitions and responsive layout.

Data Flow

User logs in via Spotify OAuth

Fetch user’s top artists and tracks

Process data to find top genres and favorites

Visualize all stats on a dashboard and generate the Wrapped card

Ensure secure handling of Spotify API credentials (Client ID and Client Secret).
Optimize for fast loading, visual appeal, and smooth user flow

Explaining the Prompt (in Simple Terms)

Let’s quickly break down what’s happening here:

Spotify OAuth Integration:
This lets users log in securely using their Spotify account. OAuth is a safe login method where the app never sees your password - it just gets permission to read your top artists, tracks, and genres.

Top Tracks and Artists:
This part tells Emergent to pull your listening data directly from Spotify’s API endpoints. It’ll show your most played songs and artists, and even let you switch between short-term (last 4 weeks), medium-term (6 months), and long-term (1 year) data.

Data Visualization:
Here, the app turns all that data into visuals - bar charts for artists, pie charts for genres, and cards for top tracks. It also highlights your “most repeated song” and “favorite artist” to make it feel like a true Wrapped experience.

Wrapped Summary Card:
This is where your listening data becomes shareable. The app generates a stylized card that summarizes your top songs, genres, and artists - something you can download or share online.

User Experience:
The prompt asks Emergent to style the dashboard to look clean and inspired by Spotify’s branding - green, black, and smooth gradients, giving the app a premium Wrapped feel.

Agent’s Questions and Answers

Once you submit the prompt, Emergent’s agent will ask for a few clarifications to fine-tune the build. Please note that the questions will vary user to user.
Here’s what it asked (and the answers provided):

Agent asked:

1. Spotify API Credentials: Do you have Spotify Developer credentials?
   a. Yes, I'll provide Client ID and Client Secret
   b. No, I need guidance on how to get them
   
   

2. Chart Library: Which visualization library should I use?
   a. Chart.js (simple, lightweight)
   b. Recharts (React-native)
   c. Your choice
   
   

3. Authentication Storage: How should we store the Spotify access token?
   a. Session-based (backend manages tokens)
   b. Local storage (client-side)
   
   

4. Design Theme: Any specific color preference for the Wrapped aesthetic?
   a. Spotify's green/black theme
   b. Vibrant gradient theme (purple/pink/orange)
   c. Minimal pastel theme
   d. Your choice

Our Answers:

1. b. No, I need guidance on how to get them

2. c. Your choice

3. a. Session-based (backend manages tokens)

4. a. Spotify’s green/black theme

After you answer these, Emergent automatically begins building the app.

After the Emergent agent finishes asking the initial setup questions (like authentication, theme, and visualization), it will automatically start building your app. Once the basic structure is ready, it will prompt you to provide your Spotify Developer credentials - specifically your Client ID and Client Secret - to complete the integration.

Here’s exactly what the agent asked:

“Perfect! Let me guide you on getting Spotify credentials first:

To get Spotify Developer Credentials:

1. Go to https://developer.spotify.com/dashboard

2. Log in with your Spotify account

3. Click ‘Create an App’

4. Fill in app name (e.g., Spotify Wrapped Dashboard) and description

5. Accept terms and create

6. You’ll get your Client ID and Client Secret

7. Click ‘Edit Settings’ and add Redirect URI:
   https://spotify-wrapped.preview.emergentagent.com/callback

Once you have these, I’ll need:

• Client ID

• Client Secret

Setting Up the Spotify API

To make the Spotify Wrapped app work, you need to connect it with your Spotify Developer account. This allows your app to securely access real user data like top tracks, artists, and genres through the Spotify Web API.

Follow these simple steps to get your Client ID and Client Secret, which Emergent will later ask for.

Step 1: Go to the Spotify Developer Dashboard

Visit https://developer.spotify.com/dashboard and log in using your Spotify account.

Step 2: Create a New App

Once logged in, click on “Create an App.”
Give it a name like Spotify Wrapped, and write a short description (for example, “A personal Spotify Wrapped dashboard built with Emergent.”).

Click Create to proceed.

Step 3: Add Redirect URI

After creating the app, click Edit Settings.
Scroll down to Redirect URIs and add the redirect URL that Emergent provides - it’ll look something like this (ask the agent for the redirect URL):
https://spotify-wrapped.preview.emergentagent.com/callback

This tells Spotify where to redirect users after they log in.

Step 4: Select the API You’ll Use

Next, you’ll see the section “Which API/SDKs are you planning to use?”
Select Web API - this is the interface that allows your app to fetch Spotify data like top artists, tracks, and genres.

Step 5: Save and Get Your Credentials

Click Save, then return to your Dashboard.
You’ll see your Client ID listed there. Click View Client Secret to reveal the secret key.

Copy both of these - you’ll need to provide them to the Emergent agent when prompted.

Here’s how to do it:

Your App Is Now Ready to Use

Once you’ve added your Spotify Client ID and Client Secret, Emergent finalizes the build and connects everything - the Spotify OAuth flow, data fetching, and interactive Wrapped-style visualization.

When you open the preview link, you’ll see a beautifully designed dashboard that feels like a personal version of Spotify Wrapped - generated on demand. After signing in with your Spotify account, the app automatically pulls your top tracks, artists, and genres from your listening history.

Here’s what happens behind the scenes:

1. Authenticate with Spotify:
The app securely connects to your Spotify account through OAuth. You grant permission for the app to read your top tracks and artists data - nothing else.

2. Fetch Listening Data:
Once authenticated, the app calls Spotify’s /me/top/tracks and /me/top/artists endpoints to fetch your personalized stats. It supports multiple time ranges - short-term (last 4 weeks), medium-term (6 months), and long-term (lifetime).

3. Process and Analyze:
Emergent processes the raw data to calculate your favorite genres, most listened-to artists, and “song of the year.” It even generates summary metrics like play counts and popularity scores.

4. Visualize Everything:
Finally, your dashboard displays interactive charts showing your top tracks, artists, and genres. The Wrapped Summary Card combines all this data into a single, shareable design - perfect for posting or saving.

Your Spotify Wrapped app is now live and ready to explore. Every time you sign in, it fetches fresh data directly from your Spotify account - giving you an up-to-date, personalized musical snapshot.