Monorepo

Related tags

Portfolio Projects (2)

• Mono CLI SystemHootsuite

  September 2020 - October 2023

  Bucharest, Romania

  • CLI System inspired by both ESLint and React / ReactDOM
  • Allows developers a type-safe, intuitive and configurable SDK to easily create CLI commands and ESLint-inspired Configs to be published to NPM (CLI SDK)
  • Allows consumers to either import a pre-(or partially)-built CLI or build their own from building blocks on NPM (CLI Core)
  • Commands are the building-blocks (React Components)
  • Configs are fully (or partially) constructed CLIs built from Commands
  • If ”You use a library to write code make things happen, and a framework uses your code to make things happen”, then Mono is both
  • You use React to create an app, and you use ReactDOM to render the app
  • You use the CLI SDK to create Commands and Configs, and you use the CLI Core to build a functional CLI from Commands and/or Configs

  Yarn 3MonorepoTypescriptBashZSH

• Whitelabel Design SystemPlatform24

  January 2024 - September 2025

  Bucharest, Romania

  Fully per-partner customizable design system

  • Enable full customization from the brand and system colors to sematic mapping of variables to component facets
  • Built with Vanilla Extract from the ground up to write fully type-safe code and expose only CSS generated at build-time
  • Uses the ESLint Logical Properties package and React ARIA for accessibility.

  Unified flow from UX to Dev

  • Design variables and variable mappings primary color -> surface background are imported directly from figma
  • Variables, mappings and contracts are baked in directly to published packages
  • Devs use semantic variables and have no access to primitives or mappings
  • Export functions bound to CSS layers to be used by DS or applications

  Uses latest CSS techniques

  • Uses CSS Layers to delineate clear cascade layers between reset, variables collections, framework (design system) and application styles.
  • Uses CSS Containers to encapsulate styles and create truly responsive components and layouts
  • CSS Variables and partner-specific colors and mappings are calculated and rendered on server

  Modern Monorepo Setup

  • Full monorepo tooling built with Yarn Plugins
    • TSConfig Generation
    • ESLint Setup
    • Vite Setup
    • Dependency checks
    • Dependency enforcement
    • Gitlab CI parallel step setup
    • Package versioning with Yarn
    • Commit message enforcement & automation + tooling
  • Gitlab CI setup for build, lint, test and publishing any number of packages when required
  • Local and CI setup tooling for private scoped npm registries

  Yarn 4MonorepoDesign SystemTypescriptVanilla ExtractGitlab CIFigmaJFrogNPM Registry