Webstacks UI Library

And a template repository too!'

A computer screen with showing different aspects of web design
typescript
mui
styledComponents
storybook

Framework Agnostic Template Repository

While employed at Webstacks as a frontend engineer, I, along with two others, architected and developed a framework agnostic template repository/UI library. The library consists of all your basic UI elements, atomic design variables, and all supporting documentation for its use.

The UI library leverages a customized version of MUI and Styled Components to make a prop-based CSS system you can quickly style within your JSX. With the help of Typescript, helps limit your choices for props and keeps all devs within the given style guidelines.

Atomic design principles

Here you can see the beginning building blocks of the UI library. Aka, the atoms. This shows the storybook switching between light and dark modes.

Atomic design principles

Here you can see the beginning building blocks of the UI library. Aka, the atoms. This shows the storybook switching between light and dark modes.

Gif showing the UI library storybook
Gif showing the UI library storybook
Gif showing the UI library storybook

Key Points

  • This library is currently in production by five large-scale tech companies including Freshworks, Justworks, & Mutiny.

  • Developed by a small team with high levels of communication (regarding complex ideas, architecture, and strategy) and collaboration.

  • Consistently maintained, updated, and debugged as the head "librarian" of the UI Library.

  • Gave regular training to adjacent team members on its implementations and abilities.

©JW Development 2022 Resume