A stack técnica do Cadencia
Cada ferramenta que usei para construir o Cadencia — por que escolhi e como cada uma encaixa.
Cadencia
Máquina de Posicionamento
O Cadencia coloca profissionais na frente do cliente certo, toda semana, em todo canal onde ele está — com a cara deles. Carrossel no Instagram com o rosto real. Email diário para a base de leads. Blog publicando automaticamente. Lead scoring trabalhando enquanto o profissional está atendendo.
Construí do zero com Claude Code. Abaixo está a stack completa — sem inventar, tudo que está aqui está rodando em produção hoje. Tem uma camada que não aparece nessa tabela: a que faz o sistema se comportar como um negócio. Isso fica para os próximos posts.
Se quiser ver como é uma sessão de debug real — gravei uma ao vivo:
Não é tutorial. É o processo real — com erro, confusão e solução no ar.
Próximos posts da série
- 2.Como o pipeline de geração funciona por dentro — 7 agentes, 90 segundos do zero ao PNG
- 3.A camada que essa tabela não mostra — e por que ela existe
- 4.Os três bugs que quase derrubaram o lançamento
- 5.O que eu faria diferente se começasse hoje
| Ferramenta | Camada | Por que escolhi | Como uso |
|---|---|---|---|
| Next.js 15 | Frontend | App Router resolve roteamento orientado a dados. SSR/SSG automático. Deploy no Vercel sem config. | Todas as páginas do Cadencia — dashboard, onboarding, área admin, landing pages por tenant. |
| React 19 | Frontend | Server Components reduzem bundle. Concurrent features mantêm UI responsiva mesmo com geração pesada rodando. | Interface completa. Hooks customizados para estado de geração de carrossel em tempo real. |
| Tailwind CSS | Frontend | Design system como configuração. Zero context switch entre CSS e HTML. | Estilização completa. Tokens de cor e espaçamento centralizados — cada tenant pode ter identidade visual própria. |
| shadcn/ui | Frontend | Não é biblioteca — é código que você copia e controla. Sem sobrescrever CSS de terceiro. | Todos os componentes: modais, forms, selects, toasts, sidebars, carrosséis de preview. |
| Zustand | Frontend | State management sem boilerplate. API mínima, sem Provider, sem reducer. | Estado global de auth, estado de geração em andamento, preferências de UI por tenant. |
| TanStack Query | Frontend | Cache de dados do servidor com invalidação inteligente. Elimina loading states manuais e polling manual. | Fetch de posts, ideias, planos e status de geração — com polling automático enquanto pipeline roda. |
| Framer Motion | Frontend | Animações declarativas em React sem sair do componente. | Tour de onboarding animado (12 passos), transições de preview de carrossel, feedback de geração. |
| Python 3.12 + FastAPI | Backend | Python pelo ecossistema de IA. FastAPI pela performance e pelo schema Pydantic automático — documenta enquanto você escreve. | Todos os endpoints de geração: pipeline de carrossel (7 agentes), dossiê de marca, ideias, análise de perfil Instagram. |
| Pydantic | Backend | Validação de dados e serialização com tipagem Python. Integra nativamente com FastAPI. | Modelos de request/response de toda a API. Configurações de ambiente via Pydantic Settings. |
| Anthropic Claude | IA | Melhor modelo para geração de texto longo com instruções complexas. Consistência de voz entre slides. | Geração de headline, copy de cada slide, legenda, hashtags, pesquisa de conteúdo e dossiê de marca. |
| Google Gemini 2.5 Flash | IA | Identity Lock mantém o rosto real da pessoa na imagem gerada — com consistência entre capas. Nenhum outro modelo faz isso com essa fidelidade. | Geração da capa do carrossel com o rosto do cliente. Cada capa parece feita por videomaker. |
| Playwright | Renderização | Cada slide é HTML + CSS renderizado por um browser real e exportado como PNG. Única forma de ter fidelidade visual de verdade a partir de código. | Renderização headless de todos os slides (1080×1350px). Roda em Docker no Railway com Chromium. |
| Supabase | Banco / Auth | PostgreSQL gerenciado + Auth nativo + Storage + API REST automática. Sem DevOps de banco. | Banco principal, autenticação, armazenamento dos PNGs gerados, fotos de rosto dos clientes e assets de identidade visual. |
| Asaas | Billing | API de pagamento brasileira com suporte a créditos pré-pagos, PIX, boleto e cartão. Webhook confiável. | Modelo de créditos: valida saldo antes de processar, debita depois. Webhooks de confirmação de pagamento. |
| Instagram Business API | Social | Publicação direta via OAuth sem terceiro no meio. | Connect/disconnect de conta Instagram, upload dos PNGs e publicação do carrossel completo. |
| Apify | Data | Scraping de perfil Instagram para extrair referências visuais e tom de voz real do cliente. | Roda no onboarding: analisa o perfil, extrai padrões visuais e linguísticos que alimentam o dossiê de marca. |
| Mixpanel | Analytics | Rastreamento comportamental com eventos customizados. Mostra onde o usuário abandona o funil. | Funil completo: onboarding, geração de carrossel, aprovação, publicação. Cada etapa rastreada com propriedades. |
| PostHog | Analytics | Feature flags com rollout gradual. Product analytics com gravação de sessão. | Controla quais features novas cada tenant vê. Analytics de produto complementar ao Mixpanel. |
| Sentry | Observabilidade | Captura qualquer exceção — frontend ou backend — com contexto completo: usuário, ação, stacktrace. | Toda exceção em produção vai para o Sentry. Sem isso você não sabe o que está quebrando. |
| Vercel + Railway | Infra | Vercel para Next.js (zero config, CDN global). Railway para Python + Playwright que precisa de Chromium — roda em Docker. | git push → deploy automático nos dois. Frontend na Vercel, backend no Railway com healthcheck. |
Receba os próximos posts da série
Sou Felipe Salgueiro — construí o Cadencia do zero sem ser dev. Mais 4 posts chegando. Deixa seu contato e mando direto no seu WhatsApp.
Sem spam. Cancele quando quiser.
Quer ver o produto funcionando?
O Cadencia é o que foi construído com essa stack. Gera carrosséis de Instagram com IA, dispara email diário para sua base, publica no blog automaticamente e mostra quem está quente antes de você abrir boca. Para profissionais que precisam aparecer online sem depender de agência.
Conhecer o Cadencia →