Skip to content

Instantly share code, notes, and snippets.



Last active Aug 20, 2018
What would you like to do?
GSoC Final Evaluation

Brief Description of the Project

MusicBrainz is aiming for a user experience overhaul. To keep development and design in sync, we are building a UI component library. The components are written in react.js, and documented using react-storybook.

Tasks Accomplished

Selecting a UI Component Library

I compared various open source libraries out there to select one suitable for our purposes. We finally decided to go with react-bootstrap because of three main reasons:

  1. All basic components required for development are available.
  2. The community support for developers is amazing.
  3. Our other project, BookBrainz already utilizes react-bootstrap.

Initial Setup

I created a new repository for the MetaBrainz Design System. The initial set up required

  1. Adding react-bootstrap and react-storybook.
  2. Adding a custom webpack config for storybook.
  3. Adding yarn for package management. You can find all the work to set this up in this PR.

Adding UI components

I then started importing UI components required for our design system from react-bootstrap and modified their styling to match our UI mockups. The completed components can be found here and the ongoing components here.


We are using the add-info addon by react-storybook to document our components. The pull request is under review and can be found here.

UI Mockups

I continued my work on designing the UI for the upcoming design overhaul. Tickets on redesign of release page and release group page have all the discussions with the community and developers.

Work done

Here is a list of all the commits merged.

Future to-do

  1. Add the remaining UI components to the design system
  2. Develop the design principles, contributing guidelines for usage and creation of components.

Other Links

  1. MetaBrainz Design System
  2. My blog explaining basic music entities
  3. Blog announcing the UX overhaul for the community
  4. My GSoC proposal which details out the “whys” more
  5. Talk at about my GSoC project
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.