Arquitetura Monorepo com Turborepo

Ao desenvolver aplicações modernas fullstack, é comum termos múltiplos projetos: backend, frontend, documentação, design system e configurações compartilhadas. Para organizar tudo isso no projeto Fincheck, utilizei a abordagem monorepo com Turborepo.

O que é Monorepo

Monorepo é quando vários projetos vivem dentro do mesmo repositório. Em vez de ter:

repo-backend
repo-frontend
repo-ui

Você tem um único repositório com tudo.

Vantagens

Compartilhamento de código
Compartilhamento de tipos TypeScript
Design system compartilhado
Pipeline única de CI/CD
Versionamento único
Refatorações mais fáceis

Estrutura do projeto

Exemplo de estrutura:

apps/
  web        -> frontend React (Vite)
  api        -> backend NestJS
  docs       -> documentação (Next.js)
packages/
  ui         -> componentes compartilhados
  eslint-config
  typescript-config

Explicação

Pasta                Função
apps/web        -->  Frontend
apps/api        -->  Backend
apps/docs       -->  Documentação
packages/ui     -->  Componentes reutilizáveis
packages/config -->  Configuraçõe compartilhadas

Isso permite, por exemplo, importar componentes do UI direto no frontend:

import { Button } from '@fincheck/ui'

Turborepo

O Turborepo gerencia builds e tarefas.

Exemplo de pipeline no turbo.json:

{
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"]
    },
    "lint": {},
    "test": {},
    "typecheck": {}
  }
}

O que isso faz

Build roda dependências primeiro
Cache de build
Executa tarefas em paralelo
CI mais rápido

Conclusão

Usar monorepo com Turborepo deixa o projeto com estrutura profissional e escalável, mesmo sendo um projeto pessoal.