Visão Geral:
A aplicação Hamburgueria Kenzie simula um carrinho de compras, oferecendo uma experiência interativa para explorar produtos, adicionar itens ao carrinho e visualizar totais. A estilização responsiva garante uma navegação agradável em diferentes dispositivos.
Como Utilizar:
Acesse o Link abaixo para acessar a aplicação:
https://m3-s3-hamburgueria-kenzie-charles-marx-c184x8d08-marxsuel.vercel.app/
Instalação das Dependências (opcional):
Para começar, clone o repositório e, em seguida, instale as dependências utilizando o seguinte comando no terminal:
$ git clone https://github.com/Marxsuel/Hamburgueria-Kenzie.git
$ cd nome-do-repositorio
$ npm install
Agora, a aplicação está pronta para ser utilizada! Execute o comando npm start ou npm run dev para iniciar a aplicação localmente.
1. Estilização
A estilização foi desenvolvida usando SASS para proporcionar uma experiência visual atrativa. A responsividade está integrada, garantindo uma interface adaptada a diversos tamanhos de tela.
2. Trazendo Produtos da API | Busca
Ao acessar a aplicação, a lista de produtos é automaticamente carregada a partir de uma API. Utilize o formulário de busca para encontrar produtos específicos, fornecendo o nome desejado. Os resultados são atualizados em tempo real.
3. Gerenciamento do Carrinho | Modal
Adicionar e Remover Itens
- Explore a lista de produtos e adicione itens ao carrinho clicando no botão "Adicionar ao Carrinho".
- Remova itens do carrinho clicando no botão de remoção correspondente (ícone da lixeira).
Totais
Os totais, incluindo o subtotal e o total geral, são automaticamente atualizados à medida que itens são adicionados ou removidos do carrinho.
Persistência de Dados
As informações do carrinho são automaticamente salvas no localStorage, garantindo que seus itens permaneçam mesmo ao recarregar a página.
4. Modal
O modal proporciona uma experiência intuitiva de abertura e fechamento. Ao clicar no botão "Ver Carrinho", o modal é exibido, mostrando uma visão resumida do conteúdo do carrinho. Clique fora do modal ou no botão "Fechar" para ocultá-lo.
A Hamburgueria Kenzie utiliza as seguintes tecnologias e conceitos:
- React
- SASS para estilização
- Responsividade para adaptação a diferentes dispositivos
- Manipulação de API para obtenção da lista de produtos
- Utilização do localStorage para persistência dos dados do carrinho
- Controle de estados com React Hooks, incluindo o
useEffect - O
useEffecté utilizado para trazer os produtos da API durante a montagem do componente, garantindo que a lista esteja disponível assim que o usuário acessar a aplicação. Além disso, é empregado para atualizar dinamicamente os resultados da busca à medida que o usuário insere o nome desejado.