A Frontend Monorepo Architecture in Kitabisa Third Party Platform
Working from home for more than 6 months, I had more chances to write from my experience as a code writer in Kitabisa.
This is my first writing in Medium and I hope I can write more often in the future.
Introduction
Further introduction about Monorepo (since it is mentioned in the title), at this time I was in third party platform squad (next we short in 3pp) yap, the definition of 3pp it’s the same as the existence of a third party which means a lot of partners that depends on Kitabisa system, for example, if you using the Gojek application and then got a notification for doing kindness to donation and you open the Gojek application for donation through Gogive, that application who handled by 3pp Squad of Kitabisa.
There’s a lot of 3pp partners in Kitabisa besides Gojek, like Dana, Halodoc, Kumparan, Linkaja, and more than 10 partners (this time) who are handled by 3pp Squad of Kitabisa. So let’s go straight to the technology side, in Backend itself, there is a service called Sekawan for providing a lot of data that will be consumed for FE internal or external partners.
Frontend Monorepo ?
For the Frontend in 3pp, why do we use monorepo ? because for easy and fast in doing development based on the template that we made (further about our template, in the section of project structure) monorepo architecture in 3pp initiated by mas @ryanriatno, for right now there’s a lot of development did by us, we try in one monorepo using a lot of tech stack in frontend like next.js, react, and svelte. In 3pp itself for Frontend, there’s a lot we provide not just in the browser screen, but in the webview of our partner application.
Based on the article from dev.to for creating Design System Monorepo, we began using lerna, however, we move using the feature of yarn that is yarn workspace for reducing our dependence through many tools that we used.
Project Structure
As the reference of the image above regarding the Monorepo, so each partner’s needs have a package like this one below:
Each package can share components that can be taken from the ui-library package, to run and use them for each package are easy, via the script in package.json.
To initial project, just run the script of yarn install-template like the picture above that will run based on the folder scripts file in install-template. Then, will appear the command like this one:
Options will be given to choosing a starter project that will be used. Hopefully, it can help if someone wants to use the initial project with monorepo architecture.
Conclusion
Determining the sharing project with the initial Monorepo is certainly difficult. With a fast deadline request, it is very helpful for the frontend engineering team to finish the project. Maybe if we look deeper and we’ve been working on a monorepo project for a long time, we still have many weaknesses.
If you guys are interested with us to learning together for developing Kitabisa and you’re the person who can help us being part of the engineering team or in any role, you can go through this link kitabisa
