Este é Coffee Delivery, você pode acessá-lo por este link, ele é um projeto desafio feito após finalizar o segundo módulo do curso Ignite React da Rocketseat visando usar, fixar e avaliar todos os conhecimentos do segundo módulo sobre estados, ContextAPI, LocalStorage, imutabilidade de estado, listas e chaves, props e componentização.
- Listar 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;
- Ter um formulário para o usuário preencher;
- Exibir o total de itens no carrinho no Header;
- Exibir o valor total da soma de itens no carrinho multiplicados pelo valor.
- Pedir o CEP do usuário na primeira visita no site para mostrar sua localização no header;
- Uso da api ViaCEP para buscar dados da localidade e disponibilizar no formulário facilitando a experiência do usuário;
- Máscaras para o input de CEP.
Instale as dependências do projeto com:
npm i
Para iniciar a aplicação use:
npm run dev
Para buildar a aplicação use:
npm run build
- O projeto foi escrito usando Typescript;
- React com Vite;
- Usando as apis próprias do react fiz um contexto, reducers e actions, junto com a biblioteca immer para poder escrever um código simples e não sacrificar os conceitos de imutabilidade;
- Foi usado styled-components com polished para usar css in js.
- Ícones com Phosphor;
- Componentes primitivos usando Radix Ui;
- Axios para chamadas de apis e o consumo da api ViaCEP para leitura de ceps e recebimento de informações de localizações;
- Formulário usando react-hook-forms com validação da biblioteca zod.
Não foi detectado nenhum até o momento.
- Usar os dados do endereço pegos pelo cep inputado no modal e disponibilizá-los na página de checkout para facilitar a vida do user;
- Não senti necessidade mas é possível modificar o contexto para que a home também conte a quantidade de cafés no checkou em vez de sempre manter 0;
- Adicionar algumas media queries para quebrar grids ou containers melhorando a visualização em telas menores;
- O botão de confirmar o CEP faz a tela piscar como se o funcionalidade de fechar o modal rolasse duas vezes;
- De resto sinto que está bom o suficiente e trabalho a mais no projeto seria algo além do necessário para um projeto de estudos.
Marcelo "Masa" Alves
- 1.0 - (05/10/2022)
- Lançamento inicial