chhavijustme

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.

chhavijustme

import React, { Component } from 'react';
import { Button } from 'react-bootstrap';
import '../../App.css';
import '../../css/bootstrap.min.css';

class ButtonBlock extends Component {
  render() {
  	const wellStyles = { maxWidth: 400, margin: '0 auto 10px' };
    
    return (

chhavijustme

We are on our way to have a castle of pixel perfect pretty mockups. Will that castle be but an illusion? Sorry, for being so dramatic. What I am trying to say is, we need a plan on how to build it. And here are just some of my thoughts about it 😄

Our present game plan and all that is wrong with it

• Have the mockups ready
• Then someone, with some knowledge of how code works, will slice it up into tickets.
• Design-person coordinates on making sure every ticket owner has what he/she/zhe needs. Hey, where do I get this font? Is this the latest icon set?
• Design-person crosschecks when it’s done. It goes up and live.
• Someone finds we used a different button somewhere. We have a ticket. Which then needs to be taken up by someone. And before we know it, we have huge piles of UX-debt. I feel this is a very probably scenario, seeing the huge scale of projects we have.