Lucas Batista
SaaSEm Produção2025

Petzara

SaaS full-stack de gestão para petshops — agendamentos, financeiro, equipe e assinatura Stripe

Ver projeto ao vivo8 fluxos em vídeo
React 19Vite 6Tailwind CSS v4Node.js 22Express 5
Roda emWebPWA (celular e computador)Desktop (Electron)
petzara.app
passos para agendar: pet, serviço e data
3
paletas de cor trocadas ao vivo
4
papéis — admin e colaborador — no mesmo petshop
2
instalável no celular e no computador
PWA

01

Visão Geral

O Petzara é um SaaS construído do zero com dois repositórios separados: front-end React 19/Vite e back-end Node.js/Express/MongoDB. O sistema é multi-tenant — cada petshop tem seus dados isolados, podendo adicionar colaboradores que compartilham o contexto em tempo real via Socket.io. Possui autenticação JWT com refresh automático via cookie httpOnly, sistema de assinatura completo com Stripe (planos mensal e anual, trial, webhooks e bloqueio de acesso ao expirar), cron jobs para atualização automática de status de agendamentos e envio de e-mails transacionais via Resend.

Meu papel

Desenvolvedor full-stack solo — arquitetura, back-end Node.js/Express/MongoDB, front-end React 19/Vite, Socket.io, integração Stripe completa, deploy Railway e manutenção em produção.

Categoria

SaaS

Ano

2025

Status

Em Produção

Plataformas

WebPWA (celular e computador)Desktop (Electron)

Dois repositórios, um produto: o front-end React fala só com a API, e a API é quem sabe de tenant, assinatura e status. Stripe, Resend e Socket.io orbitam o servidor — o navegador nunca vê um segredo.

App React 19

Vite · PWA · Railway

Tailwind v4React Router 7Socket.io clientRecharts

API Express 5

Node 22 · Railway

JWT + refresh httpOnlySocket.ionode-cronStripe webhook

Dados e serviços

MongoDB + integrações

MongooseStripeResendSentry

Sincronização: Cada recurso carrega o ObjectId do dono; colaboradores herdam o owner e entram na mesma sala do Socket.io — a mesma agenda muda para todo mundo ao mesmo tempo.

02

O Problema

Petshops crescem pelo boca-a-boca mas travam na operação: agenda no caderno, histórico de clientes perdido no WhatsApp, equipe sem visibilidade do dia e financeiro em planilhas. Com o crescimento, esse processo manual se torna um gargalo que limita a capacidade operacional.

03 — A Solução

SaaS multi-tenant com front-end React PWA e back-end Node.js/MongoDB: agenda de agendamentos com atualização automática de status, cadastro de clientes/pets/serviços, financeiro integrado, gestão de colaboradores com permissões e assinatura Stripe com trial — acessível como app instalável no celular.

04

Por dentro do produto

O sistema em funcionamento, gravado da aplicação real com uma loja de demonstração — nenhuma tela é mockup.

01

Agenda

Um agendamento em três passos — e a equipe vê na hora

Cliente e pet vêm do cadastro, o serviço base soma os extras ao preço, a data sai de um calendário e o horário de um relógio. Ao salvar, a linha entra destacada na lista, o status muda pelo menu da própria tabela e um cron leva o atendimento para “Em andamento” quando chega a hora.

  • Preço calculado na hora: serviço base + extras marcados
  • Status Pendente → Em andamento → Finalizado com transição automática por cron
  • Lista, mês, semana e dia sobre os mesmos dados, com filtros e busca
Agenda
02

Link público

O cliente escolhe o horário e fecha pelo WhatsApp

Cada petshop ganha uma URL própria (petzara.app/agendar/nome). A página pública lê a grade de horários, os intervalos e o número de atendimentos simultâneos configurados no painel, mostra só as vagas livres de manhã e à tarde e abre o WhatsApp da loja com a mensagem pronta — sem cadastro, sem senha.

  • Grade, pausas e capacidade vêm das Configurações do petshop
  • Slots ocupados somem sozinhos conforme a agenda enche
  • Link pode ser desativado com um toggle, sem apagar nada
Link público
03

Personalização

Quatro paletas, uma troca ao vivo

Terracotta & Sage, Deep Forest, Muted Ocean e Earthy Ochre. A escolha fica no usuário e vira duas CSS custom properties na raiz — sidebar, botões, gráficos e o próprio logo mudam sem recarregar a página.

  • Tokens do Tailwind v4 apontando para --brand-primary e --brand-secondary
  • Logo em SVG com uma versão por paleta
  • Preferência salva na conta: vale em qualquer aparelho
Personalização
04

Financeiro

Do atendimento finalizado à conta a receber

Cada agendamento finalizado gera uma receita; a aba Contas a Receber lista o que ainda está pendente e confirma o pagamento com a forma escolhida. Despesas entram por categoria, o fluxo de caixa e a pizza de despesas são calculados no servidor, e a base de agendamentos sai em CSV ou Excel por período.

  • Saldo, receitas e despesas do período com gráficos Recharts
  • Confirmação de pagamento com Pix, cartão ou dinheiro
  • Exportação XLSX/CSV gerada no navegador a partir da API
Financeiro
05

Equipe

Convite por e-mail e permissões por área

O admin convida pelo e-mail, define o departamento e marca o que o colaborador pode ver. O convite vai pelo Resend com um link de aceite; quem entra recebe o mesmo owner, cai na mesma sala do Socket.io e vê a agenda do dia — sem enxergar o financeiro se não for liberado.

  • Convite com validade e aceite com senha própria
  • Permissões por módulo, alteráveis depois
  • Notificações internas por categoria: agenda, cobrança e equipe
Equipe
06

Primeiro acesso

Wizard, tour guiado e checklist até o primeiro agendamento

Quem acaba de criar a conta configura nome, dias e horários de funcionamento e o link público em três telas. Depois um tour destaca, item a item, o caminho até o primeiro agendamento — e um checklist na home acompanha o progresso enquanto o trial corre.

  • Trial com aviso por e-mail antes de expirar e bloqueio suave ao vencer
  • Tour por data-tour: abre e fecha a sidebar sozinho no celular
  • Checklist de quatro passos com progresso na home
Primeiro acesso
07

Celular

Feito para o balcão: menu gaveta e formulários em folha

No celular a sidebar vira gaveta, os cards da agenda substituem a tabela e o novo agendamento sobe como folha. O PWA instala na tela inicial e o link público foi desenhado primeiro para o telefone do cliente.

  • Um layout, dois contextos: admin completo e colaborador focado no dia
  • Chunk error boundary recarrega sozinho após um deploy
  • Instalável como app, com atualização automática
Celular

05

8 fluxos em vídeo

Cada vídeo mostra uma tarefa completa, de ponta a ponta. Clique para assistir com controles.

06

Funcionalidades Principais

01

Agenda em Tempo Real

Agendamentos com transição automática de status (confirmado → em andamento → concluído) via cron job, com updates instantâneos para toda a equipe via Socket.io.

02

Gestão de Clientes e Pets

Cadastro completo de tutores e pets com histórico de serviços, observações e preferências de atendimento.

03

Controle Financeiro

Dashboard de receitas, transações e métricas do negócio com exportação de dados por período.

04

Gestão de Colaboradores

Cadastro de equipe com permissões escalonadas — colaboradores acessam apenas o necessário para o atendimento diário.

05

Assinatura Stripe

Planos mensal e anual com checkout Stripe, trial gratuito, webhook de pagamento e bloqueio automático de acesso ao expirar a assinatura.

06

PWA + Link Público de Agendamento

Instalável como app no celular via PWA. Link público permite clientes marcarem horário sem criar conta no sistema.

07

Telas do sistema

Capturas reais do produto, organizadas por módulo. Clique em qualquer tela para ampliar.

Visão geral: agendamentos no mês, receita por serviço e a agenda do dia
Status dos agendamentos e mini-calendário do mês
Central de notificações por categoria
Lista com pet, tutor, serviços, preço e ações por linha
Visão do mês
Semana com atendimentos por hora
Dia a dia, hora a hora
Passo 1: cliente e pet
Passo 2: serviço base e extras
Passo 3: calendário e relógio
Detalhe com tutor, responsável, observações e finalizar
Filtros de ordenação, período e status

08

No celular

O dono do petshop confere a agenda do balcão e o tutor marca pelo telefone — as duas telas foram desenhadas primeiro para o celular e instaladas como PWA.

Início
Menu
Agenda
Calendário
Novo agendamento
Financeiro
Clientes
Notificações
Link público
Confirmar
Login

09

Tecnologias

Front-end

React 19Vite 6Tailwind CSS v4

Back-end

Node.js 22Express 5

Banco de Dados

MongoDBMongoose

Deploy

Railway

Integrações

StripeSocket.ioResendGoogle OAuthSentry

Bibliotecas

React Hook FormRechartsReact Router 7node-cronvite-plugin-pwa

10

Decisões de Design

Quatro temas de cor trocáveis em runtime via CSS custom properties (terracotta, forest, ocean, ochre). Interface dividida em dois contextos: admin com gestão completa e colaborador com visão focada no atendimento do dia. Tour guiado integrado via GuidedTourContext para onboarding de novos usuários.

11

Desafios Técnicos

O webhook do Stripe exige o body cru (Buffer) para validar a assinatura via secret, mas o express.json() consome o body antes. Solução: montar a rota do webhook antes de qualquer middleware de body parsing. Segundo desafio: o refresh token inline no authMiddleware que regenera o access token sem rejeitar a requisição — o novo token é retornado no header X-Access-Token e capturado pelo interceptor axios do front-end de forma transparente.

12

Resultados

  • SaaS em produção com agendamentos e assinaturas Stripe ativas
  • Multi-tenancy funcional: admin e colaboradores compartilham dados em tempo real via Socket.io
  • PWA instalável no celular com link público de agendamento para clientes sem conta

13

Aprendizados

  • JWT com dupla camada: access token 15 min + refresh token 30 dias em cookie httpOnly, renovado automaticamente via interceptor axios sem redirecionar o usuário
  • Multi-tenancy em MongoDB: isolar recursos por owner ObjectId, com colaboradores herdando o contexto do admin via campo owner
  • Integração Stripe completa: a rota do webhook precisa ser montada antes do express.json() para receber o body cru e validar a assinatura — detalhe que quebra a integração se ignorado
  • Socket.io com salas por owner: todos os eventos (agendamentos, clientes, pets, financeiro) disparam updates em tempo real para admin e colaboradores simultaneamente
  • Cron jobs em produção: atualização automática de status de agendamentos, alertas de trial expirando em 3 dias e expiração automática de trials vencidos

Gostou desse projeto?

Tem uma ideia parecida ou quer construir algo diferente? Vamos conversar.

WhatsAppEnviar mensagem

Outros projetos

Ver todos
Capa — VendaíPrévia em vídeo

SaaS

Vendaí

Sistema completo de ponto de venda para petshops, casas de ração, mercearias e lojas de bairro: PDV com leitor de código de barras, caixa, estoque, fiado, contas a pagar, PIX, 50+ relatórios e Recebimento Seguro — tudo funcionando sem internet, com sincronização para a nuvem e app de gestão no celular.

Capa — EA CentralPrévia em vídeo

Sistema Web

EA Central

Loja B2B de acessórios para celular: catálogo com 349 produtos e filtro por aparelho (293 modelos), preço progressivo por quantidade, carrinho com escolha de cores, frete real e checkout que abre o WhatsApp com o pedido pronto. Painel completo para o lojista, exportação Excel/PDF e medição Meta Pixel + Conversions API.

Capa — TrativaPrévia em vídeo

SaaS

Trativa

CRM completo para equipes comerciais brasileiras: pipeline de 9 etapas, kanban com drag-and-drop, WhatsApp Cloud API integrado, campos personalizados, relatórios de funil, metas de vendas e app desktop instalável — 4 repositórios, um produto.