E-commerce desenvolvido para a venda de Pokémon, produto totalmente white label, contemplado os temas água, fogo e dragão.
-
Para o frontend foi utilizado a ferramenta React Typescript;
-
Para os testes automaizados foi utilizado o framework cypress;
Só é atualizada a vitrine de pokémon se o carrinho de compras estiver vazio;
Totalizadores por quantidade e valor;
Totalizadores por quantidade e valor;
Fogo = volcanic, água = seavell e dragão = wingeon;
Os pokémon são pesquisados na API dinâmicamente através de ranges aleatórios, sempre limitados a 20;
É adicionado o pokémon pesquisado a primeira posição da vitrine;
Finaliza a compra limpando o carrinho e redirecionando após 3 segundo para a home;
Step de confirmação e parabenização do pedido;
Os dados sobre o carrinho do cliente são transitados no redux e salvos no local storage na chave @pokemon-ecommerce/storage, é armazenada informações sobre a vitrine e sobre o carrinho;
Implementado teste E2E happy-path, onde simula a trajetória feliz de um usuário na plataforma, do início até a finalização da compra;
Utilizado cypress;
Colocá-lo online em alguma url pública para que as pessoas consigam utilizar a loja, afinal como vamos vender Pokémon se não nos acharem?
Continuous integration e continuous deployment integrados com a plataforma netlify, onde automatiza todo o processo;
Projeto online: https://epokemon.netlify.app;
O Ideal seria com github actions "deploy as code, tendo o main.yml contendo toda a pipeline de deploy (dev || hml || prd)" e s3 com cloudFront na aws para disponibilização do frontend;
Uma página com mais detalhes do Pokémon, tendo informações como os tipos, movimentos, pontos fracos e pontos fortes. Dessa forma o usuário poderá navegar para essa página e adicionar o Pokémon no carrinho ou voltar para o catálogo.
Criada modal de detalhes do Pokémon, que é exibida ao clicar na imagem de pokémon;
-
Ter o NodeJS instalado de preferência a última versão ou superior a v12.16.1;
-
Ter o gerenciador de dependências yarn instalado (npm também funciona, porém recomendo fortemente o yarn)
- Acessar a pasta frontend e executar os seguintes comandos:
yarn install
yarn start (obs: configurar o arquivo .env na raiz da pasta frontend: copiar conteúdo do .env.example)
yarn cy:open (para executar os testes e2e no frontend) | (obs: para linux caso dê problema de permissão executar o comando "/home sudo chmod -R 777 murillo/.config/Cypress")
divirta-se com as funcionalidades