Cardápio Pro

Como Desenvolvi o Cardápio Pro: Um SaaS Multi-Tenant Completo com Next.js 15, Supabase e Mercado Pago

Descubra os bastidores técnicos da criação do Cardápio Pro, um ecossistema SaaS completo para gestão de restaurantes e delivery automatizado com Next.js, React 19, Supabase e Mercado Pago.

Como Desenvolvi o Cardápio Pro: Um SaaS Multi-Tenant Completo com Next.js 15, Supabase e Mercado Pago

No mercado moderno de alimentação, a digitalização deixou de ser um diferencial e se tornou um requisito de sobrevivência. Restaurantes, hamburguerias e delivery no geral sofrem constantemente com taxas abusivas de marketplaces de comida ou com a completa desorganização ao receber dezenas de pedidos pelo WhatsApp.

Pensando em solucionar essa dor real de ponta a ponta, desenvolvi e lancei o Cardápio Pro: um ecossistema Software as a Service (SaaS) Multi-Tenant moderno, escalável e extremamente robusto, projetado para permitir que qualquer estabelecimento crie seu cardápio digital próprio, gerencie pedidos em tempo real, controle entregas e processe pagamentos de forma totalmente independente.

Neste artigo, vou compartilhar os detalhes de arquitetura, a stack tecnológica escolhida e os principais desafios superados no desenvolvimento deste projeto que agora integra o meu portfólio profissional.

🎯 O Desafio do Projeto: Um Ecossistema Integrado

Criar um sistema de cardápio digital simples é um projeto comum, mas criar um SaaS de nível de produção exige um nível de complexidade muito mais elevado. O objetivo do Cardápio Pro foi unificar várias frentes de uma operação gastronômica em um único painel ágil e intuitivo, dividindo o sistema em cinco grandes pilares de acesso:

1. O Cardápio Público (Storefront): A vitrine do estabelecimento, onde os clientes acessam via URL personalizada (cardapiopro.com/store/nome-da-loja), montam seus pedidos (com múltiplos opcionais e adicionais), escolhem a forma de entrega e efetuam o pagamento online.
2. O Dashboard de Gestão (Painel do Dono/Gerente): Painel administrativo completo para gerenciar produtos, categorias, cupons de desconto, controle de estoque de insumos, regras de taxas de entrega por bairro e o inovador painel KDS (Kitchen Display System) para a cozinha.
3. O PDV Interno (Ponto de Venda): Um sistema rápido para lançar pedidos presenciais, balcão ou mesas diretamente na mesma fila do delivery.
4. O Painel do Entregador: Um portal móvel dedicado onde motoboys e entregadores parceiros visualizam entregas disponíveis, aceitam corridas, traçam rotas e conversam em tempo real via chat com o estabelecimento.
5. A Administração da Plataforma (Admin SaaS): Onde gerencio os planos dos assinantes (através de regras rígidas de expiração e limites do sistema) e acompanho o faturamento geral.

💻 A Stack Tecnológica e Decisões de Arquitetura

Para garantir uma experiência de uso extremamente rápida e reativa (essencial para o ambiente dinâmico de um restaurante movimentado) e, ao mesmo tempo, facilitar a indexação dos cardápios digitais nos motores de busca (SEO), escolhi a dedo as tecnologias mais modernas do ecossistema JavaScript:

mermaidgraph TD    A[Next.js 15 App Router] --> B[Supabase Database & Auth]    A --> C[Mercado Pago API & Webhooks]    A --> D[Tailwind CSS v4 & Framer Motion]    B --> E[Row Level Security - RLS]    B --> F[Realtime Listeners]

1. Next.js 15 (App Router) & React 19

O coração do front-end e das rotas de API. O Next.js 15 com o novo compilador Turbopack proporcionou tempos de build extremamente baixos. Utilizei técnicas avançadas de renderização híbrida:

• Static Site Generation (SSG) e Incremental Static Regeneration (ISR) para as páginas de pouso institucionais, blog e documentações, garantindo carregamento instantâneo.
• Dynamic Server Rendering para as lojas dos clientes, assegurando que alterações em preços ou disponibilidade de produtos reflitam no mesmo segundo.

2. Supabase (PostgreSQL, Auth e Realtime)

O banco de dados relacional robusto que sustenta o sistema. A arquitetura multi-tenant foi blindada utilizando RLS (Row Level Security) nativo do PostgreSQL, assegurando que o tenant_id isole completamente os dados de cada restaurante de forma implícita e segura no nível do banco.

• Autenticação Avançada: Integração com JWT contendo metadados de roles (owner, gerente, cozinheiro, entregador) integrados direto no Supabase Auth.
• Realtime Subscriptions: Utilizado para atualizar instantaneamente o KDS da cozinha e o painel de pedidos do gestor no momento exato em que um cliente fecha um carrinho no storefront.

3. Integração com Mercado Pago (Assinaturas e Checkout PIX)

Para viabilizar a monetização automatizada, implementei o fluxo completo de pagamento com o Mercado Pago:

• No Cardápio Digital (Clientes): Geração dinâmica de QR Code PIX via API. Os pedidos só mudam para “Confirmados” após o disparo e processamento correto do Webhook de Pagamentos do Mercado Pago, eliminando fraudes com falsos comprovantes.
• Na Plataforma SaaS (Assinaturas): Fluxo de faturamento recorrente para a renovação automática das mensalidades do sistema, integrado a um middleware personalizado que restringe a escrita em painéis de clientes inadimplentes ou com períodos de testes expirados.

🛠️ Recursos Técnicos de Destaque Desenvolvidos

• Algoritmo de Rastreamento de Pedidos: Sistema onde o cliente final acompanha em tempo real cada etapa do pedido (Pendente, Em Produção, Rota de Entrega com mapa e Concluído).
• Segurança na Entrega com Token Seguro: Ao fechar o pedido, é gerado um token criptográfico único de entrega (ex: XXX-XXX-XXX). O entregador deve coletar este código com o cliente no ato da entrega e registrar uma confirmação fotográfica, garantindo segurança jurídica contra perdas e roubos de mercadorias.
• Chat Interno do Pedido: Canal direto de mensagens em tempo real baseado em WebSockets entre a equipe administrativa e o entregador em rota, facilitando instruções de localização e alinhamento de problemas de endereço.
• Sistema de Fidelidade e Reativação: Onde o restaurante define pontos por real gasto, permitindo que clientes frequentes acumulem saldos para troca por produtos ou descontos, fomentando o consumo recorrente.

📈 Desempenho e Resultados Obtidos

Durante o processo de validação técnica do MVP, submeti a plataforma a baterias rigorosas de testes automatizados unitários e de integração utilizando Vitest e testes ponta a ponta (E2E) com Playwright, cobrindo o fluxo crítico de ponta a ponta: Cadastro de usuário -> Criação de loja -> Adição de produto -> Checkout PIX simulado -> Recepção no KDS.

O resultado é uma aplicação extremamente performática, com pontuação superior a 90% no Google Lighthouse tanto para Mobile quanto Desktop, fruto do excelente uso de otimização de imagens (next/image), fontes otimizadas no servidor (next/font) e layouts construídos com o novo e ultraveloz Tailwind CSS v4 e Framer Motion para micro-animações premium de interface.

🚀 Conclusão e Próximos Passos

O desenvolvimento do Cardápio Pro representou a consolidação de conceitos avançados de engenharia de software full stack: segurança no isolamento de dados de múltiplos inquilinos (Multi-Tenancy), arquiteturas orientadas a eventos em tempo real, fluxos automatizados de pagamento e uma forte preocupação com a experiência de ponta a ponta de diferentes personas (clientes, cozinheiros, gerentes e entregadores).

O projeto já está no ar em https://cardapiopro.com e os próximos passos incluem a expansão de integrações de API direta para sistemas de automação comercial físicos e o aprimoramento de painéis estatísticos com gráficos preditivos sobre horários de pico e faturamento.

Desenvolvedor: Kedllon Kleber
Quer ver o código de perto ou discutir a implementação deste projeto? Entre em contato através do formulário de contato