Esse projeto foi desenvolvido em três partes, todas utilizando os conceitos de clean architecture.
Os detalhes de arquitetura e organização de cada projeto estão em seus respectivos readme.
Após subir os três projetos, terá acesso a Home.
Nesta temos alguns recursos implementados.
- Ao clicar em
adicionar ao carrinho
deve incluir o produto no carrinho, lançando um popup de confirmação e trocando a badge de quantidade sobre o botãoCarrinho
do header. - Caso não possua mais estoque, será apresentado um modal informando ao usuário, sem que o produto seja incluído no carrinho.
- A paginação no rodapé da página deve alterar a listagem de produtos conforme a página selecionada.
- Ao clicar no
card do produto
o usuário deve ser levado a página com os detalhes do mesmo.
Na página de produtos temos alguns recursos implementados.
- Ao pressionar o botão de
adicionar ao carrinho
deve seguir o mesmo padrão de regras da home validando o estoque e informando o usuário conforme a ação. - Ao pressionar o botão
Escolher outros produtos
deve voltar para a home.
- Uma listagem com paginação deve ser apresentada com a foto, descrição, quantidade e preço total de cada produto. Essa listagem mostra apenas 4 produtos por vez e também é paginada.
- Ao pressionar na
imagem do produto
um preview será apresentado com a imagem em um tamanho maior. - Na coluna
Qtd.
temos o botão+
e-
e devem adicionar ou remover o produto da cesta conforme clicado, as mesmas regras da home em questão de estoque devem ser aplicadas, validando estoque e notificando o usuário. - Quando a quantidade do produto é diminuída a 0, o produto deve sair do carrinho, atualizando a listagem.
- Na coluna
Qtd.
também temos um input de número e deve permitir que o usuário digite qualquer número que queira, exceto 0. Caso digitado um número maior que a quantidade de estoque, o usuário deve ser informado com as mesmas regras da tela de home. - Na coluna
Qtd.
temos um botãoRemover produto
e quando pressionado deve remover o produto do carrinho.
- Deve apresentar a quantidade de produtos e o valor total.
- Irá apresentar frete sempre 0 pois não foi implementado.
- Deve apresentar o total geral e logo abaixo a quantidade de vezes que é possível parcelar. Cada produto possui a quantidade de parcelas possíveis, a regra aqui é sempre a maior quantidade entre os produtos.
- Ao pressionar
Adicionar mais produtos
deve voltar para home. - Ao pressionar
Finalizar compra
deve levar o usuário a página de checkout caso possua produto, caso não tiver, deve apresentar um modal para o usuário e fazer o redirecionamento para a home.
- Caso o usuário acessar diretamente a rota /checkout sem produtos no carrinho, deve fazer o redirecionamento para a home.
- Deve apresentar a quantidade de produtos e o valor total.
- Irá apresentar frete sempre 0 pois não foi implementado.
- Deve apresentar o total geral e logo abaixo a quantidade de vezes que é possível parcelar. Cada produto possui a quantidade de parcelas possíveis, a regra aqui é sempre a maior quantidade entre os produtos.
- O campo
número do cartão
deve aceitar apenas números, formatando com espaço a cada 4 números. É validado como um campo obrigatório e deve conter exatamente os 16 dígitos. - O campo
nome impresso no cartão
é um campo de texto livre e é validado como um campo obrigatório. - O campo
validade do cartão
é um pickup de mês e é validado como um campo obrigatório. - O campo
cvv
deve aceitar apenas números. É validado como um campo obrigatório e deve conter exatamente 3 dígitos. - O select
parcelas
sempre vem selecionado padrão como 1 e deve apresentar todas as opções conforme os produtos selecionados. - Após pressionar
Fechar pedido
as validações devem ser aplicadas e qualquer alteração no campo será atualizada nas mensagens de validação. - Após pressionar
Fechar pedido
com todos os campos corretos o pedido será enviado e armazenado no banco de dados, um modal confirmando a compra será mostrado, o carrinho será zerado e o usuário redirecionado para a home.
- o
número do cartão
1234 1234 1234 1234
será sempre considerado inválido, qualquer outro número com 16 dígitos será considerado correto. - o
cvv
123
será sempre considerado inválido, qualquer outro número com 3 dígitos será considerado correto. - a
validade do cartão
será considerado válido desde que seja do mês atual ou futuro, qualquer mês/ano passado será considerado errado. - O backend irá validar o estoque dos produtos novamente no processo de checkout, caso 2 usuários simultâneos coloquem os mesmos produtos no carrinho,
Fechar pedido
será apresentado informando que alguns produtos estão com estoque insuficiente.
- O botão
carrinho
será apresentado em todas as páginas e ao ser pressionado redireciona o usuário para a página de carrinho. - Um breadcrumb é criado dinamicamente em cada página e é possível pressionar em
home
para voltar à página anterior. - Os dados do carrinho são armazenados no Redux e LocalStorage, ao acessar a URL diretamente o Redux carrega o LocalStorage com os dados anteriores.
- O layout foi desenvolvido em forma responsiva utilizando os grid do Ant Design.