PrettyLitter

The original PrettyLitter site used Bootstrap to build all the components. I was tasked with rewriting all the components using Tailwind and document them using Storybook.

Storybook

An important goal of this project was to create a library of components that could be viewed and tested in isolation.

An easy way to accomplish this was to use Storybook, which allow you to view and interact with components in isolation. This made my workflow vey easy, as I could create and test the component on its own first and then plug it into the rest of the site.

export default {
  title: 'Atoms/Button',
  component: Button,
  argTypes: {
    type: { control: { type: 'select', options: ['nuxtLink', 'noText'] } },
    size: {
      control: {
        type: 'select',
        options: ['small', 'medium', 'large', 'xlarge'],
      },
    },
    variant: {
      control: {
        type: 'select',
        options: ['primarySolid', 'primaryOutline', 'primaryInverse', ...],
      },
    },
  },
}

const Template = (args, { argTypes }) => ({
  props: Object.keys(argTypes),
  components: { Button },
  template: '<div><Button v-bind="$props" /></div>',
})

export const Primary = Template.bind({})
Primary.args = {}

My responsibilities

• Rewriting existing components and building new components using Tailwind
• Using new components to build landing pages
• Creating Storybook stories for all base components