A Journey in Monorepo Architecture for a React Native UI Kit — Part 1: Inception
Introduction
At Soldo, a company at the forefront of redefining business spending, we understand the importance of efficiency, consistency, and user experience in mobile app development. To address these needs and empower our development team, I undertook a significant project to create a Mobile React Native UI Kit that aligns seamlessly with our mission.
In this series of posts, I’ll share the story of our journey at Soldo, where we built a robust mobile UI kit with an emphasis on providing an exceptional development experience. Our objective was not just to create a UI kit, but to lay the foundation for a unified, user-friendly interface across all our applications.
We’ll dive into the decisions that drove our project’s architecture, such as the adoption of a monorepo structure. I’ll explain how we structured our packages to encompass a design system and a comprehensive UI kit. Additionally, we’ll explore the implementation of Storybook for in-depth documentation, making it easier for our teams to utilize the UI kit effectively.
Our journey also involved key elements like theme management, TurboRepo integration for efficient development, strict linting practices powered by Husky and lint-stage, and the advantages of TypeScript in achieving code quality and maintainability.
I invite you to join us on this expedition into the world of UI kit development and discover how it has improved the way we build mobile applications at Soldo.
Project Inception
At Soldo, we take pride in our mission to revolutionize business spending, and a crucial part of this journey is providing our users with a seamless, consistent, and user-friendly experience across our suite of mobile applications. With a commitment to this vision, the inception of the project to create a mobile React Native UI kit was born.
Identifying the Need
The need for a comprehensive UI kit became evident as our mobile development team struggled with the challenges of maintaining design consistency, ensuring a smooth user experience, and increasing development efficiency. We noticed that we were often reinventing the wheel by creating similar components in isolation, leading to inconsistencies and inefficiencies.
Challenges and Goals
The challenges were numerous. First, maintaining a cohesive design language was difficult, leading to confusing user experiences. Second, the development process was often time-consuming, with duplicated efforts on common UI components. To address these issues, we set clear goals:
- Design Consistency: Our primary goal was to create a design system and UI kit that would establish a consistent design language across all our mobile applications.
- Efficiency: We aimed to simplify the development process by offering a comprehensive UI kit with reusable components. This would reduce development time and enhance productivity.
- Scalability: As the app continues to grow, our UI kit needs to be scalable and adaptable to the evolving needs of our products. It should provide a solid foundation for future app development.
- Quality and Maintainability: Code quality was a top priority. We wanted to ensure that our UI kit would be easy to maintain, free from errors, and future-proof for constant improvements.
Inspiration and Motivation
Our inspiration came from seeing the impact of well-structured UI kits in other teams and tech companies. This drove our motivation to embark on this project and create something truly remarkable.
In the following sections, we will dive deep into how we turned this inception into reality, from the selection of the right tools to the development of a monorepo structure, and the integration of essential features like theme management, TurboRepo, linting, Husky with lint-stage, and TypeScript.
If you like what you read, be sure you won’t miss a chance to give 👏 👏👏 below — as a writer it means the world! Also, feedbacks are most welcome as always, drop them below in the comments section.
