Skip to content

Instantly share code, notes, and snippets.

@chhavijustme

chhavijustme/gsoc.md

Last active January 26, 2022 17:35
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save chhavijustme/8feddbe5016365e2d6757a3605607fb9 to your computer and use it in GitHub Desktop.
Save chhavijustme/8feddbe5016365e2d6757a3605607fb9 to your computer and use it in GitHub Desktop.
Download ZIP
GSoC Final Evaluation
Raw
gsoc.md

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.

Documentation

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 DevConf.in about my GSoC project
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment