Streaming Musicale Interattivo
Una piattaforma innovativa per un artista emergente, progettata per trasformare l'ascolto passivo in un'esperienza progressiva e social.Design fluido, gamification e analytics in tempo reale.
Schermata principale
"Vorrei che gli ascoltatori vivano un'esperienza progressiva, non solo un ascolto"
Il cliente aveva una visione chiara: evitare di dare subito accesso a tutti i brani. L'obiettivo era creare un percorso simile a un album che si scopre gradualmente, dove ogni traccia si sblocca solo dopo aver ascoltato la precedente.
Inoltre, la piattaforma doveva essere social e interattiva (commenti, salvataggio frasi preferite) ma accessibile anche senza registrazione immediata, per non scoraggiare i nuovi ascoltatori.
Infine, un requisito tecnico fondamentale: tracciamento reale degli ascolti per capire esattamente quanto tempo ogni utente ascoltava la musica, permettendogli di sbloccare livelli e riconoscimenti, e scalare la classifica e diventare tra i fan più legati all'artista.
La classifica infine è stata anche pensata in una versione alternativa, in cui i fan e l'artista vengono visualizzati come stelle luccicanti in un cielo notturo, dove l'artista rappresenta la stella centrale e i fan le stelle attorno. Più hanno ascoltato la musica dell'artista sulla piattaform, piu la loro stella dedicata sarà luminosa e riconoscibile.
Classifica degli fan con più minuti di ascolto
Versione alternativa delle classifica, con ancora pochi utenti e quindi stelle.
Gamification e Streaming Ibrido
Ho sviluppato una piattaforma custom che bilancia accessibilità e fidelizzazione. Il cuore del sistema è un motore di regole che gestisce lo sblocco dei brani in tempo reale, sincronizzato con un player audio avanzato.
Per risolvere il dilemma "Registrazione vs Guest", ho implementato un sistema a due livelli. Gli utenti "Guest" ottengono un ID anonimo salvato nel browser che conserva i progressi. In qualsiasi momento possono convertirsi in utenti registrati, trasferendo automaticamente ascolti, sblocchi e preferiti sul nuovo account permanente.
Focus tecnico:Ho curato ogni micro-interazione, dal "tremolio" delle card bloccate all'animazione fluida del player che si espande (utilizzando Framer Motion). Il backend garantisce che nessuno possa "barare" sullo sblocco delle tracce tramite chiamate API dirette.
Pannello profilo utente
Ingegnerizzare l'Engagement
Unire streaming audio, logica di gioco e sicurezza ha richiesto soluzioni creative per garantire performance a 60fps e integrità dei dati.
Il Sistema di Sblocco
La sfida era impedire "scorciatoie". Ho implementato un tracking lato server: il backend registra quando un brano è ascoltato fino alla fine e aggiorna il profilo. Il frontend mostra lucchetti sulle tracce future; se cliccate, vibrano e spiegano all'utente come procedere, trasformando la frustrazione in guida.
UX Pattern:
- •Feedback visivo immediato (Shake)
- •Progressione guidata
- •Prevenzione errori
Tracciamento "Onesto"
Per contare gli ascolti reali e non i click casuali, ho creato un sistema che aspetta 20 secondi di riproduzione continua prima di contare. Se l'utente salta avanti o mette in pausa, il timer si ferma. I dati vengono salvati periodicamente sia in locale che su server, garantendo persistenza anche in caso di chiusura tab.
Logica Tecnica:
- •Debounce logic (5s rule)
- •Local + Remote Sync
- •Anti-cheat detection
Player UI & Interattività
Il player vive in due stati: compatto (bottom bar) ed espanso (fullscreen). L'espansione permette di leggere il testo e commentare senza interrompere la musica. Ho aggiunto la feature unica di selezionare una frase del testo e salvarla come "preferita" sul profilo.
Tecnologie:
- •Framer Motion (Layout Animations)
- •Global State Management
- •Text Selection API
Audio player espanso: testo della canzone e commenti dei fan
Ottimizzato per lo smartphone
Essendo una piattaforma di streaming, l'accesso da dispositivi mobile rappresenta oltre l'80% del traffico previsto. Ho curato ogni dettaglio per garantire un'esperienza fluida anche su schermi ridotti.
- Sezioni ed elementi riposizionati per un'esperienza touch semplice e intuitiva.
- Ogni azione ha un feedback visivo chiaro e immediato.
- Interfaccia ottimizzata per il controllo con una sola mano.
Sicurezza e Gestione Contenuti
L'artista doveva poter caricare nuove canzoni in autonomia, ma in sicurezza. Ho creato un pannello amministrativo protetto dove è possibile caricare file audio (con estrazione automatica della durata), impostare testi e condizioni di sblocco.
Protocolli di Sicurezza
- 🔒Password hashate con Argon2 + server-side pepper
- 🚫Rate limiting per prevenire brute force e spam
- 🍪Sessioni gestite tramite Cookie httpOnly sicuri
- 📱Controllo sessione singola (logout da altri device)
Questo approccio garantisce che i contenuti esclusivi dell'artista rimangano protetti e che i dati degli utenti siano al sicuro, mantenendo però l'interfaccia amministrativa semplice e immediata da usare.
Stack Tecnologico
Un'architettura moderna pensata per la scalabilità e la reattività dell'interfaccia.
⚛️ Frontend
Sviluppato in React + TypeScript per robustezza e type-safety. Styling con TailwindCSS per un design system consistente e Framer Motion per tutte le transizioni complesse.
- • React.js + TypeScript
- • Framer Motion (Animations)
- • TailwindCSS
- • Howler.js (Audio Engine)
🚀 Backend API
Server Node.js con Express che gestisce la logica di business, validazione degli input e sicurezza. Middleware custom per la gestione delle sessioni e rate limiting.
- • Node.js / Express
- • Argon2 Security
- • Express-Rate-Limit
- • Validation Logic
🔥 Data & Cloud
Firebase Firestore per database NoSQL real-time (perfetto per chat e notifiche) e Cloud Storage per l'hosting sicuro dei file audio e assets.
- • Firebase Firestore
- • Cloud Storage
- • Real-time Listeners
- • Secure Rules
Una piattaforma completa che fidelizza
Dopo diverse iterazioni e feedback continui, MarkerOne è diventata molto più di un semplice player audio. È uno spazio digitale che riflette l'identità dell'artista.
Gamification
Sistema di obiettivi e sblocco tracce che aumenta il tempo di permanenza
Community
Commenti, profili personalizzati e condivisione frasi preferite
Il risultato finale unisce estetica e funzionalità: un design "dark mode" elegante, animazioni fluide e un tracciamento dei dati preciso che offre all'artista una visione chiara del comportamento dei suoi fan.