Para acessar a Pokeshop, você tem 2 maneiras. Uma é a internet e a outra é o modo local.
A Pokeshop foi hospedada usando o Hosting do Firebase. Por isso, acesse https://pokeshop-db53e.web.app/
Olá, meu nome é Fernando e venho apresentar a minha solução para o desafio proposto. Ela se chama Pokeshop. Nela, eu foquei em 2 lojas do tipo (Planta e Água). Seguindo o modle da B2W Digital, eu fiz uma base de código pricipal, aonde as 2 lojas se diferem em estilo. Para captar os dados, usei a PokeApi. A Pokeshop foi planejada de maneira responsiva, compativel com os mais variados tamanhos de tela, sejam celulares, tablets ou computadores.
-
Na Pokeshop, o usuário poderá ver conhecer todos os Pokemon a venda, cada um com seus respectivos atributos. São eles: Imagem, nome, avaliação e preço. Sendo que tanto a avaliação quanto o preço são determinados aleatoriamente ao carregar a página.
-
O uuário poderá navegar entra lojas clicando no botão select e clicando em Ok. Assim, poderá navegar entre as lojas de forma bem simples.
-
O usuário poderá adicionar os Pokemon ao carrinho de compras e removê-lo. Se adicionar o mesmo Pokemon mais de uma vez, o atributo quantidade será incrementado. Da mesma forma, ao remover, se houver mais de um, irá remover a quantidade que quiser.
-
O usuário poderá buscar pelo Pokemon que deseja na busca em tempo real na barra de busca e adicionar ao carrinho de lá mesmo, se quiser.
-
Ao abrir a página, o usuário poderá ver os 12 primeiros Pokemon. Se desejar ver mais, basta clicar no botão Carregar mais, onde a cada carregamento serão trazios mais 12 Pokemon. Ele poderá ver todos os Pokemon até chegar ao final.
-
O preço total é alterado a cada alteração no carrinho de compras. Ou seja, tanto adições quanto subtrações de Pokemon serão contabilizados, para garantir a segurança do valor final.
-
Ao clicar em comprar, o usuário é redirecionado para a página Resumo do carrinho, onde poderá ver todos os Pokemon selecionados, ver o preço total e poderá finalizar a compra. Além disso, ele ainda poderá remover algum Pokemon do carrinho, se mudar de ideia e continuar para compra.
-
Ao finalizar a compra, um modal será aberto mostrando agradecimentos e após fechar o usuário ser redirecionado para a página de origem.
-
Após isso, o usuário poderá notar que o ícone de Notificações no header apresentará algo novo. Quando clicar, poderá ver as compras que já fez no site. Basicamento vai mostrar um array contendo os objetos(as compras) que já foram efetuadas no site.
Nessa página, o usuário poderá ver os Pokemon já adicionados e poderá escolher entre a finalização da compra ou remover algum dos já selecionados antes.
Ao clicar em finalizar, ele poderá ver o modal de agradecimento e será redirecionado para a página inicial para comprar mais Pokemon.
Após finalizar a compra, o ícone de notificações estará ativo com um badge vermelho indicando um número. Esse número, está relacionado ao número de compras que o usuário já fez no site. Ao clicar nele, o comprador poderá visualizar todas as compras já feitas no site.
Ao acessar, poderá ser visto todas as compras já feitas no site, mesmo se atualizar. Os dados foram salvos no local storage
Ao digitar o nome do Pokemon, serão mostrados em tempo real os Pokemon relacionados com o que foi digitado. Eu criei uma solução bem manual a principío. Utilizei o onChange no input e usei o Redux para receber os parâmetros de pesquisa. Usei a função startsWith(searchParams), para fazer o match do que foi digitado com os Pokemon coletados na PokeApi.
A Pokeshop foi planejada para os diversos tamanhos de tela e dispositivos.