Echoes

Cos'è

Echoes trasforma un account Spotify personale in una dashboard pubblica: cosa sto ascoltando ora, i top artist su finestre temporali diverse e lo storico recente. Tutto renderizzato server-side, aggiornato in tempo reale, senza login per chi visita.

È anche il progetto con cui ho consolidato React, Next.js (App Router) e TypeScript in strict mode.

Il problema

Volevo uno spazio live che raccontasse i miei gusti musicali senza esporre OAuth ai visitatori e senza richiedere un backend complesso. Spotify non concede accesso multi-utente a scala “portfolio”: serve un modello single-account, server-side, con token che non raggiungono mai il browser.

Approccio

• Autenticazione una tantum con refresh token long-lived legato a un solo account Spotify
• Exchange on-demand in access token short-lived, cache in memoria e rinnovo trasparente
• Ogni chiamata a Spotify passa da route/API interne dell’app (proxy) — il browser parla solo con Echoes
• Dati “lenti” (top artist, recent history) fetchati in SSR e cachati minuti/ore
• Now playing: unico pezzo client-side, poll leggero verso una route interna
• Time-range via query string (?range=…) così ogni vista è shareable e prerenderabile

Stack

• Next.js App Router + TypeScript strict
• Tailwind CSS v4
• GSAP per motion e scroll reveals
• Deploy su Vercel

Limiti consapevoli

Spotify ha chiuso Recommendations, Audio Features, Audio Analysis e Related Artists alle nuove app (fine 2024): Echoes non dipende da quegli endpoint. Non c’è ancora un database — è uno snapshot live. In roadmap: job schedulato che salva snapshot dei top ascolti per tracciare come cambia il gusto nel tempo.

Link

• Live: echoes.giovannimanara.dev
• Codice: github.com/GioManara96/echoes