Craftnote, 2020 – 2023
A design system and monorepo for a craftsmen’s work app
Built a shared component library, moved the web app to an Nx monorepo, and shipped paywalls, A/B testing and analytics for a task and time-tracking product.
Context
Craftnote is a project, task and time-tracking app for craftsmen and construction businesses in Germany. The web app had grown feature by feature on Bootstrap, and UI was built separately in each area.
My role
Web frontend engineer on the product team, owning large parts of the Angular web app.
What I did
- Created a custom component library with shared colour palettes and typography, documented in Storybook.
- Moved the web application into an Nx monorepo to separate features and shared code.
- Replaced Bootstrap with Angular Material for a consistent, accessible base.
- Built task and time-tracking dashboards, a global search across projects, tasks and chats, in-app notifications and a settings area.
- Added paywalls for lead generation, A/B-tested releases with Firebase Remote Config, and reporting with Firebase events and BigQuery.
- Integrated Phrase for German and English, and Sentry for error monitoring.
Outcome
- One shared component library across the web app instead of per-feature UI.
- Product decisions backed by A/B tests and event data rather than guesswork.
- A bilingual product and faster bug triage through Sentry.
Need something similar?
- Design systems & Nx monoreposA shared component library, documented in Storybook, in a monorepo that scales with your team.
- Remote Angular developmentA senior Angular engineer joining your team remotely to ship features end to end.