Visão geral
O DevBurguer é o site de uma hamburgueria fictícia com servidor próprio em Node.js e Express: home, cardápio, contato e uma rota de API que expõe os lanches em JSON. Nasceu como desafio de bootcamp e foi retrabalhado até virar um projeto apresentável de ponta a ponta.
O problema
A base original tinha os problemas típicos de código de exercício: caminhos quebrados, dados duplicados no código, entradas do formulário indo para a resposta sem tratamento e páginas de retorno em texto puro. O objetivo foi transformar isso em um servidor correto, seguro no básico e agradável de usar.
A solução
O servidor foi refeito: o cardápio passou a ser lido de um único JSON e servido tanto nas páginas quanto na rota /api/lanches, o formulário de contato ganhou validação e escape de HTML contra XSS, e as respostas viraram páginas completas na identidade visual do site, com botão de retorno. A porta é configurável por variável de ambiente.
Funcionalidades
- Cardápio dinâmico montado no servidor a partir de JSON
- Rota /api/lanches expondo os dados do cardápio
- Formulário de contato com validação e escape anti-XSS
- Páginas de resposta estilizadas na identidade do site
- Porta configurável por variável de ambiente
- Demonstração estática honesta publicada no GitHub Pages
Arquitetura
O Express serve os arquivos estáticos e monta as páginas dinâmicas; os dados vivem em public/data/lanches.json, lidos pelo servidor a cada uso. Como o Pages não executa Node, a pasta docs contém uma versão estática com um aviso claro de que os formulários ali são simulados — a distinção entre o que precisa de servidor e o que não precisa é parte do que o projeto ensina.
Screenshots
Desafios & aprendizados
Os desafios reais estavam dentro do servidor: a rota do cardápio falhava em silêncio por ler o JSON do caminho errado, e a comparação entre o id da URL — que chega como texto — e o id numérico dos dados fazia lanches existentes voltarem como não encontrados. O mais importante foi perceber que o formulário devolvia o que o usuário digitava direto para o HTML da resposta, uma porta aberta para XSS — resolvida com uma função de escape aplicada a toda entrada. Por fim, centralizar as páginas de resposta num único helper eliminou HTML duplicado e ensinou na prática o valor de uma fonte única para cada responsabilidade.