DevBurger 🍔

Plataforma full-stack para pedidos de uma hamburgueria, com cardápio digital, carrinho, checkout integrado ao Stripe e painel administrativo.

Sobre o projeto

O DevBurger é uma aplicação de e-commerce para hamburgueria. Clientes podem criar uma conta, navegar por categorias e produtos, montar o carrinho e concluir o pagamento. A área administrativa permite gerenciar o catálogo e acompanhar os pedidos recebidos.

O projeto é dividido em dois serviços independentes:

Serviço	Diretório	Responsabilidade
Interface	`Interface/`	Aplicação web React consumida pelo cliente e pelo administrador.
API	`BackEnd/`	Regras de negócio, autenticação, catálogo, pedidos, uploads e pagamento.

Funcionalidades

Área do cliente

• Cadastro e login de usuários;
• Página inicial com ofertas e categorias;
• Cardápio filtrado por categoria;
• Carrinho com inclusão, remoção e alteração de quantidades;
• Resumo do pedido e formatação de valores em real brasileiro;
• Checkout com Stripe e página de confirmação da compra.

Área administrativa

• Visualização e atualização do status dos pedidos;
• Cadastro e edição de produtos, incluindo preço, categoria, oferta e imagem;
• Cadastro e edição de categorias com imagem;
• Rotas protegidas por autenticação JWT e validação de perfil administrativo na API.

Tecnologias

Camada	Tecnologias
Frontend	React 19, Vite, React Router, Styled Components, Material UI
Formulários	React Hook Form e Yup
Comunicação HTTP	Axios
Pagamentos	Stripe Elements e Stripe API
Backend	Node.js, Express 5, Yup
Autenticação	JWT e bcrypt
Dados relacionais	PostgreSQL, Sequelize e Sequelize CLI
Pedidos	MongoDB e Mongoose
Uploads	Multer

Pré-requisitos

Antes de executar, instale e deixe disponíveis:

• Node.js (versão LTS recomendada);
• Yarn (o projeto possui arquivos `yarn.lock`);
• PostgreSQL em execução na porta `5432`;
• MongoDB em execução na porta `27017`;
• Uma conta Stripe com uma chave secreta de teste.

Instalação e execução

Abra dois terminais na raiz do projeto: um para a API e outro para a interface.

1. Backend

```bash cd BackEnd yarn install ```

Crie no PostgreSQL o banco de dados usado pela aplicação:

```sql CREATE DATABASE devburger; ```

As configurações atuais de conexão ficam em `src/config/database.js` e `src/config/config.cjs`. Por padrão, a API procura:

```text PostgreSQL: postgresql://postgres:postgres@localhost:5432/devburger MongoDB: mongodb://localhost:27017/devburger ```

Execute as migrations do PostgreSQL:

```bash yarn sequelize db:migrate --config src/config/config.cjs ```

Configure a chave secreta do Stripe no ambiente antes de iniciar a API:

```powershell $env:STRIPE_SECRET_KEY="sk_test_sua_chave" yarn dev ```

A API será iniciada em `http://localhost:3001\`.

No Windows, defina `STRIPE_SECRET_KEY` em cada nova sessão do terminal ou configure-a permanentemente nas variáveis de ambiente do sistema.

2. Frontend

Em outro terminal:

```bash cd Interface yarn install yarn dev ```

O Vite exibirá a URL local da aplicação, normalmente `http://localhost:5173\`.

Rotas da aplicação

Rota	Descrição
`/`	Página inicial com destaques e ofertas.
`/cardapio`	Cardápio e navegação por categorias.
`/carrinho`	Itens adicionados e resumo do pedido.
`/checkout`	Pagamento via Stripe.
`/compra_finalizada`	Confirmação visual do pagamento.
`/login`	Autenticação de usuário.
`/cadastro`	Criação de conta.
`/admin/pedidos`	Gestão de pedidos.
`/admin/produtos`	Gestão de produtos.
`/admin/categorias`	Gestão de categorias.

API

As rotas públicas são acessíveis sem token. As demais exigem o cabeçalho abaixo, obtido no login:

```http Authorization: Bearer ```

Método	Endpoint	Acesso	Descrição
`POST`	`/users`	Público	Cria um usuário.
`POST`	`/sessions`	Público	Autentica e retorna um JWT.
`GET`	`/products`	Público	Lista produtos e suas categorias.
`GET`	`/categories`	Público	Lista categorias.
`POST`	`/products`	Admin	Cria produto com `multipart/form-data`.
`PUT`	`/products/:id`	Admin	Atualiza um produto.
`POST`	`/categories`	Admin	Cria categoria com imagem.
`PUT`	`/categories/:id`	Admin	Atualiza uma categoria.
`POST`	`/orders`	Autenticado	Registra um pedido.
`GET`	`/orders`	Autenticado	Lista pedidos.
`PUT`	`/orders/:id`	Admin	Atualiza o status de um pedido.
`POST`	`/create-payment-intent`	Autenticado	Cria um Payment Intent no Stripe.

As imagens enviadas ficam em `BackEnd/src/assets/` e são disponibilizadas pelas rotas estáticas:

• `/product-files/:arquivo`
• `/category-files/:arquivo`

Estrutura do projeto

.
├── BackEnd/
│   ├── src/
│   │   ├── app/              # Models, controllers e schema de pedidos
│   │   ├── config/           # Banco, JWT e Multer
│   │   ├── database/         # Inicialização e migrations PostgreSQL
│   │   ├── middleware/       # Proteção de rotas por JWT
│   │   ├── routes.js         # Endpoints HTTP
│   │   └── server.js         # Inicialização da API (porta 3001)
│   └── package.json
├── Interface/
│   ├── src/
│   │   ├── components/       # Componentes reutilizáveis
│   │   ├── containers/       # Páginas da aplicação e painel admin
│   │   ├── hooks/            # Contextos de usuário e carrinho
│   │   ├── layouts/          # Layouts público e administrativo
│   │   ├── routes/           # Rotas do React Router
│   │   └── services/         # Cliente Axios da API
│   └── package.json
└── README.md

Scripts

Diretório	Comando	Descrição
`BackEnd`	`yarn dev`	Inicia a API com Nodemon.
`BackEnd`	`yarn lint`	Executa a análise estática dos arquivos em `src/`.
`Interface`	`yarn dev`	Inicia o servidor de desenvolvimento do Vite.
`Interface`	`yarn build`	Gera a build de produção.
`Interface`	`yarn preview`	Pré-visualiza a build de produção.
`Interface`	`yarn lint`	Executa o ESLint no frontend.

Observações de segurança

• Não versione chaves secretas do Stripe, tokens JWT ou senhas de banco de dados.
• Antes de publicar, mova as configurações de banco e o segredo JWT para variáveis de ambiente.
• Restrinja o CORS aos domínios autorizados em produção.
• Use apenas chaves Stripe de teste durante o desenvolvimento.

Autor

Projeto desenvolvido como parte dos estudos no DevClub.