Foi o segundo desafio prático do curso, desenvolver uma aplicação para gerenciar um carrinho de compras de uma cafeteria fictícia, que contém as seguintes funcionalidades:
- Listagem de produtos (cafés) disponíveis para compra
- Adicionar uma quantidade específicas de itens no carrinho
- Aumentar ou remover a quantidade de itens no carrinho
- Formulário para o usuário preencher o seu endereço
- Exibir o total de itens no carrinho no Header
- Exibir o valor total da soma de itens no carrinho multiplicados pelo valor
Gostei muito desse desafio e confesso que não foi fácil mas me esforcei bastante e cheguei no melhor resultado ao meu alcance. Com esse desafio utilizei o contextAPI para salvar as informações do carrinho, com os hooks useContext e useReducer ficou mais fácil gerenciar as funções de adicionar, remover, incrementar e decrementar os items do carrinho e também esvaziar o carrinho depois que o usuário confirmar o pedido. No formulário para preencher o endereço eu tentei colocar de uma forma quando o usuário preencher o CEP depois que sair do input ele preencha o resto do endereço automaticamente e também utilizei o Zod resolver com o react-hook-form para a validação dos campos. Algo que gostaria de ter feito era deixar o nome da cidade do usuário no cabeçalho ao lado do carrinho mas nesse caso eu só consegui pegar latitude e longitude pelo navegador e vi que para converter seria necessário utilizar a api do google e precisa de autenticação para utilizar, como é um projeto para estudos preferi não fazer isso por enquanto e deixei estático mesmo. Como disse, aprendi bastante com esse desafio e vou continuar me aprofundando nos estudos de front-end com reactJS e typescript.
Para abrir e rodar o projeto, primeiro baixe os arquivos desse repositório, abra a pasta no terminal e execute npm install para instalar as dependências e depois npm run dev para iniciar o projeto.
