Pular para o conteúdo
Ecossistema Anahê · 03/05blog.anahe.com.br

Anahê · Caderno

Um blog que se lê como um caderno.

Papel
Design System & Full-stack
Ano
2026
Status
No ar

— Ecossistema

Quatro apps, uma API

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.

PostgreSQL · Redis · R2Railway · Cloudflare

Um painel e uma API cuidam do conteúdo dos três sites públicos.

— A história

Como construí cada parte

Capítulo 01Home

A capa do caderno

Textos sobre escrita, design e o trabalho por trás dos dois. Os títulos dos posts usam Literata, uma serifa de leitura, e a Home abre com o post mais recente e a lista de todos os textos, filtrável por categoria.

blog.anahe.com.br
  • Skeleton com o mesmo desenho da tela final
  • Categorias configuráveis no painel

Capítulo 02Post

Ler, ouvir, comentar

O post tem modo leitura, com tamanho, fonte, espaçamento e tema ajustáveis, e a opção de ouvir o texto. Comentários e reações pedem só nome e e-mail: o leitor confirma o e-mail uma vez, e os comentários passam pela moderação no painel.

blog.anahe.com.br
  • Sem conta e sem senha
  • Ouvir o texto com a Web Speech API

Capítulo 03Busca · Arquivo · Categoria

Encontrar qualquer texto

A busca abre como spotlight, pelo Ctrl+K, pela barra ou pelo ícone, com resultados enquanto você digita. O arquivo agrupa tudo por ano e mês, e categorias e tags têm página própria.

blog.anahe.com.br
  • Navegação completa por teclado
  • Busca full-text no Postgres, sem serviço externo

Capítulo 04SEO · RSS

Em cache até alguém publicar

Os dados das páginas ficam em cache, marcados por tag. Quando a Anahê publica no painel, a API manda revalidar só as tags afetadas. RSS, sitemap e imagens Open Graph saem do mesmo dado.

blog.anahe.com.br
  • Revalidação por tag, com novas tentativas
  • Imagem Open Graph por post

— Tecnologias

Front

  • Next.js 16
  • React 19
  • TypeScript
  • Tailwind CSS v4
  • next-intl

SEO

  • revalidateTag
  • RSS
  • Sitemap
  • Open Graph
  • JSON-LD

Monorepo

  • Turborepo
  • pnpm workspaces

API

  • NestJS 11
  • Prisma 7
  • PostgreSQL 18
  • Redis 7 · BullMQ

Infra

  • Vercel
  • Railway
  • Cloudflare
  • R2