Soundverse è un'applicazione a singola pagina realizzata con Vue.js e Vuetify. I contenuti sono forniti dall'API di Deezer e last.fm. Lo scopo di Soundverse è di fornire una piattaforma di scoperta e discussione di album musicali che permette agli utenti di tenere traccia degli album ascoltati, dare un rating, recensirli e scoprirne di nuovi, seguire altri utenti e scoprire cosa questi ascoltano. La demo è disponibile su soundverse.ga
- Home.vue contenente le classifiche mondiale, italiana e le top hits
- login.vue che a seconda della route mostra il componente ‘formLogin.vue’ (per effettuare login) o ‘formSignup.vue’ (per effettuare la registrazione)
- albumView.vue che mostra informazioni sull’album selezionato e permette all’utente (se loggato) di aggiungere tale album al db su Firebase a una personale lista di ‘preferiti’, ’ascoltati’ o ‘daAscoltare’; tale view permette inoltre di ascoltare uno snippet di 30 secondi di qualsiasi traccia dell’album, inserire una recensione o un voto da 0.5 a 5 di tale album e leggere recensioni altrui
- albumUtente.vue serve a mostrare la lista con scroll infinito delle raccolte personali (ascoltati, preferiti, daAscoltare) ancora una volta a seconda della route
- artistView.vue permette di visualizzare tutti gli album di un artista e scoprire gli artisti simili tramite l’API di Last.fm
- generi.vue è una sezione per scoprire nuovi album a seconda del genere musicale, i quali sono mostrati tramite delle card con immagine e testo
- genere.vue mostra invece la classifica e le nuove uscite del genere precedentemente selezionato in generi.vue
- profile.vue mostra il proprio profilo con i seguaci e seguiti mostrati tramite dialog e permette di inserire o cambiare la propria foto profilo, conservata nello storage di Firebase
- profiloAltri.vue mostra il profilo di un altro utente, il quale si può seguire o smettere di seguire (a seconda del controllo su Firebase), del quale si possono visualizzare i seguiti e i seguaci, oltre alle raccolte ascoltati, preferiti, daAscoltare di tale utente
- searchView.vue viene visualizzata quando si effettua una ricerca; tale view è divisa in 3 tab: album (visualizzati tramite un grid di card), artisti (visualizzati tramite un grid di cardArtisti) e utenti (visualizzati tramite una normale list)
- listView.vue mostra le liste con scroll infinito come le classifiche top 100 (o come sviluppo futuro le liste degli altri utenti)
- impostazioni.vue contiene informazioni generali sul progetto e l’interruttore per il cambio del tema da chiaro a scuro e viceversa
- card = card utilizzata per mostrare i dettagli degli album nelle varie viste (tranne albumView)
- cardArtisti = card utilizzata per mostrare il nome e la foto dell’artista nella ricerca e nella sezione degli artisti correlati nella vista artistView
- cardcontainer = container delle card per gli album. Utilizzato per avere un unico contenitore riutilizzabile in varie parti dell’app
- cardcontainerartisti = come il container precedente, solo che è utilizzato per le card degli artisti
- cardContainerFirebase = simile a cardcontainer per la parte del template, ma viene utilizzato in maniera diversa per quanto riguarda le funzionalità. Viene utilizzato nella view profiloAltri e preleva gli album da Firebase anziché dalle API di Deezer
- carousel = componente utilizzato nella homepage per mostrare una parte degli album delle relative liste
- formLogin = form per il login, utilizzata nella vista login
- formSignup = form per la registrazione, utilizzata anch’essa nella vista login
- musicplayer = contenitore del player, gestisce l’invio allo stesso del file
- searchbar = barra di ricerca inserita nella top bar
- userList = elemento che contiene immagine e username di un utente, preleva i dati da Firebase
- usersContainer = container per gli utenti, utilizzato nella ricerca e nel profiloAltri, oltre che nel proprio profilo se necessario
- vuetify-audio = interfaccia del player musicale che viene utilizzato per l’ascolto delle preview da 30 secondi delle varie canzoni negli album. Questo componente è stato creato da wilsonwu e cambiato in aspetto e funzionalità per adattarsi meglio allo stile e alle esigenze dell’app
L’utente può cercare album, artisti e altri utenti. Gli album possono essere aggiunti a tre diverse collezioni:
- ascoltati
- da ascoltare
- preferiti Può inoltre dare un voto e inserire una recensione, oltre a poter ascoltare uno snippet di 30 secondi di qualsiasi traccia. La recensione è anche modificabile e cancellabile. Gli utenti possono anche seguirsi tra loro, oltre che visualizzare gli album nelle collezioni dell'altro e l'elenco di utenti da cui sono seguiti o che seguono. Sia un utente autenticato sia non autenticato possono cambiare il tema dell’app da scuro a chiaro o viceversa.
- scrolling infinito = utile per caricare album ogni volta che l’utente sta raggiungendo la fine della lista corrente. Abbiamo deciso di lanciare il caricamento di nuovi album un pò prima di raggiungere la fine esatta, in modo da rendere il caricamento meno ovvio e più user-friendly
- snackbar = per mostrare all’utente errori o dei messaggi di successo (es. “Login effettuato”), abbiamo scelto di utilizzare una snackbar. Questa scelta deriva da uno studio precedente della documentazione di material, che ci ha portato a preferire la snackbar rispetto a un semplice alert
- cambio tema = per la modifica del tema, salviamo la preferenza nel localstorage. In questo modo la scelta rimane ed evitiamo di doverla far rifare all’utente
- utilizzo del localstorage anziché dei cookie = essendo l’utente un oggetto abbastanza complesso, abbiamo pensato di utilizzarlo in localstorage poiché la gestione risulta semplificata e non ci serve inviare le informazioni che salviamo con le varie richieste HTTP
Quando si clicca sul menu della card le azioni ci mettono circa 100ms per aggiornare il testo correttamente. Questo è dovuto al fatto che il controllo nel database se il singolo album è stato aggiunto a una collezione o meno lo facciamo proprio quando l'utente clicca il menu, evitando così di sprecare molte chiamate che servirebbero se avessimo fatto un unico controllo iniziale per tutti gli album nella vista.