Olá caçador pokémon, bem vindo ao projeto PokeStore. Uma experiência de caçada de pokémons no mundo real(quer dizer mundo virtual).
A PokeStore nasceu do projeto que desenvolvi no processo seletivo da B2W Digital. O objetivo do desafio era vivênciar a experiência de construir uma loja virtual mostrando como eu imaginaria uma loja online de Pokémon.
Veja funcionando online em https://marco-pokestore.netlify.app/.
Os Pokémon devem ser exibidos a partir da pokeapi, uma api RESTful com dados de quase todos os Pokémon. Os preços poderiam ser definidos aleatoriamente, então eu decidi fazer uma fórmula para o preço que é: experiência inicial / 3.
Exemplo: Squirtle (Experiência Inicial de 63): 63 / 3 = 21.
Além disso, foi proposto pela B2W algumas features e algumas features bônus, caso tivesse tempo. Abaixo, segue as features que foram realizadas:
- Catálogo de produtos
- Carrinho lateral
- Resumo do carrinho
- 3 lojas com estilos e tipos diferentes de Pokémon (Os tipos escolhidos foram Água, Fogo e Elétrico)
- Barra de busca para filtrar os Pokémon
- Botão de finalizar compra, reiniciando o processo de compra
- Modal de obrigado ao finalizar compra
- Salvar os dados da compra do usuário localmente para não perdê-las ao atualizar a página
- Testes E2E/UI automatizados para garantir que suas funcionalidades estão funcionando corretamente.
- Colocá-lo online em alguma url pública para que as pessoas consigam utilizar a loja
- Uma página com mais detalhes do Pokémon
Abaixo segue instruções de como realizar a execução do projeto localmente.
Para baixar o projeto basta fazer um clone do repositório do projeto.
git clone https://github.com/marcoaring/pokestore.git
Entre na pasta do projeto
cd pokestore
Para instalar as dependências do projeto utilize, de preferência, o yarn. Mas, o projeto funciona rodando pelo npm também.
yarn install ou yarn
Após instalar as dependências basta rodar o comando
yarn start
O projeto será aberto na porta 3000 do seu localhost.
Para buildar o projeto para produção basta inserir o seguinte comando.
yarn build
Para rodar os testes unitários do projeto basta inserir o seguinte comando.
yarn test
Os testes irão rodar com a função watch ativada, de forma, a atualizar automaticamente quando você fizer alguma alteração no projeto.
Para gerar os dados de coverage, rode o seguinte comando.
yarn coverage
Dessa forma será gerado uma pasta coverage na raiz do projeto, aonde está as informações do mesmo.