Back to previous page
I invested a lot of time in this application, aiming to deliver a
high-quality result. In hindsight, I personally believe I succeeded.
This project taught me a great deal and only increased my eagerness to
learn more skills in the world of computer science.
The name vinyla comes from “vinyl,” synonymous with a record or LP, made
a bit playful with the addition of the letter 'a'.
The website is live and hosted on Azure:
https://vinyla.azurewebsites.net
On vinyla, you can collect your favorite albums and see a visually appealing overview. You can also view other users’ favorite albums by searching for them. The idea came from noticing that album collecting has significantly declined compared to the days before streaming services became prevalent.
Whenever you’re unsure what to listen to, visit vinyla and quickly see an overview of your favorite albums.
Here you can see your favorite albums sorted by artist name. Hovering over an album shows that you can click it to remove it from your collection.
Throughout the app, next to each album name there is a PLAY BUTTON. Clicking it redirects you to that album on Apple Music, where you can immediately listen to it.
Below your name, you can find extra information such as your favorite genre, artist, and the total number of albums in your collection. You can modify this information by clicking the EDIT PROFILE button.
Clicking EDIT PROFILE opens a popup. A reactive form is used here, as required by the assignment. The save button stays disabled until a genre and favorite artist are selected. The genre is required and chosen from a list. The artist field is also required and must have a minimum of 3 characters.
Scrolling to the bottom of the page, you can find the DELETE YOUR ACCOUNT and ABOUT VINYLA buttons. Choosing to delete your account shows a warning first.
Clicking ABOUT VINYLA takes you to a separate page with more information about the application.
Clicking the SOCIAL tab shows all vinyla users with their favorite albums. All albums here are locked and cannot be deleted. They are additionally protected in the code, preventing changes even if the HTML page is modified. Users are sorted by creation date (id).
You can filter by username to search for specific users. A pipe is used here so the filter updates live.
Album searches use the iTunes API. Hovering over an album highlights it and shows ADD TO COLLECTION. Clicking adds it to the logged-in user’s collection. A pipe is used here for fast, easy search.
Albums already in the collection are labeled ALREADY IN COLLECTION. In the screenshot below, the first album is hovered to add it, while the next two are already in the collection.
The login and registration screens were implemented as instructed by the school. Validation is included using a form.
Besides the API we wrote and host ourselves (vinyla API), the iTunes API allows access to the full iTunes/Apple Music catalog.
As mentioned earlier, next to each album is a PLAY BUTTON. Clicking it redirects to the album on Apple Music to listen or preview if you don’t have a subscription.
Both are hosted on Azure. See URLs at the top of this README.
The website includes a dark mode, which automatically activates based on system settings.
This app is mainly designed for desktops and tablets but also works seamlessly on mobile devices such as phones.
This screenshot is from before the API was hosted online and is now difficult to reproduce.
