If you have ever attempted to extract your UI libraries into an abstract package which can be consumed just like any other NPM package. You’ll probably have encountered quite a few hurdles. For example: 1. How do I ensure code quality and reusability? 2. How do I actually publish an NPM package? 3. Can the publishing of packages be automated by CI/CD? 4. How do I provide interactive documentation like Bootstrap or Material UI? In this presentation I will showcase a solid workflow when a developer makes a change and push it to GitHub to automatically publish the package both to NPM and the documentation of storybook to an Azure webapp. It will tackle many hurdles such as GitHub pipelines, NPM publish, Docker and Storybook.

Writing one component is easy. Conditionally rendering two different ones is still not hard. But what if you face an "n" number of permutations. "n" number of different UI elements and scattered business logic? Switch statements all over the place. Might not sound scary when we write the code. What about your future self? Cognitive load fires off the roof. Maintaining your code? Onboarding new devs? Good luck. Sounds all too familiar? Let's see a possible solution how to tame complexity. How to tackle a large number (possibly infinite) of branches in a frontend codebase without losing our sanity.

The journey of creating a design systems and how to scape the common pitfalls to reach success implementing a design system in your company.