Design & Development

Gurmat Sangeet Collection (GSC)


Music Streaming Platform

A voluntary project done for the Gurmat Sangeet Collection non-profit organization.

This was a voluntary project done for a non-profit organization called Gurmat Sangeet Collection. Responsibilities included designing a brand identity and developing a fully functioning web-based platform for uploading, managing, and streaming rare recordings of Sikh Kirtan (hymns). AdobeXD was used for wireframing and prototyping. The web-application was built using the Meteor.js full-stack JavaScript framework, and the Vue.js and Vuetify.js front-end frameworks. MongoDB database was used for storing and managing tracks, albums, and playlists. For a live production version of the web-application, see

Design/Development Process

Design and development process


Moodboard 1
Moodboard 2


Desktop wireframe 1
Desktop wireframe 2
Desktop wireframe 3


Desktop Mockups

Desktop mockup home
Desktop mockup album
Desktop mockup artist

Mobile Mockups

Mobile mockup 1
Mobile mockup 2
Mobile mockup 3
Mobile mockup 4

Final Site

Final site 1
Final site 2
Final site 3
Final site 4
Final site 5
Final site 6
Final site 7

The interaction pattern for creating a new album

A few things happen when the tracks are dropped into the album creation area:

  1. File types that are not audio files are filtered out. This is done silently because more than likely files like images and text documents were selected either by mistake or because it was easier to select all files rather than manually exclude a few non-audio files. File types that are audio files but unsupported by the audio player are also filtered out but the user is informed of these exclusions so that the user can take further action to convert the files into an appropriate format if needed.
  2. Metadata is read from each audio file to extract track title, album title, album year, album artist, and genre (i.e. raag).
  3. The extracted information is used to automatically fill relevant input fields like the name of the new album, the year, the artist(s), the title for each added track, the artist for each track, and the genre or 'raag' associated with each track. Fields are only populated automatically if the user has not already entered or modified information into those fields to prevent unintentional loss of work. After being populated, these fields are further editable by the user to correct any errors in the metadata or to add more details.