hamburger-shop

Descrição do Projeto

⚛️ React

Aplicativo que simula uma hamburgueria, onde clientes cadastrados podem fazer pedidos de sanduiches, bebidas e sobremesas.

Conteúdo

Objetivo
Descrição
Como utilizar
Status do Projeto
Link do deploy no Vercel
Tecnologias Utilizadas
Autor

Objetivo

Simular um e-comerce de venda de produtos alimentícios.

Aplicativo elaborado como parte do curso de formação web full stack da Kenzie Academy Brasil.

Descrição

O aplicativo possui 3 páginas principais e um modal que representa o carrinho de compras.

Possui também um cabeçalho presente na Home page.

• Homepage - página que lista os produtos disponíveis
• Signin - página de login do cliente
• Signup - página de cadastro de um novo cliente do site
• Carrinho de compras - modal que lista todos os itens adicionados pelo cliente

Como utilizar

Signup Page

Página de cadastro de um novo cliente. Após o cadastro o cliente é direcionado para a página de login.

Signin Page

O cliente já cadastrado no site precisa estar logado para poder adicionar os produtos ao carrinho. O login é feito nesta página.

Home Page

Após efetuar o login o usuário é direcionado à Homepage onde são exibidos os itens disponíveis.

Cada item é mostrado em um card onde são exibidas suas informações, como nome, valor, categoria e uma imagem ilustrativa.

Cabeçalho

As seguintes informações são exibidas no cabeçalho:

• Logo à esquerda - possui um link para a página de login
• Campo de pesquisa à direita - basta iniciar a digitação para uma busca automática
• Ícone de cliente logado - o ícone ficará verde quando o cliente estiver logado e cinza quando não estiver
• Carrinho - Ìcone que representa o carrinho e quando existem itens no mesmo, a quantidade é exibida
• Logout - Ìcone para o cliente fazer logout do aplicativo

Cart Modal

Ao clicar no ícone do carrinho um modal é exibido contendo os produtos adicionados com a quantidade, imagem do produto, seu nome e o valor total dos itens.

Status do Projeto

Projeto já finalizado e funcional.

Link do deploy com o aplicativo funcional

Hamburger-shop

🛠 Tecnologias

• React
• TypeScript
• Material UI
• Styled Components
• ContextAPI
• React Router Dom
• JSON-Server-Auth Fake API para registro de clientes, realização do login e registro dos produtos

Autor

🚀 Roberto Bressanelli