How I Created My Own Spotify
One of the world’s largest companies, Spotify is an audio streaming and media services provider founded in 2006. Many use the app daily to fill in spare times or to accompany them doing tasks. One day, I was so inspired by the app that I decided to develop it.
An Unforeseen Achievement
On May 2021, I released a program entitled “Spotify Sound” on Khan Academy. I did not expect anything from the release as games or graphics are usually the types of programs that became successful. Yet, surprisingly, Spotify Sound became an instant hit — people were liking it. Voted by more than 275 users, this program was able to rank first on the hot list. So, how did I develop such a program?
It is recommended to check out, and try using, if possible, Spotify Sound before diving deeper into more details for the purpose that you can catch a glimpse as to what I will discuss. Below is a screenshot of the program.
The Process Begins
The first step, and probably the most salient, to build Spotify is to create scenes. To clarify the definition of “scenes” used in this passage, take the instance of a website. In websites, scenes are known as pages.
My website, for example, consists of three main pages: home page, about page, and programs page. Each webpage has different contents and purposes, and so does each scene in our Spotify.
The app requires a home scene, search scene, library scene, settings scene, and some scenes based on sound genres. Each scene should have a background color of rgb(25, 20, 20).
Like a webpage that has a navigation bar, our Spotify also needs it. Hence, after defining the scenes that are needed, the next step is to create navigation bar to improve overall UI.
In the navigation bar, there will be three buttons: Home button, About button, and Library button, all of which are linked to the Home Scene, About Scene, and Library Scene, respectively.
Taking It to Next Level
Then, we fill in the main parts of the scenes.
First, the Home Scene. There are two parts in this scene: top and bottom. In the top part, a “Good Morning”, or “Good Afternoon,” greeting, a settings button, and several clickable panels - such as Liked Sounds, Favorites, Rpg, and Retro - can be found. Similarly, a “Made For You” title and some clickable buttons are depicted on the bottom part of the scene.
After the Home Scene is built, the Search Scene also needs some content. A title and several panels like Rpg, Retro, Battle Effects, Giant Says, Elements, Flight Reacts should suffice to fulfill this scene.
The Your Library Scene comes next. It is true that this scene is the most complicated scenes compared to the others because there are two sub-scenes, also known as subpages, in this particular scene. The two sub-scenes include a Sounds Scene and a Podcasts Scene. Moreover, in each sub-scene, there are yet another sub-scenes. Yes — a sub-scene inside a sub-scene. To illustrate, Playlists, Creators, and Albums are the titles of each sub-scenes inside the Sounds Scene.
Next, the Settings Scene consists of three parts: Language, Data Saver (made unavailable), and About. The only available language is English. And, written below the about title is the app’s version, which is 8.6.20.1063.
Last but not least, the Music Scenes, which are the scenes that open when a user presses the clickable panels mentioned earlier. Each music scenes has its own title and list of sounds. Music panels with two buttons, a like button and play button, are available under the scene’s title.
Wind-Up
That’s all the steps I took to built Spotify Sound, starting from declaring the required scenes, creating a navigation bar, to filling the contents. It might seem complex, but, really, it is just spending a few hours in front of the computer.
As Nelson Mandela puts it, it always seem impossible until it’s done.
Listening to music has been one of the most enjoyable activities to do, and I am glad to have the opportunity to develop a program that deals with it.
