O site de um romance, que abre como um livro.
— 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 01Home
A Home começa com o livro fechado e as páginas viram para revelar o site. Cada página é cortada em fatias verticais que se curvam durante a virada, animadas com a Web Animations API. A abertura espera as fontes e as imagens do topo (no máximo 4 s) para nunca abrir pela metade, aparece só na primeira visita e é pulada com prefers-reduced-motion.
Capítulo 02O livro
Sinopse, ficha técnica, onde comprar, o primeiro capítulo em PDF e resenhas. O trecho do capítulo abre com uma capitular vinho, e atrás do mockup do livro uma estampa desliza devagar na diagonal.
Capítulo 03Escritos
Contos e crônicas são o mesmo modelo Post do blog, com publishTo = WRITINGS. A Anahê escreve no mesmo editor e escolhe onde publicar. O site da escritora só filtra.
Capítulo 04Sobre · Contato
A bio e a trajetória vêm do painel. O formulário de contato separa o motivo (evento, imprensa, clube de leitura, escola ou outro) e passa por Turnstile, honeypot e limite de envios antes de virar um lead no painel.