Como criar um sistema de delivery completo com o ChatGPT Codex

IMG_9717

Micaela Soares

Fundadora

Como criar um sistema de delivery completo com o ChatGPT Codex
Neste artigo

    Quem vende comida por aplicativo já fez essa conta: a cada pedido, uma fatia boa do faturamento fica com a plataforma. Ter o próprio sistema de delivery resolve o problema, só que até pouco tempo atrás isso significava contratar desenvolvedor, esperar semanas e receber um orçamento que assustava qualquer negócio pequeno.

    Com o ChatGPT Codex esse caminho ficou muito mais curto. O Codex é o modo de programação do ChatGPT. Em vez de devolver um bloco de código solto para você copiar e colar, ele trabalha dentro do projeto: cria os arquivos, conecta as telas, corrige o que quebrou e entrega tudo organizado para subir no servidor. Você deixa de ser a pessoa que escreve o código e passa a ser a pessoa que dirige o projeto, decide as regras do negócio e aprova cada etapa.

    Neste tutorial eu monto do zero o sistema de uma hamburgueria fictícia, a Brasa Burger, e você pode repetir o mesmo processo com os dados do seu negócio ou do seu cliente. O resultado tem duas partes que conversam entre si. A parte pública é o site onde o cliente escolhe o hambúrguer, monta os adicionais, aplica cupom, escolhe entrega ou retirada, finaliza o pedido e acompanha o preparo. A parte interna é o painel administrativo, protegido por login, com os pedidos em Kanban, cadastro de produtos, cupons, áreas de entrega com taxa por bairro, horários de funcionamento e relatórios de venda.

    Uma coisa importante antes de você abrir o ChatGPT: a ordem dos pedidos faz mais diferença do que o prompt em si. Primeiro você aprova o protótipo visual, aquele que só simula o funcionamento. Depois de aprovado, o Codex constrói a versão real com PHP, banco de dados e autenticação. Quando você inverte essa ordem, a IA escreve um sistema inteiro em cima de um layout que você ainda nem sabe se gostou, e refazer custa muito mais tempo do que acertar no começo.

    O segundo cuidado é segurança. Um sistema de delivery guarda nome, telefone, endereço e o histórico de compra de cada cliente, além de mexer com preços e taxas. Por isso a revisão de segurança aparece como um passo obrigatório aqui dentro, antes da publicação, com um prompt de auditoria pronto para você rodar no seu projeto.

    O mapa abaixo é o resumo da aula inteira. Cada passo abre quando você clica e traz o prompt já escrito, com botão para copiar. Salva esta página nos favoritos, porque você vai voltar aqui várias vezes enquanto monta o seu sistema.

    O sistema que eu construo neste tutorial está no ar em brasaburguer.tech. Abre o link e faz um pedido de teste, do cardápio até o checkout, porque ver funcionando ajuda a entender o passo a passo que vem a seguir. É exatamente esse sistema que você vai montar aqui, com os prompts prontos para copiar.

    Sistema de delivery com ChatGPT

    Da preparação da marca ao sistema publicado na VPS, com prompts prontos para copiar.

    Antes de criar qualquer tela, reúna logo, paleta, fotos reais dos produtos, cardápio, preços, horários, regiões de entrega, taxas e formas de pagamento. Esses dados entram nos prompts e no sistema.
    Prompt pronto: projeto Brasa Burger
    Quero que você desenvolva um sistema completo de delivery para uma hamburgueria, com site público para pedidos e painel administrativo protegido por login. Use a referência apenas para funcionalidades e organização; crie interface autoral, moderna, sofisticada e profissional. FASE DESTE PEDIDO: comece exclusivamente pelo protótipo visual navegável em HTML, CSS e JavaScript. Não desenvolva backend, banco, autenticação real ou arquitetura de produção agora. Primeiro apresente: conceito visual, paleta, tipografias, estrutura das telas e fluxo de compra simulado. Depois entregue o protótipo. Só planeje PHP, banco, segurança e produção depois de eu aprovar expressamente o protótipo. BRIEFING DA MARCA Nome: Brasa Burger Co. Cidade e bairros atendidos: Centro, Jardins e Vila Nova. Logo, cores e referências: identidade Brasa Burger; preto quente, grafite, marrom profundo, laranja-brasa #F26B21 e âmbar; visual artesanal premium, noturno e contemporâneo.. Cor principal obrigatória: laranja-brasa #F26B21. Use a imagem da logo anexada pelo usuário como logo oficial; não recrie, não altere e não substitua a marca. WhatsApp: (11) 99999-2026. Endereço: Rua das Brasas, 147 — Centro. Cardápio inicial: Brasa Bacon R$ 38,90; Burger de Costela R$ 42,90; X-Bacon da Brasa R$ 32,90; Brasa Salad R$ 31,90; Batata Brasa R$ 24,90; mais combos, bebidas e sobremesas. Funcionamento: terça a domingo, 18h às 23h30. Retirada grátis; entrega a partir de R$ 5,90; no protótipo, Centro R$ 6,90, Jardins R$ 8,90 e Vila Nova R$ 5,90. Pagamento na entrega ou retirada: dinheiro, Pix, débito e crédito. Cupom: BRASA15, 15% OFF. VISUAL: hamburgueria artesanal premium; fundo escuro sofisticado em preto quente, grafite e marrom profundo; destaques laranja, âmbar ou vermelho queimado; fotos grandes e apetitosas; títulos impactantes, leitura clara, cards modernos, espaçamento e hierarquia excelentes, botões grandes, ícones consistentes, microinterações suaves. Desktop com grade equilibrada e celular focado em compra rápida. Todo conteúdo em português do Brasil e valores como R$ 29,90. IMAGENS: use a imagem da logo anexada como identidade oficial. Crie imagens autorais, realistas e apetitosas para o banner principal e para cada produto do cardápio, mantendo o mesmo estilo de fotografia gastronômica premium: fundo escuro, luz quente, sem textos, sem marcas adicionais e sem marcas-d’água. Use imagens locais no projeto, para que não dependam de links externos frágeis. PROTÓTIPO: cabeçalho fixo com logo, aberto/fechado, tempo de entrega, início/cardápio/promoções/dúvidas, acompanhar pedido e carrinho; banner hero grande criado para a Brasa Burger, com foto de hambúrguer, título, cupom e botão; categorias roláveis; destaques; cardápio responsivo com imagem individual de cada produto; modal de produto com foto, ingredientes, observação, quantidade, adicionais, remoção de ingredientes e preço em tempo real; carrinho lateral no desktop e barra fixa no celular, persistente após atualização, com cupom, subtotal, desconto, taxa e total; checkout simulado em quatro etapas: dados, entrega/retirada, pagamento na entrega e revisão; confirmação e acompanhamento de pedido. No canto inferior direito, criar botão flutuante do WhatsApp para falar com a Brasa Burger. Logo acima dele, criar um botão menor para alternar entre tema escuro e tema claro; manter a preferência escolhida salva no navegador. Os dois botões devem funcionar no desktop e celular e seguir a identidade visual do protótipo. PREVER A VERSÃO FUNCIONAL POSTERIOR: cadastro/login obrigatório antes de finalizar, por senha e código por e-mail ou telefone; administrador em /admin; produtos, categorias, imagens, adicionais com mínimo/máximo e seleção única ou múltipla; cupons; taxa por bairro, prazo e pedido mínimo; horário por dia, fuso de Brasília, pausa manual e pedidos agendados; acompanhamento público por número e WhatsApp com estados recebido, confirmado, preparação, saiu para entrega, entregue, cancelado e recusado; painel com dashboard, pedidos em Kanban, alertas, produtos, categorias, adicionais, cupons, áreas, banners, configurações e usuários administrativos. QUANDO O PROTÓTIPO FOR APROVADO, A VERSÃO FINAL DEVE USAR PHP 8+, MySQL, HTML5, CSS3, JavaScript puro, PDO com prepared statements, sem WordPress, Node.js no servidor, frameworks dependentes de terminal, serviços pagos ou pagamento online obrigatório. Preços, descontos, taxas e totais devem ser recalculados no servidor. Aplicar password_hash, sessão segura, CSRF, prevenção de XSS e SQL injection, validação no servidor, upload seguro de imagens e mensagens sem expor dados internos. A implantação será em VPS com EasyPanel.
    Revise nome, telefone, áreas atendidas, taxas, horários e preços antes de seguir.
    Com a copy e as regras aprovadas, a IA cria o cardápio, o carrinho, o checkout, os pedidos e o painel administrativo em cima de dados reais, sem inventar preços ou condições.
    Prompt: painel administrativo
    Crie um protótipo navegável e de alta fidelidade para a área administrativa da hamburgueria Brasa Burger. Ele deve seguir a mesma identidade visual premium do site público já existente e reproduzir fielmente a referência administrativa fornecida. IMPORTANTE: – Nesta etapa, entregue somente o protótipo front-end. – Use HTML5, CSS3 e JavaScript puro. – Não implemente backend, banco de dados, autenticação real ou APIs. – Todos os menus, botões, filtros, modais, drawers, toggles e estados demonstrativos devem funcionar visualmente. – Não entregue apenas uma tela estática. – Não simplifique as telas secundárias usando páginas genéricas ou placeholders. – Não use textos como “em breve”. – Use dados fictícios realistas em português do Brasil. – Use a logo oficial da Brasa Burger enviada. Não redesenhe, não substitua e não gere outra logo. – Reutilize as imagens de produtos fornecidas sempre que possível. OBJETIVO VISUAL Desenvolva um painel administrativo sofisticado para uma hamburgueria premium, com atmosfera noturna e identidade inspirada em fogo e brasa. A interface deve utilizar: – Fundo principal quase preto: #0D0B0A. – Barra lateral: #12100E. – Cards principais: #181411. – Superfícies secundárias: #211A16. – Bordas discretas: #342A24. – Cor principal laranja-brasa: #F26B21 ou #FF681F. – Texto principal branco levemente quente: #FFF8F1. – Texto secundário em bege/cinza: #A8998E. – Verde para operação ativa e indicadores positivos. – Amarelo/âmbar para alertas e pedidos aguardando. – Azul discreto para pedidos em preparação. – Vermelho para erros, recusas e ações destrutivas. Use “Barlow Condensed” nos títulos, números e destaques, com aparência forte, condensada e em caixa alta. Use “DM Sans” nos textos, formulários e controles. O resultado deve parecer um produto SaaS profissional, não um template administrativo genérico. Use bordas finas, sombras discretas, pequenos brilhos coloridos nos indicadores, ícones consistentes, espaçamento generoso e hierarquia visual clara. Evite gradientes excessivos, efeitos neon exagerados e excesso de cantos arredondados. ESTRUTURA PRINCIPAL Desktop: – Sidebar fixa à esquerda com aproximadamente 250 px. – Cabeçalho superior com aproximadamente 90 px. – Conteúdo principal ocupando o restante da tela. – Cabeçalho sticky com fundo translúcido e leve blur. – Cards com cantos de aproximadamente 10–12 px. Mobile: – Sidebar transformada em menu lateral recolhível. – Botão hambúrguer no cabeçalho. – Cards reorganizados em uma coluna. – Métricas inicialmente em duas colunas e depois uma coluna em celulares pequenos. – Kanban com rolagem horizontal. – Busca e informações menos importantes podem ser ocultadas progressivamente. – Nenhum conteúdo pode causar quebra ou sobreposição. SIDEBAR No topo, exiba: – Logo oficial da Brasa Burger. – Nome “BRASA”. – Subtítulo “PAINEL DE GESTÃO” em laranja, pequeno e com espaçamento entre letras. Crie os seguintes itens de navegação: 1. Visão geral 2. Pedidos, com badge laranja mostrando “4” 3. Produtos 4. Categorias 5. Adicionais 6. Cupons 7. Áreas de entrega 8. Banners e promoções 9. Configurações O item selecionado deve apresentar: – Fundo laranja muito suave. – Texto branco. – Barra laranja vertical na lateral esquerda. – Ícone e título alinhados. No rodapé da sidebar, exiba: – Card de status com ponto verde. – “Loja aberta”. – “Recebendo pedidos”. – Link “Ver loja” com seta para a esquerda. CABEÇALHO O cabeçalho deve mudar o título conforme a página selecionada. Inclua: – Data em caixa alta e laranja, por exemplo “SEXTA-FEIRA, 18 DE JULHO”. – Título grande da página. – Busca com placeholder “Buscar pedido, cliente…”. – Botão para ativar ou desativar o som de novos pedidos. – Botão de notificações com badge “3”. – Perfil da administradora com avatar de iniciais “MS”. – Nome “Marina Silva”. – Função “Administrador”. – Indicador de menu do perfil. TELA 1 — VISÃO GERAL Comece com uma saudação: – Eyebrow “RESUMO DO DIA”. – “Boa noite, Marina.” – Texto informando que a operação está fluindo bem. – Destaque de que existem 4 pedidos aguardando atenção. – Indicador verde de atualização automática com “Agora mesmo”. Crie quatro cards de métricas: 1. Pedidos hoje – Valor: 48 – “↑ 12% vs. ontem” – Ícone laranja. 2. Aguardando – Valor: 4 – “Precisam de atenção” – Ícone âmbar. 3. Em preparação – Valor: 7 – “Tempo médio: 18 min” – Ícone azul. 4. Faturamento – Valor: R$ 2.847,60 – “↑ 8,4% vs. ontem” – Ícone verde. Abaixo, crie uma grade assimétrica com: A. Pedidos recentes – Título “Pedidos recentes”. – Identificador “TEMPO REAL”. – Link “Ver todos”. – Lista com número, cliente, quantidade de itens, modalidade, status e total. – Use status como “Novo”, “Em preparo” e “Em entrega”. – Clicar em um pedido deve abrir o drawer lateral de detalhes. B. Faturamento semanal – Identificador “ÚLTIMOS 7 DIAS”. – Total: R$ 15.420,80. – Crescimento: ↑ 14,2%. – Seletor “Esta semana”. – Gráfico de barras de segunda a domingo. – Sexta-feira deve estar destacada em laranja. – Pode ser construído em CSS ou JavaScript, sem biblioteca obrigatória. C. Mais vendidos – Identificador “DESTAQUES”. – Ranking numerado. – Miniatura do produto. – Nome, número de vendas e preço. – Exiba pelo menos Brasa Bacon, Duplo Cheddar, Burger de Costela e Frango Crocante. D. Status da loja – Identificador “OPERAÇÃO”. – Indicador verde “Aberta agora”. – Informação “Fecha às 23h30”. – Botão “Pausar pedidos”. – Tempo médio: 30–45 min. – Pedido mínimo: R$ 20,00. – Ao pausar, alterar visualmente o estado e trocar o botão para “Retomar pedidos”. – Mostrar feedback por toast. TELA 2 — PEDIDOS Crie uma gestão de pedidos em Kanban com quatro colunas: 1. Novos 2. Confirmados 3. Em preparação 4. Em entrega Cada coluna deve mostrar a quantidade de pedidos. Cada card deve apresentar: – Número do pedido. – Tempo decorrido com destaque âmbar. – Nome do cliente. – Quantidade de itens. – Modalidade: entrega ou retirada. – Valor total. – Menu de ações. Inclua filtros superiores: – Todos, com 48. – Novos, com 4. – Em preparo, com 7. – Em entrega, com 3. Inclua o botão “+ Novo pedido”. Os filtros devem alterar os pedidos exibidos. O botão de novo pedido deve abrir um modal ou fluxo demonstrativo funcional. DETALHES DO PEDIDO Ao clicar em qualquer pedido, abra um drawer lateral vindo da direita, com backdrop escuro. O drawer deve conter: – Número do pedido. – Status atual e tempo decorrido. – Nome e telefone do cliente. – Itens, quantidades, observações e adicionais. – Subtotal, taxa de entrega, desconto e total. – Endereço completo e referência. – Prazo estimado. – Forma de pagamento. – Possível necessidade de troco. – Linha do tempo do pedido. – Botões “Imprimir comanda”, “Recusar pedido”, “Confirmar pedido” e “Falar com cliente”. As ações devem mudar visualmente o status e exibir confirmação por toast. TELA 3 — PRODUTOS Crie uma grade responsiva de produtos. Cada card deve possuir: – Imagem grande. – Categoria ou selo “MAIS PEDIDO”. – Nome. – Descrição curta. – Preço destacado em laranja. – Toggle de produto ativo. – Ações de editar, duplicar, marcar como esgotado e excluir. Use pelo menos: – Brasa Bacon – Duplo Cheddar – Burger de Costela – Frango Crocante – Smash Clássico – Combo Casal – Batata Brasa – Onion Rings Inclua: – Busca de produtos. – Filtro por categoria e disponibilidade. – Botão “Reordenar”. – Botão “+ Novo produto”. NOVO PRODUTO / EDITAR PRODUTO Abra um modal amplo com: – Upload e pré-visualização da imagem. – Nome. – Descrição. – Categoria. – Preço. – Preço promocional opcional. – Ingredientes. – Grupo de adicionais. – Tempo de preparo. – Código interno opcional. – Toggle “Produto ativo”. – Toggle “Marcar como destaque”. – Toggle “Marcar como esgotado”. – Botões “Cancelar” e “Salvar produto”. Faça validação visual dos campos obrigatórios. Ao salvar, atualizar a grade no próprio protótipo e mostrar toast de sucesso. TELA 4 — CATEGORIAS Crie uma tela completa para gerenciamento de categorias, contendo: – Busca. – Botão “+ Nova categoria”. – Lista ou tabela reordenável. – Nome. – Quantidade de produtos. – Status ativo/inativo. – Ordem de exibição. – Imagem ou ícone opcional. – Ações de editar, duplicar e excluir. Inclua categorias como Mais pedidos, Hambúrgueres, Combos, Porções, Bebidas e Sobremesas. TELA 5 — ADICIONAIS Crie grupos de adicionais e personalizações: – Ponto da carne — obrigatório. – Molhos — escolha até 2. – Extras — bacon, cheddar e cebola. – Retirar ingredientes — opcional. Cada grupo deve apresentar: – Nome. – Se é obrigatório. – Quantidade mínima e máxima. – Produtos associados. – Opções e respectivos preços. – Status. – Ações de editar e excluir. Inclua formulário funcional para criar ou editar um grupo. TELA 6 — CUPONS Crie tabela ou cards de cupons com: – Código. – Tipo de desconto: percentual, valor fixo ou frete grátis. – Valor. – Pedido mínimo. – Quantidade de usos. – Limite. – Data de validade. – Status ativo, agendado ou expirado. – Ações de editar, duplicar e desativar. Inclua exemplos como BRASA15, PRIMEIRACOMPRA e COMBO20. Inclua um formulário funcional para novo cupom. TELA 7 — ÁREAS DE ENTREGA Crie gerenciamento de regiões com: – Nome do bairro ou região. – Taxa de entrega. – Tempo adicional. – Pedido mínimo. – Status. – Faixa de CEP ou raio de entrega. – Ações de editar e desativar. Use Centro, Jardins e Vila Nova como exemplos. Adicione um painel visual simplificado de cobertura ou placeholder de mapa bem desenhado, sem depender de uma API externa. TELA 8 — BANNERS E PROMOÇÕES Crie uma grade de campanhas com: – Prévia do banner. – Título. – Período de exibição. – Destino do clique. – Status: ativo, agendado ou encerrado. – Prioridade/ordem. – Alternância desktop/mobile. – Ações de editar, duplicar e excluir. Use as campanhas: – Quinta da Brasa. – Combo Casal. – Frete grátis no Centro. Inclua formulário com upload de imagem, título, texto, link, período, status e ordem. TELA 9 — CONFIGURAÇÕES Divida as configurações em seções ou abas: 1. Dados da loja – Nome, CNPJ, telefone, WhatsApp, e-mail e endereço. 2. Operação – Loja aberta/fechada. – Tempo médio. – Pedido mínimo. – Pausa temporária com motivo. 3. Horários de funcionamento – Horário por dia da semana. – Opção de loja fechada. – Exceções e feriados. 4. Formas de pagamento – Pix. – Cartões. – Dinheiro. – Pagamento online ou na entrega. 5. Entrega e retirada – Habilitar cada modalidade. – Prazo padrão. – Orientações de retirada. 6. Notificações – Som de novo pedido. – Alertas visuais. – WhatsApp e e-mail como opções demonstrativas. 7. Usuários administrativos – Nome. – E-mail. – Função. – Status. – Permissões. COMPONENTES E INTERAÇÕES OBRIGATÓRIAS Implemente no protótipo: – Navegação SPA simulada, sem recarregar a página. – Destaque correto do item ativo na sidebar. – Atualização do título do cabeçalho. – Drawer de detalhes do pedido. – Modal de novo/editar produto. – Modais ou drawers para cadastros das demais telas. – Filtros funcionais. – Busca local. – Toggles interativos. – Alteração simulada de status. – Confirmação antes de excluir ou recusar. – Toasts de sucesso e erro. – Backdrop clicável para fechar overlays. – Botão Escape fechando modal ou drawer. – Estados vazios. – Estados de carregamento com skeleton. – Estados de produto esgotado e inativo. – Hover, focus e active states. – Foco visível e navegação por teclado. – Labels em todos os campos. – Contraste adequado. – Transições rápidas, de aproximadamente 200–250 ms. – Persistência demonstrativa no localStorage, se possível, para que alterações simuladas permaneçam após atualizar a página. ENTREGA Organize a entrega em arquivos claros, por exemplo: – admin.html – admin.css – admin.js – pasta assets O protótipo deve abrir localmente no navegador sem processo de build. Evite dependências desnecessárias. Antes de concluir, verifique: – Se todos os nove itens da sidebar abrem telas completas. – Se não existem botões principais sem resposta. – Se o painel funciona em desktop, tablet e celular. – Se o Kanban continua utilizável no mobile. – Se modais e drawers não ultrapassam a tela. – Se não existem textos cortados ou elementos sobrepostos. – Se a identidade visual permanece consistente em todas as páginas. Não implemente ainda a aplicação de produção. Após a aprovação do protótipo, a etapa funcional deverá contemplar autenticação segura, banco de dados, permissões, auditoria, produtos, adicionais, pedidos em tempo real, impressão, áreas e taxas de entrega, horários, cupons, promoções e configurações operacionais.
    Troque imagens genéricas por fotos reais dos pratos e embalagens.
    Teste em celular e desktop: cardápio, adicionais, carrinho, checkout e painel.
    O sistema lida com pedidos, endereços, preços e possivelmente pagamentos. A revisão de segurança acontece antes de gerar os arquivos e vira requisito obrigatório.
    Prompt: revisão de segurança
    Antes de criar os arquivos do sistema de delivery, faça uma revisão completa de arquitetura e segurança. Considere clientes, painel administrativo, pedidos, endereços, preços e possíveis pagamentos. Liste riscos e requisitos, em ordem de prioridade, para: autenticação e permissões; senhas e sessões; validação no servidor de todos os dados e preços; prevenção de fraude e alteração de pedidos; rate limiting; XSS, CSRF, SQL injection e upload malicioso; segredos e variáveis de ambiente; logs sem dados sensíveis; LGPD; backups, recuperação, atualizações, HTTPS, cabeçalhos de segurança, monitoramento e resposta a incidentes. Para cada item, explique como implementar e testar. Não gere o projeto ainda.
    Prompt: auditoria de segurança para sistemas gerados com IA
    # PROMPT: AUDITORIA DE SEGURANÇA PARA SISTEMAS E SITES GERADOS COM IA Você é um especialista sênior em cybersecurity, com foco em pentest web, secure coding, OWASP Top 10 e hardening de aplicações. Sua especialidade é auditar aplicações web criadas total ou parcialmente com ferramentas de IA (ChatGPT, Claude, Cursor, Lovable, Bolt, Windsurf, Hostinger Horizons, v0, Replit Agent, Google AI Studio e similares). Sua missão é transformar o projeto que eu enviar em uma aplicação profissional, blindada e pronta para produção. Você vai identificar vulnerabilidades reais, propor correções concretas, refatorar o código inseguro e entregar exemplos prontos para implementação. Responda sempre em português do Brasil. Não use travessões. ## COMO VOCÊ DEVE OPERAR 1. Ao receber esta mensagem, confirme que entendeu e peça o contexto da ETAPA 0. Não comece a auditoria antes disso. 2. Depois que eu enviar o contexto e o código, execute a auditoria completa seguindo o FORMATO OBRIGATÓRIO DA RESPOSTA. 3. Se o projeto for grande, audite por partes e diga claramente qual parte você já cobriu e qual ainda falta. 4. Sempre que faltar informação para julgar algo, pergunte antes de assumir. ## ETAPA 0: CONTEXTO OBRIGATÓRIO Antes de qualquer análise, peça estas informações: 1. Stack completa: framework de frontend, backend, banco de dados e hospedagem 2. Acesso ao código, ao repositório ou aos arquivos principais 3. Lista de funcionalidades sensíveis: login, pagamento, upload, integração com IA, área administrativa 4. Se existe cadastro público de usuários ou apenas cadastro interno 5. Quais integrações externas estão presentes: Stripe, OpenAI, Anthropic, Supabase, Resend, Firebase e outras Se alguma informação faltar, pergunte. Não inicie a auditoria com suposições. ## PREMISSA SOBRE CÓDIGO GERADO POR IA Assuma que pode haver vulnerabilidades silenciosas. Procure por: – Chaves de API expostas no frontend – Tokens armazenados em localStorage em vez de cookies httpOnly – Autenticação validada apenas no client – RLS ausente ou mal configurada no Supabase ou Firebase – CORS com wildcard – Service role keys ou credenciais admin acessíveis pelo cliente – Endpoints de IA sem rate limiting – Prompt injection viável e system prompt exposto – IDOR por confiar em IDs vindos do frontend – Mass assignment em endpoints – Webhooks sem verificação de assinatura – innerHTML recebendo input do usuário – SQL construído com concatenação de string – Arquivos .env commitados ou expostos no bundle – JWT com segredo fraco, sem expiração ou sem rotação – Ausência total de logs e monitoramento ## ÁREAS DE AUDITORIA ### 1. Autenticação e gestão de sessão – JWT com segredo forte, expiração curta e refresh token rotativo – Cookies httpOnly, Secure, SameSite=Strict ou Lax – Proteção contra session fixation e session hijacking – Logout automático por inatividade – Reset de senha com token de uso único e expiração – Política de senha forte, mínimo de 12 caracteres – Verificação de email obrigatória – MFA quando o contexto justificar – Proteção contra account takeover ### 2. Controle de acesso e autorização – RBAC com permissões granulares – Validação obrigatória no backend em toda rota privada – Ownership validation – Proteção contra IDOR e privilege escalation – Nenhuma rota administrativa acessível por descoberta de URL – RLS configurada corretamente ### 3. Inputs, validação e sanitização – Validação rigorosa no backend – Sanitização de strings e escape de output – Whitelist de campos permitidos – Validação de tipo, tamanho e formato ### 4. Proteção contra injeções – SQL Injection: prepared statements, ORM seguro e parameter binding – XSS: escape de output, evitar innerHTML e CSP rigorosa – CSRF: token sincronizado, SameSite cookies e double submit – HTML e JS Injection: sanitização com biblioteca confiável – Prompt Injection: isolamento do system prompt, filtro de input, validação de output e limite de tokens ### 5. Rate limiting e proteção contra abuso – Rate limit por IP e por usuário – Brute force protection – Captcha em pontos críticos – Honeypot em formulários – Rate limit agressivo em endpoints que chamam IA externa ### 6. Proteção de dados e segredos – Senhas com bcrypt ou argon2 – Dados sensíveis criptografados em repouso – HTTPS obrigatório e HSTS habilitado – Conformidade com a LGPD – Nenhuma chave de API no frontend – Variáveis de ambiente em local seguro – Service role keys nunca acessíveis pelo cliente – Dados sensíveis nunca logados em texto puro ### 7. Uploads e exposição de arquivos – Validar MIME real, tamanho e dimensões – Armazenar fora do diretório executável – Renomear arquivos no upload – Bloquear acesso a .env, .git, configs, backups e logs – Bloquear directory listing – Proteção contra Path Traversal, LFI, RFI, SSRF e RCE ### 8. APIs, CORS e webhooks – CORS com origens específicas – APIs autenticadas e autorizadas – Webhooks com verificação de assinatura – Nenhum secret hardcoded – JWT validado em toda chamada ### 9. Headers de segurança – Content-Security-Policy – Strict-Transport-Security – X-Frame-Options – X-Content-Type-Options – Referrer-Policy – Permissions-Policy – Cross-Origin-Resource-Policy, Embedder-Policy e Opener-Policy ### 10. Endpoints de IA – Chaves sempre no backend – Rate limit por usuário e por IP – Filtro contra prompt injection – System prompt protegido – Validação de output – Logs de uso – Limite de tokens e teto de custo por usuário ### 11. Infraestrutura e deploy – Variáveis de ambiente seguras – Princípio do menor privilégio – Backup automatizado e testado – Logs centralizados sem dados sensíveis – Monitoramento de comportamento anômalo – WAF e proteção anti-DDoS ## REGRAS INEGOCIÁVEIS 1. Validação no backend é obrigatória 2. Nunca confiar em IDs vindos da URL ou do client sem validar ownership 3. Nenhuma rota privada pode ser acessada sem autenticação no servidor 4. Uploads devem ser tratados com máxima desconfiança 5. Princípio do menor privilégio em todo nível 6. Nenhuma chave, secret ou token sensível no frontend ou repositório 7. Logs nunca devem expor dados sensíveis 8. OWASP Top 10 como referência mínima ## REGRA ANTI-ALUCINAÇÃO Se uma categoria não apresentar problema real, declare que está em conformidade. Não invente falhas. Quando apontar uma vulnerabilidade, cite o arquivo e a linha. Se não tiver essa informação, diga que é uma suspeita que precisa de confirmação. ## FORMATO OBRIGATÓRIO DA RESPOSTA ### 1. Resumo executivo Visão geral em até 5 linhas. ### 2. Vulnerabilidades encontradas Para cada uma: classificação, localização, cenário de ataque e impacto. ### 3. Categorias em conformidade Liste o que está adequado. ### 4. Correções recomendadas Explique a correção profissional. ### 5. Código seguro recomendado Entregue código pronto para implementação. ### 6. Refatoração de arquitetura Descreva mudanças estruturais necessárias. ### 7. Hardening adicional Liste melhorias imediatas. ### 8. Riscos silenciosos Aponte falhas sutis. ### 9. Score de segurança Nota de 0 a 10, com justificativa. ### 10. Próximos passos prioritários As 5 ações mais importantes. ## ESTILO DE COMUNICAÇÃO Use português do Brasil, com tom técnico mas acessível. Explique o porquê de cada recomendação. Comente as partes críticas do código e traduza o jargão quando necessário. Comece agora pedindo o contexto da ETAPA 0.

    Não exponha banco de dados, painel administrativo ou chaves de pagamento na internet.

    Com o projeto testado, publique em domínio próprio usando uma VPS protegida e o EasyPanel para administrar aplicação, banco de dados, variáveis e backups.
    Contratar a VPS da Hostinger com descontoCupom já aplicado no link
    Prompt: pacote de publicação
    Prepare o projeto de delivery para publicação em VPS com EasyPanel. Entregue um checklist de deploy com: variáveis de ambiente, banco de dados, migrações seguras, domínio, HTTPS, health check, backups, logs, armazenamento persistente, restauração e testes após publicar. Não inclua segredos reais; use somente .env.example.
    Guia prático: como subir seu sistema no EasyPanel. Clique em cada etapa para abrir as instruções.

    Acesse Configurações → Geral → Domínio Padrão. Copie o endereço gerado e use esse link para acessar o painel com HTTPS.

    Esse endereço protege o painel do EasyPanel. O domínio do sistema será configurado em outra etapa.

    Acesse o GitHub e crie uma conta. Caso já tenha uma, entre nela e avance.

    Crie um repositório, de preferência privado, e copie o link.

    https://github.com/usuario/meu-sistema

    Envie o link do repositório ao ChatGPT e peça o upload. Se necessário, instale o Git e autorize a conexão com o GitHub.

    • Permita a autorização solicitada pela extensão no Chrome.
    • Confirme no GitHub se todos os arquivos chegaram.
    Confira antes de avançar: deve existir um arquivo chamado exatamente Dockerfile.
    Prompt: preparar o projeto e enviar para o GitHub
    Quero que você prepare este projeto e envie todos os arquivos para o meu repositório no GitHub: LINK DO REPOSITÓRIO: Coloque aqui seu link de repositório. Analise primeiro todos os arquivos do projeto e entenda como o sistema funciona antes de modificar qualquer coisa. O projeto precisa ser entregue totalmente funcional e pronto para publicação. Não quero protótipos, dados simulados, botões sem ação, telas demonstrativas ou funções incompletas. Faça o seguinte: 1. Revise toda a estrutura do projeto e corrija erros de código, caminhos, dependências e configurações. 2. Finalize todas as funções necessárias para que o sistema funcione de verdade. 3. Garanta que formulários, botões, menus, links, banco de dados e demais recursos estejam conectados corretamente. 4. Crie uma área administrativa protegida por login e senha. 5. Nenhuma página do painel administrativo pode ser acessada sem autenticação, nem mesmo digitando o endereço diretamente no navegador. 6. Utilize autenticação segura, com senha criptografada e sessão protegida. 7. Inclua uma forma segura de criar o primeiro usuário administrador. Não deixe senhas reais expostas no código ou no GitHub. 8. Crie o arquivo .env.example mostrando quais informações precisam ser configuradas, sem incluir senhas, tokens ou chaves reais. 9. Configure corretamente o .gitignore para impedir o envio de arquivos sensíveis e desnecessários. 10. Prepare o projeto para rodar em ambiente de produção, incluindo o Dockerfile e outros arquivos necessários para publicação, caso ainda não existam. 11. Crie ou atualize o README com instruções simples para instalar, configurar, publicar e acessar o painel. 12. Teste o projeto antes de fazer o envio e corrija os problemas encontrados. 13. Faça o upload dos arquivos para a branch main do repositório informado. Antes de enviar ao GitHub, verifique principalmente: – se o sistema inicia sem erros; – se todas as dependências estão declaradas; – se os dados permanecem salvos; – se o login e o logout funcionam; – se as páginas internas estão realmente protegidas; – se nenhuma senha ou chave secreta será enviada ao repositório; – se os botões e formulários executam ações reais; – se o projeto está pronto para ser publicado. Use os arquivos existentes como base e preserve o visual atual. Faça apenas as adaptações necessárias para transformar o projeto em uma versão funcional e segura. Você pode instalar as dependências necessárias e usar o Git para enviar os arquivos. Caso precise de acesso ao GitHub, solicite a conexão e as permissões necessárias. Se alguma função depender de uma informação que somente eu posso fornecer, como domínio, e-mail, credencial externa ou dados de banco, pergunte antes de inventar. Ao finalizar, informe: – o que foi corrigido e implementado; – quais testes foram realizados; – quais variáveis precisam ser configuradas; – o endereço da área administrativa; – como criar ou definir o primeiro acesso; – o commit enviado ao GitHub.

    Volte ao EasyPanel, crie um projeto e escolha um nome relacionado ao sistema.

    Entre no projeto, clique em Serviços → App e dê um nome ao aplicativo.

    Gere a chave solicitada pelo EasyPanel e adicione-a ao GitHub. Depois acesse Configurações → GitHub no EasyPanel e conclua a conexão.

    A chave precisa ser adicionada à conta ou ao repositório correto.

    Na aba GitHub do aplicativo, preencha:

    Repositório: usuario/repositorio
    Branch: main

    Selecione Dockerfile e informe o caminho ou nome:

    Dockerfile
    É Dockerfile, com “er”. Maiúsculas e minúsculas também fazem diferença.

    Acesse Serviços → MySQL. Defina ou copie nome do banco, usuário, senha, host e porta.

    Guarde tudo em local seguro. O EasyPanel pode gerar uma senha forte. Copie-a antes de sair. A porta interna costuma ser 3306, mas use os dados exibidos no seu painel.

    Peça ao ChatGPT para analisar o sistema e listar as variáveis necessárias.

    DB_HOST=
    DB_PORT=
    DB_DATABASE=
    DB_USERNAME=
    DB_PASSWORD=
    Não envie a senha real ao ChatGPT. Peça os nomes das variáveis e preencha os valores diretamente no EasyPanel.
    Prompt: descobrir as variáveis de ambiente
    Analise todos os arquivos deste projeto e identifique quais variáveis de ambiente são necessárias para publicá-lo no EasyPanel com o banco MySQL que já criei. Entregue a lista no formato exato para eu copiar e colar na aba Ambiente do aplicativo. Preencha apenas os valores que podem ser identificados pelo código. Nos dados do MySQL, indique claramente o que devo copiar do EasyPanel. Identifique também a porta interna usada pelo sistema. Não altere nenhum arquivo.

    Quando a lista incluir uma chave secreta, você mesma gera a sua no computador. O comando muda conforme o sistema.

    No Mac: aperte Command e a barra de espaço juntos, digite Terminal e dê Enter. Ele também fica em Aplicativos, dentro da pasta Utilitários. Com o Terminal aberto, cole o comando abaixo e aperte Enter.

    Comando para gerar a chave no Mac
    openssl rand -hex 32

    No Windows: aperte a tecla Windows, digite PowerShell e clique em Windows PowerShell. Com a janela aberta, cole o comando abaixo e aperte Enter.

    Comando para gerar a chave no Windows
    -join ((1..32) | ForEach-Object { “{0:x2}” -f (Get-Random -Min 0 -Max 256) })
    Copie o resultado inteiro e cole no valor da variável dentro do EasyPanel. Gere uma chave nova para cada projeto e nunca reaproveite a que aparece em tutorial.

    Abra a aba Ambiente, cole as variáveis, preencha os valores e clique em Salvar.

    Revise letras, espaços, host, usuário e senha. Um único valor incorreto pode impedir o sistema de iniciar.

    Se alguma variável pedir uma chave secreta, gere a sua antes de salvar.

    No Mac: aperte Command e a barra de espaço juntos, digite Terminal e dê Enter. Ele também fica em Aplicativos, dentro da pasta Utilitários. Com o Terminal aberto, cole o comando abaixo e aperte Enter.

    Comando para gerar a chave no Mac
    openssl rand -hex 32

    No Windows: aperte a tecla Windows, digite PowerShell e clique em Windows PowerShell. Com a janela aberta, cole o comando abaixo e aperte Enter.

    Comando para gerar a chave no Windows
    -join ((1..32) | ForEach-Object { “{0:x2}” -f (Get-Random -Min 0 -Max 256) })
    Copie o resultado inteiro e cole no valor da variável dentro do EasyPanel. Gere uma chave nova para cada projeto e nunca reaproveite a que aparece em tutorial.

    Em Domínios ou Proxy, adicione o endereço do sistema e informe a porta usada pela aplicação.

    A porta pode ser 3000, 8000 ou outra. Consulte o Dockerfile ou peça ao ChatGPT para identificá-la.

    Clique em Salvar e implantar e acompanhe os logs.

    • Abra o domínio.
    • Teste cadastro e login.
    • Teste as funções que usam o banco.
    • Se houver erro, copie os logs e envie ao ChatGPT.
    Tudo funcionando? Seu sistema foi publicado com sucesso.
    Confirme pedidos reais, backups e restauração antes de divulgar.
    Acompanhe erros, disponibilidade, pedidos e atualizações depois da publicação.
    Briefing preenchido com cardápio, preços, horários, taxas de entrega e formas de pagamento.
    Protótipo navegável aprovado antes de qualquer código de produção.
    Painel administrativo testado: pedidos, produtos, adicionais, cupons, áreas e configurações.
    Revisão de segurança aplicada antes de gerar a versão final do sistema.
    Sistema publicado na VPS com domínio próprio, HTTPS ativo e backup configurado.
    Pedido de teste feito do início ao fim, no celular e no computador.

    Seguindo os quatro passos do mapa, você sai com um sistema de delivery funcionando em domínio próprio, sem comissão por pedido e sem depender de plataforma nenhuma para mudar um preço ou pausar o cardápio numa segunda-feira parada.

    Só que colocar no ar é o começo. Antes de divulgar para os clientes, faz o teste do primeiro pedido do início ao fim, no celular e no computador, incluindo o cupom, a taxa do bairro e a mudança de status no painel. Confirma também se o backup do banco de dados está ativo na VPS, porque em sistema de pedido cada hora fora do ar é venda perdida. Depois disso, acompanha os erros e a disponibilidade nas primeiras semanas, que é quando aparecem os detalhes que nenhum teste pega.

    Se você cria sites para clientes, presta atenção no tamanho do que acabou de aprender. Entregar um site institucional é uma coisa. Entregar um sistema que recebe pedido, calcula taxa por região, controla cupom e organiza a cozinha é outra bem diferente, e o valor do projeto acompanha essa diferença. Um restaurante que paga comissão em duas plataformas entende esse orçamento em poucos minutos, porque a conta se paga sozinha no primeiro mês.

    O passo a passo completo, com a tela e cada clique, está no vídeo aqui do post. Se você travar em algum ponto, escreve nos comentários o passo em que parou que eu te respondo por lá.

    E se quiser continuar, tem dois caminhos aqui do lado. A VPS com o EasyPanel que eu uso na publicação está com desconto no link do mapa, e o Kit Web Designer reúne os recursos que eu uso no dia a dia para entregar projeto mais rápido.

    Foto de Micaela Soares

    Micaela Soares

    Eu sou a Micaela Soares, criadora do Descomplicando Sites. Aqui, eu ensino de forma prática e direta como criar sites profissionais usando WordPress e Elementor, mesmo que você esteja começando do zero. Ao longo da minha trajetória, transformei o que aprendi no mercado em um método simples de aplicar, focado não só em design, mas em criar sites que passam credibilidade, atraem clientes e geram resultado de verdade. Hoje, compartilho conteúdos no YouTube e aqui no blog, além de desenvolver templates e materiais que facilitam o dia a dia de quem quer trabalhar com criação de sites ou melhorar a presença online do próprio negócio.
    Foto de Micaela Soares

    Micaela Soares

    Eu sou a Micaela Soares, criadora do Descomplicando Sites. Aqui, eu ensino de forma prática e direta como criar sites profissionais usando WordPress e Elementor, mesmo que você esteja começando do zero. Ao longo da minha trajetória, transformei o que aprendi no mercado em um método simples de aplicar, focado não só em design, mas em criar sites que passam credibilidade, atraem clientes e geram resultado de verdade. Hoje, compartilho conteúdos no YouTube e aqui no blog, além de desenvolver templates e materiais que facilitam o dia a dia de quem quer trabalhar com criação de sites ou melhorar a presença online do próprio negócio.
    🎨 Parceiro oficial

    Crie sites profissionais sem código com Elementor Pro

    O construtor visual mais completo do WordPress, com mais de 100 widgets exclusivos.

    Testar agora →
    ⚡ Parceiro oficial

    Hospedagem rápida e barata para seu WordPress

    Use o cupom DESCOMPLICANDOSITES e economize até 85% na Hostinger.

    Ver oferta →

    Deixe um comentário

    O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

    Continue aprendendo