Welcome to Lund's nr. 1 discography website!
Here you can discover the discography of artsts, using Spotify's web API. The website is built in Angular using Angular Materials for styling and NgRX for state management.
On LAME, the user can search for an Artist available at Spotify's huge library of music.
The system will suggests artists based on what the user start to type
When selecting an artist, the discography of that artist is presented.
Find some more artists of your liking!
Press any album to view its details. Any song can be added to the users playlist.
Browse your favorite artists and build your own customized playlist!
- Clone the GitHub repository of the Angular project to the local machine.
- Install Node.js and npm on the local machine if they are not already installed as they are required to run an Angular project.
- Navigate to the folder with the 'cd' command in a CMD. Install the dependencies required by executing 'npm intsall'.
- Start the local server by executing 'ng serve'. The server is now listening at http://localhost:4200/.
- Visit http://localhost:4200/ and go discover some new artists!
The state management of this project was implemented using NgRx, a store that provides reactive state management for Angular apps inspired by Redux. Below is an outline for how the this was done
This website was created as a group project in the course web programing, EDAF90, at Lund University. None of the four group members had any prior experience with Angular. The contributing group members were, in no particular order: Ashley Lu, Ludvig Thornberg, Hendrik Shadman & Joel Bengs.
The project was completed under the budgeted time of 160 hours (40h/student).
Our initial goal was to create a fairly simple but functional version of the Spotify app, with focus on backend functionality. The webpage was supposed to include a search function, a discography view, a tracklist for the selected album and a playlist where the viewer can add and remove tracks. The app uses the public spotify API to attain information about artists, albums and tracks. We opted out of letting the user sign in to spotify and instead used an access token generated from one of our accounts, to simplify. We also thought of implementing a function that would allow the viewer to play the songs in the playlist but as we progressed we realized that this was out of scope for the project. There are some minor functionalities that did not turn out as expected, such as adaptive height on angular material elements (now the tracklist and playlist can overflow their respective containers), and several non-fatal error messages in the console (often related to the API calls).
Apart from the above mentioned flaws, the functionality that we initially wanted was successfully implemented.