DevrosUI
A React component library with reusable responsive and lightmode compatible components.
The purpose of DevrosUI
DevrosUI creates consistency in UI/UX by providing one interface for frequently used webcomponents which can be installed and used across several projects.
What does it solve
With DevrosUI, you don't have to manually copy-and-paste frequently used webcomponents into different projects. Also, when you change the implementation or style of one component, the change will be automatically propagated to all the projects that use this component.
How I was involved in this project
I was responsible for creating the architecture of the React component library which includes the documentation site, the component library itself and the testing environment as well as the communication between these directories. I have also implemented the components, tested them with Storybook and I have written the documentation for each component.
Techstack that I've used
The components are implemented with React and Typescript because React allows to create stand-alone reusable components and Typescript makes it clear for the user in what format the input of a component is expected and how to use the component due to typechecking. The documentation site is made with Next.js and MDX because Next.js allows for SSR and has a clear directory architecture which feels more native than React. MDX is used to write the documentation pages because MDX allows to use markdown elements and combine it with JSX. This improves the readability of the .mdx file and extends the functionalities by implementing components inside the markdown file. For testing, I have used Storybook because Storybook renders components without including the components in a page and you can create different stories of every variant and scenenario of a component.
The architecture of Notify
DevrosUI is a monolithic repository which includes the following main directories: docs, lib and testing. The documentation site resides in the docs directory. The components as well as the NPM configuration lives inside the lib directory. The Storybook environment is implemented inside the testing directory. NPM has linked the lib directory with the docs and testing directory so that the docs and testing library can use the package name of DevrosUI to import the components instead of using very long paths. This makes the repository more scalable and mimics the use of DevrosUI in production. Dependencies that are related to only one of the directories are installed inside these directories. That means that the root package.json should not include any dependency.
core features
With DevrosUI you can easily import a variety of webcomponents by using the abstracted interface. The components are responsive and light-mode compatible.
lessons I've learned
During the development of DevrosUI I have learned how to use path aliases to replace long import paths and how to use Storybook to test different functionalities and variants of components and how to improve the accessibiliy of these components. I also gained experience in documenting my code inside the functions as well as on the documentation pages. When publishing my library as NPM packet, I familiarized myself with the vite config file in the sense of what the responsibility of the build options are and how they affect the behaviour of Vite.