Author: Chhavi

Takes forever to think of a witty bio. Like now.

GSoC 2018 : Building a design system. Journey and learnings..

Hello,
I am Chhavi. I have mostly been helping around with all things design in MetaBrainz. I recently graduated from IIT Guwahati, India and started contributing to MusicBrainz after attending the summit last year, around the same time.

As a Google Summer of Code student, my project was to build a design system with React UI components for the upcoming overhaul of MusicBrainz’s website. It surely was a really interesting journey, right from when I heard about the community and I would like to share some snippets of it with you!

May 2017: I hear about Picard, and how a bunch of really cool people who meet online are building it. I was intrigued.

Around August 2017: I pop in the IRC channel #metabrainz, and after much overthinking, I drop a “Hi”. Followed was a really warm welcome by people I will soon call friends and a lot of developer-y jargon I had no clue about.

September 2017: I attend the annual MusicBrainz developer summit in Barcelona. And boy oh boy, I am now part of the family. Over the few days there, I have immense fun interacting and learning from the community.

November 2017: We set up our JIRA ticket system for design issues and start working on the mockups for the redesign. The entire community comes together on JIRA tickets and Discourse posts to talk about where we want to go with this overhaul.

January 2018: Community members encourage me to try my hand at front-end development. One is really lucky to find people, who encourage you to grow out of your comfort zone and help you cross that wall. In MetaBrainz, there is no shortage of such kind of people.

March 2018: With little confidence and lots of hopes, I apply for the Google Summer of Code programme. I start learning the ropes of development, with help of online tutorials and obviously our community. We also met for a mini-summit in Delhi to discuss ListenBrainz and spicy food.

April 2018: Hence began my full-fledged journey of learning and spending a summer of coding. It wasn’t easy, but I learned a lot in the process.

We set up the initial design system using react-bootstrap and react-storybook. I then started importing UI components into the system, followed by its documentation. I wrote up a more detailed description of the process too.

August 2018: As of now, we have the design system in place. The future plan is to continue adding components to it as well focus on having well thought contributing guidelines. I will also continue working on designing the mockups for the user interface for various entities.

Google Summer of Code was just another milestone in my journey with MetaBrainz. My time here has been a time of both personal and professional growth. I now feel more comfortable in a development environment, the ongoing chats on IRC make more sense to me and I feel less inhibited to put my thoughts out there. I completed my college, moved cities, traveled… all while having a set of these amazing people I call family.

A special shout out to Rob for keeping me going, bitmap for being ever so patient and understanding, samj1912 for introducing me to MetaBrainz, CatQuest, iliekcomputers, Suyash, Freso, reo and zas for being amazing friends through it all.

The thing I like about our community is, we had seasoned developers as well as newbies like me, all together working together to create amazing stuff. Hoping to continue being an involved and colorful part of this community,

You will obviously keep hearing from me in the coming days,
Chhavi

Delhi Mini-Summit 2018

Rob, Suyash, Param and I met in the bustling city of Delhi where “horns are applied very liberally” (it is a very noisy city!) for a mini summit. Some may even call it elaborate break-out sessions on ListenBrainz and CrtiqueBrainz. We had discussions over a span of two days over laptops and notebooks, riding on bumpy roads in tuk-tuks and over spicy chicken biryanis. Here is a summary of all that we discussed:

ListenBrainz
Data Visualizations
We started Day 1 with graphs for ListenBrainz. After a long marathon of heavy development weightlifting tasks by Param and Rob (how do we work with BigQuery correctlty?), we are finally at a stage, where we can have some really cool amazing visualizations out of our dataset. What will they be? Where will they be? How will we implement them? Can our community pitch in with requests and maybe even play around with code?

After scrounging through a lot of other websites which do music-y data visualizations, and the few responses on our user survey, we started listing various ideas, and went through ideas on our community forum. We ended up dividing the data visualizations (from now on, called graphs) into two categories:

User specific graphs: showcasing a user’s listening history and taste
Site-wide graphs: showcasing the overall listening patterns on ListenBrainz

We had to make some tricky calls based on technical constraints, but overall, for starters, we decided some cool user graphs. We have detailed 6 of them over the summit:

  1. Listening history of a user: how much have you listen-ed, what you have you listened too, listen counts, etc
  2. Your top artitsts
  3. Your tracklist (listen history)
  4. How much music did you explore
  5. Which artists are trending in what parts of the worlds
  6. Listener count across the world

All these graphs will be available over different time durations (last week, month, year) and will also have handles to manipulate them. They will also have tools to easily share them on social media networks. We think, our community will really enjoy tracking their listening history with these. We also discussed a few ideas of how we can create a sandbox so our community can pitch in with ideas, vote on ideas and send pull requests for new graphs. More on that later, as we get there!

Rating System
If you are listening to a tracklist while working over something, how possible it is that you will rate a track saying “This is 3.5? This is 4.2? That is 5 stars!” So you see, ratings on ListenBrainz are tricky. It is very dynamic and interactive in real time, unlike other dear *Brainz projects, so we think that a Last.fm-like rating i.e like and dislike makes sense for ListenBrainz. There was also some discussion about where the ratings should reside — is CritiqueBrainz the correct place?

Home Page
We worked on redesigning the “My Listens” page as well the home page. We now plan to include, apart from the graphs, an infographic explaining how ListenBrainz works and things you can do with it! I will further detail out the mockup later this week.

Potential Roadmap
After almost two days of discussions, we could chalk up a rough roadmap for ListenBrainz, which include data visualizations, ability to rate/like tracks, create collections, follow users, and more. This also includes encouraging cross brainz pollination!

CritiqueBrainz
With Suyash around (he worked on Critique Brainz as part of GSoC last year, and has been actively involved since), there were obviously a lot of discussions on reinvigorating the project. We discussed quite a few ideas, which included innovating ways of writing and sharing reviews, sharing it on social media, cross *brainz interactions, a few UI changes, etc. We’re considering allowing Quick Reviews that, like Twitter, are limited to 280 characters. What do you think? Suyash has written down his ideas for the same and would love some feedback from the community!

MessyBrainz
With all these talks, a critical need to build some matching and clustering infrastructure was highlighted. Rob has written a possible roadmap for the project trying to compose his thoughts!

And of course! We couldn’t let Rob’s first visit to India be all about work. After the sunset, we went exploring the city of Delhi. That included rides in tuk-tuks, spicy chicken biryanis, shopping for some colorful clothes and definetly, the Indian chaat 🙂

All in all, it was a very productive mini summit and definitely made us all, more excited to start working on the ideas we discussed. We will keep you updated and post more soon!

food-01.jpg
Some A lot of Indian food!
IMG_20180322_211308.jpg
The troope at India Gate
IMG_20180323_195125.jpg
Param is really into (a lot of) selfies.

MetaBrainz Summit 17

While the streets of Barcelona were filling up with the referendum conundrum, a bunch of people were spotted chattering and bantering, sometimes with pillows and colorful socks, searching for gelato.

Yes, that bunch of people would be us. 😀

Our annual MusicBrainz summit was held on September 30th–October 1st in the colorful, lively city of Barcelona. We had people (and chocolates) from nine countries: Spain, India, Germany, UK, USA, France, Estonia, Denmark, and Iceland.

Summit participants with *Brainz pillows
From left→right, top: Wieland (Mineo), Sambhav (samj1912), Sean (Leftmost Cat), Nicolás (reosarevok), Ben (LordSputnik), Jérôme (loujin), Alastair (alastairp); middle: Leo Verto, Freso, Michael (bitmap), Elizabeth (Quesito), Chhavi; bottom: Yvan (yvanzo), Rob (ruaok), Param (iliekcomputers), Suyash (ferbncode). Laurent (zas) behind the camera.


Having a majority of our team in a room with food obviously lead to lots of productive discussions. We talked about translations, recommendations engines, voting, and packaging. We also talked about SpamBrainz, user scripts being included as part of our projects, documentation, single sign-on for all Brainz, and a bunch of other things.

One of the nice things we could do this summit was to go over our user survey results. As you might remember, we had this banner on our site asking us to take part in a survey. The results gave us a good idea of our community in regards to what language they use, what Brainz project they use more, how do they come to know about us, and so on.

Summit session in progress
Summit session in progress.

We got to know what you like, but more importantly what you don’t. We heard all of you, and we are on it. We will publish a detailed report on that soon.

You cannot be in Barcelona with such a good lot of people and not end up exploring the city. The team ended up cycling on the streets of Barcelona (many times on the wrong side), climbing up to the mosaic-y Park Güell, snacking on pinchos and tapas, visiting the Pompeu Fabra University (where our AcousticBrainz project resides) and taking their daily after-lunch strolls through the Arc de Triomf.

Apart from that, some of the record-breaking points from the summit would be:

  • We had nice colorful pillows with all our kids (we mean, Brainz projects) printed on them. And summit t-shirts too.
  • The summit was live streamed on our YouTube channel, for all those who couldn’t make it. That went pretty well, with only minor technical difficulties, and it provided a good overview (literally! 🙂 ). For those who missed it (or want to rewatch it), the archived streams are available on YouTube.
  • We finally decided to improve the user experience of our projects (more on the blog about that later).
  • We worked on a new wonderful Sound Team recording while having a terrace barbeque hosted by Elizabeth.
  • More gelato was eaten than ever before. (That shouldn’t be surprising.)

We’re wrapping up the summit with this blog, but we have all the memories preserved. Find the amazing moments captured by our in-house photographer Zas in his Facebook gallery, and those moments in motion in my own video here:

Until next year,
Cheers 😀