Pitomba Bio – Micro-SaaS de presença digital

Micro-SaaS para profissionais e negócios locais criarem, personalizarem e publicarem uma página de bio com editor visual.

Visão geral

Produto próprio desenvolvido com Next.js, React, MongoDB e Vercel Blob para transformar a página pública no próprio editor. Combina rascunho local, publicação, temas cadastráveis, blocos modulares, QR Code, analytics anônimo e onboarding guiado.

Desafio

Pequenos negócios precisavam de uma presença digital simples, mas editores tradicionais adicionavam complexidade. O desafio era criar uma experiência de publicação acessível sem abrir mão de flexibilidade visual e consistência de dados.

Solução

Estruturei um editor contextual em que a própria bio funciona como preview e área de edição. Implementei persistência otimista com controle de revisão, catálogo de temas como registros no banco, auto-detecção de links, blocos por nicho e cálculo de horário de atendimento.

Arquitetura

  • Next.js App Router com rotas públicas e editor autenticado
  • MongoDB para páginas, temas e contas
  • Vercel Blob para imagens e mídia
  • Persistência local para rascunhos sem cadastro

Decisões técnicas

  • Editor contextual para reduzir a distância entre editar e publicar.
  • Temas como registros de catálogo para permitir evolução visual sem migrações frequentes.
  • Persistência otimista com revisão para evitar sobrescrita silenciosa.

Destaques de Engenharia

  • Editor visual contextual com blocos modulares
  • Rascunho local e publicação integrada ao cadastro
  • Temas cadastráveis sem nova alteração de schema
  • Persistência otimista com controle de concorrência
  • Onboarding guiado e analytics anônimo

Impacto

  • Reduzi a barreira inicial para criar uma presença digital publicável.
  • A arquitetura permite adicionar temas e blocos sem reestruturar o banco a cada evolução.

Resultado

  • Antes: criar uma página exigia configurar várias partes separadas -> Depois: o usuário edita diretamente o resultado final.
  • Antes: temas dependiam de alterações estruturais -> Depois: temas passaram a ser registros de catálogo.

Tecnologias

  • Next.js 16
  • React 19
  • TypeScript
  • MongoDB
  • Vercel Blob
  • Framer Motion
  • Tailwind CSS