A webpage project in Angular that allows the user to browse Spotify for albums, artists, and tracks.
Languages and Skills used: HTML, CSS, JavaScript, TypeScript, Bootstrap, Angular
Tools: Visual Studio 2019, Spotify API, Express web server
Fall 2022
Spotify Browser in Angular
Overview
The goal for this project was to learn how to gather data from an API, and to develop a frontend interface that displays the data. I used Angular to create a webpage that communicates with a server that had been written in Node/Express. This webpage allows the user to browse music on Spotify by supporting searches for artists, albums, and tracks and providing navigation between pages that display more details about each resource
Note: The basic HTML structure of these webpages were provided for me; my assignment was to complete the webpages by filling in the missing information
Communicating with the Web Server
Although the web server was already provided for me, I had to learn how to communicate with the server in order for it to send API requests to Spotify. I used the function I wrote for this throughout the rest of my app.
Home Page
After setting up the initial project and configuring the communication with the web server, the next task was to finish the homepage by populating information about the user and creating the search component.
Information about the user
I edited the about component on the homepage to call the endpoint created for the “about me” page when the load info button is clicked. After this request is made, the left side of the home page will be populated with the logged-in user’s name, profile picture, and a link to open their profile on Spotify.com.
Search component
The right side of the page contains the search component. This allows the user to select the type of resource to search for (either artist, track, or album) and type in their search keywords into the search input box.
I created a TypeScript class for each type of data that can be returned from the search request, and mapped the search response from Express into an array of the appropriate class. Once the array of resources has been created, the search results are displayed in either a Bootstrap carousel component (for artists or albums) or a track-list component (for tracks).
Fig 1: Home page, displaying user information on the left and the search component on the right
Artist Page
An Artist Page displays information about a searched-for or linked-to artist. This information shows an artist’s top tracks, a carousel of their albums, and a carousel of similar artists. Each resource displayed is clickable, and navigates to a page that displays information about it (for example, clicking on one of the top tracks in the artist’s track list will navigate to a Track Page that shows information on that track).
Fig 2: Artist page for Lady Gaga
Album Page
An Album Page displays information about a searched-for or linked-to album. This page shows the album’s cover image, album’s artist, tracklist, and a link to the album on Spotify.
Fig 3: Album page for Born This Way by Lady Gaga (zoomed out to fit screen)
Track Page
A Track Page displays information about a searched-for or linked-to track. This page shows the track’s artist(s), the album it belongs to, and a “thermometer” that displays the track’s seven audio features (which Spotify defines as danceability, energy, speechiness, acousticness, instrumentalness, liveness, and valence). This thermometer is implemented via Bootstrap progress bars.
Fig 4: Track page for "Bloody Mary" by Lady Gaga
Source Code
It is against my school's academic honesty policy to share source code publicly, but if you are an employer interested in viewing the private GitHub repo, please contact me either via email or LinkedIn!