Este é um projeto desenvolvido como parte de um desafio de código para criar um front-end para uma loja de quadrinhos virtual. O objetivo é criar um website moderno e atraente, que permita aos usuários visualizar e comprar HQs da Marvel Comics.
Veja funcionando agoraPara executar a aplicação localmente, siga os seguintes passos:
-
Clone este repositório em sua máquina local:
git clone https://github.com/Kato2004/marvel-hq-shop.git -
Navegue até o diretório do projeto:
cd marvel-hq-shop -
Instale as dependências:
npm install -
Inicie a aplicação:
npm start
Os testes E2E foram realizados com o Cypress e abrangem os fluxos de adição de itens ao carrinho, aplicação de cupons de desconto e verificação do preço final da compra.
Para executar os testes E2E, siga os seguintes passos:
-
Inicie a aplicação:
npm start -
Em outro terminal, execute os testes E2E:
npm run test
A página inicial apresenta uma lista de HQs da Marvel Comics, paginada de 20 em 20 itens. Para tornar a experiência do usuário mais interessante, 10% dos quadrinhos são marcados aleatoriamente como raros ao carregar a página. Clicando em um item da lista, o usuário é redirecionado para a página de visualização individual da HQ.
A página de visualização individual da HQ apresenta informações detalhadas sobre a história em quadrinhos selecionada, incluindo a capa, o título, o preço e a descrição da HQ. A página também apresenta a possibilidade de adicionar a HQ ao carrinho de compras.
O carrinho de compras é acessível a partir de um ícone de carrinho no canto superior direito da página. O carrinho apresenta uma lista de itens adicionados pelo usuário, com o preço total da compra e a possibilidade de inserir um cupom de desconto. Os cupons podem ser comuns ou raros, e são aplicados somente às HQs respectivamente comuns e raras.
Neste projeto bastante desafiador aprendi muito e me aprofundei em assuntos que eu não dava muito atenção, no caso testes e performace, o primeiro eu já estudei e fiz testes unitários mas nunca end-2-end e gostei muito e irei me aprofundar no Cypress e entender o que deve, pode e é obrigatório ser testado para ter certeza que todas as funcionalidades do sistema estão funcionando. Já no caso da performace não tinha tanto conhecimentos no o que a falta dela pode ocasionar, por exemplos o uso de muitos estados e a manipulação deles a todo o momento que acaba com a experiência do usuário com lentidão e até mesmo a impossibilidade do uso da aplicação.
Já sobre os desafios que superei acredito que o principal foi a manipulação de estados grandes que são utilizados e dão vida a grande parte da aplicação como o estado do carrinho que contém os valores de todos os items que estão no carrinho que acaba sofrendo muitas alterações como exclusão de itens e modificações de valores que recebem desconto, para concluir foi um dos melhores desafios que eu já fiz e coloquei todo meu esforço para que ficasse bom, por isso, espero que goste.