Um painel para três sites.
— Ecossistema
Anahê Canavezzi é escritora e designer. Ela precisava de três sites públicos (o do livro, o do estúdio e o blog) e de um painel para cuidar de tudo sem depender de mim. Montei os quatro apps Next.js num monorepo com Turborepo e pnpm, servidos por uma única API NestJS e um único banco.
Decisão de arquitetura
Considerei micro-frontends e descartei: não há vários times nem composição em runtime. São quatro sites que compartilham design system, tipos e schemas, que é o caso de uso do Turborepo.
Um painel e uma API cuidam do conteúdo dos três sites públicos.
— A história
Capítulo 01Login · Dashboard
O painel chama a API pelo próprio /api, então os cookies de sessão ficam só no domínio do painel e nunca chegam aos sites públicos. O segundo passo do login é um código por e-mail ou um app autenticador. O dashboard mostra o analytics próprio dos três sites, sem script de terceiros.
Capítulo 02Posts · Editor
O editor usa Tiptap e mostra o texto com o mesmo estilo que ele terá no site (Editorial, Ensaio ou Visual). Na hora de publicar, a pergunta é "Onde publicar": Blog ou Escritos.
Capítulo 03Escritora · Estúdio · Portfólio
Lojas, serviços, etapas, clientes, depoimentos: tudo segue o mesmo padrão. Busca, lista ordenável por arrastar, interruptor "mostrar no site" e edição numa gaveta lateral. Os cases, mais longos, abrem um editor de página inteira.
Capítulo 04Leads · Briefings · Mídia
Contatos e orçamentos chegam em Leads, num kanban de arrastar entre etapas, e a resposta ao cliente é escrita e enviada por e-mail de dentro do painel. Briefings, comentários à espera de moderação e a biblioteca de mídia dos três sites ficam no mesmo lugar.
Capítulo 05Configurações · Conta
O menu da conta fica no pé do menu lateral: idioma (português ou inglês), tema claro ou escuro e sair. O tema escuro é um marrom quente, nunca preto puro, e um tour guiado apresenta o painel na primeira vez.