Create a monorepo to build a grate UI Kit



GoBarber Web
Design System - Test front of Quero Educação

make with love <3

GitHub top language GitHub language count Codacy grade Repository size

See the project working


this project was divided into 2 repositories, one for the design system and another for the implementation of the page with the features.

A Monorepo with multiple packages and a shared build, test, and release process.

  • 🐉 Lerna  - The Monorepo manager
  • 📦 Yarn Workspaces  -  Sane multi-package management
  • 🚀 React  -  JavaScript library for user interfaces
  • 💅 styled-components  -  CSS in JS elegance
  • 🛠 Babel  -  Compiles next-gen JavaScript
  • 📖 Storybook - UI Component Environment
  • 🃏 Jest  -  Unit/Snapshot Testing


  • yarn dev - This starts Storybook for viewing all the components locally.
  • yarn bootstrap - This installs all of the packages and links dependent packages together.
  • yarn build - This babelfies all of the packages and creates /lib folders for each one.
  • yarn test - Run all linting and unit tests before committing.
  • yarn test -o - Run only the tests that have changed.
  • yarn test -u - Update all of the snapshot tests.


  • lerna changed - Show which packages have changed.
  • lerna diff - Show specifically what files have cause the packages to change.


  1. Run yarn build
  2. Run yarn dev
  3. Change the package.json of the consumer from $YOUR_PACKAGE_NAME (which lives inside the monorepo) to file:./../monorepo/packages/$YOUR_PACKAGE_NAME
  4. Run rm -rf node_modules && yarn in the consumer
  5. 🎉


  • Run npm publish --access public - Make project public
  • Run yarn run lerna-publish - Send to npm
  • Run yarn deploy-storybook - Make deploy to S3 of AWS