Loading...
Back to all projects
Stats for Spotify: Music Analytics Platform
Overview
Music analytics platform built with Next.js 16 and Supabase that goes well beyond what Spotify Wrapped gives you. Tracks your top 50 artists, tracks, and albums across three time ranges with daily snapshots, then runs that data through Postgres RPCs to surface things like which album is dominating your listening, who your most consistent artists are, and where the biggest rank shakeups happened. A floating Spotify player lets you listen without leaving the app — it uses the Web Playback SDK on desktop and falls back to polling on mobile where the SDK is unreliable. The friend system is request-based with Discord-style usernames, privacy tiers, and the ability to browse each other's stats. Installable as a PWA on both Android and iOS.
Key Features
- Top 50 tracking for artists, tracks, and albums across 4-week, 6-month, and all-time ranges with automated daily snapshots
- Four recap cards — 3 Versions of You, Album Takeover, Hall of Fame, and Plot Twists — all computed server-side in Postgres RPCs so the frontend just renders the results
- Floating Spotify player using the Web Playback SDK on desktop, with adaptive polling fallback on mobile and a retry loop for device registration timing issues
- Historical trend charts with Recharts sparklines, line graphs, and color-coded rank badges (↑5, ↓3, NEW, —) that degrade gracefully when snapshot history is thin
- Request-based friend system with Discord-style usernames, auto-accept for mutual requests, useOptimistic for instant UI feedback, and three-tier privacy controls enforced by RLS
- Genre analytics page that derives genre rankings from your top artists, pre-fetched across all time ranges for instant tab switching
- Artist, track, and album detail pages with hero images, listening stats from Supabase, ranking history charts, follow/unfollow, and in-app playback
- PWA installable on Android (via beforeinstallprompt) and iOS (manual instructions), with platform-aware playback preference between in-app SDK and native Spotify deep links
- Data management with JSON/CSV export, profile customization, full data deletion, and account deletion for Spotify API compliance
Challenges
- The Spotify Web Playback SDK only works for Premium users and behaves differently across browsers — plus device registration is asynchronous and racy, so playback can fail if you try to play before Spotify acknowledges the new device
- Recaps analytics involve substantial SQL: gaps-and-islands for streak detection, window functions for day-over-day deltas, and distinguishing 'new entry' from 'rank changed' across hundreds of snapshots. The plot-twists function alone is ~390 lines of CTEs
- Bidirectional friendship queries need to check both directions of the relationship in every query, and two users sending requests simultaneously could create duplicate rows without the auto-accept logic
- Genres don't come from a Spotify endpoint — they're derived from artist metadata, which means counting and ranking them client-side from aggregated artist data across time ranges
Solution
The player uses a dual-mode architecture: Web Playback SDK on desktop with real-time state events, and adaptive polling (2s playing, 5s paused, 10s idle) on mobile where the SDK is unreliable. A retry loop handles the device registration race by catching 404s and re-transferring playback. All recap computations run as Postgres RPCs with security-definer functions that enforce privacy at the database level — the React components receive pre-shaped JSONB and do zero data processing. The friend system stores relationships in its own table (not Spotify's follow API) with bidirectional .or() queries and an auto-accept path when both users have pending requests to each other. Genre rankings are computed server-side across all three time ranges in parallel via Promise.all, then passed to the client as a single payload for instant tab switching. Database types stay in sync through GitHub Actions running supabase gen types daily.
Outcome
A deployed music analytics platform at statsforspotify-chi.vercel.app with in-browser Spotify playback, four recap insight cards backed by complex Postgres analytics, a request-based social system with privacy controls, genre breakdowns, and full artist/track/album detail pages with ranking history. Installable as a PWA on both mobile platforms. The whole thing runs on Supabase with RLS enforcing privacy at the database layer, auto-generated types keeping the frontend in sync, and Vercel Analytics tracking real usage.
Gallery
Dashboard overview with top artists, tracks, albums, and fun recaps
Top Artists grid view with artist cards and Open in Spotify buttons
Top Tracks list with sparkline toggle and rank indicators
Artist detail page with hero image, follow button, and personal top tracks
Track detail page with ranking history chart, peak position, and days charted
Fun Recaps page with 3 Versions of You comparing taste across time ranges
Friend profile page showing their top artists with privacy-gated access
Project Information
Technologies
Next.js 16
React 19
TypeScript
Supabase
PostgreSQL
Spotify API
Spotify Web Playback SDK
Tailwind CSS 4
shadcn/ui
Recharts
Framer Motion
TanStack React Query
Vercel Analytics
Row Level Security (RLS)
OAuth 2.0
Edge Functions
PWA
Bun