Keeneat · 2023
Keeneat: AI Music Service & Back Office in a Turborepo Monorepo
Service web and back office merged into one Turborepo monorepo with a shared UI package.
Overview
I built the service web and back office of Keeneat, an AI music creation service, and merged the two products into one Turborepo monorepo with a shared UI package so they use the same components and design tokens.
Background
Problem
The service web and the back office were built separately, so the same components and styles had to be maintained twice.
What I did
- Merged the service web and back office into one Turborepo monorepo, with the shared UI package in its own workspace.
- Built an Ant Design-based design system with brand-aligned theme tokens and Atomic Design rules for component layers.
- Set component conventions the team adopted.
- Built the back office charts with Chart.js.
- Cut key screen rendering from 200ms to 50ms.
Results
- Rendering 200ms → 50ms
Rendering optimization cut key screens' render time by 75%.
- One monorepo for two products
With a shared UI package, both products use the same components and design tokens.
Key features
- 01
Shared UI package
The service web and back office share one package of components and design tokens.
- 02
Back office charts
Member statistics and other operating metrics, charted with Chart.js.
Screens
※ Sensitive data is blurred in the recordings.
