ravenascampos / pokeplace Goto Github PK

Marketplace com Lojas de Pokemon por tipo

Link para o projeto Pokeplace hospedado na Vercel

Desenvolver 3 lojas virtuais de Pokémon, sendo cada loja de um tipo diferente ( água, fogo, fantasma, etc) . Todos os dados sobre os pokémon como nome, número, tipo, imagem e entre outras coisas, foram disponilizadas com o uso da API REST PokéApi.

• Catálogo de produtos: Listar os pokémon com o uso da API REST, de acordo com o tipo da loja.

• Carrinho lateral: Listar os produtos selecionados em um carrinho de compras. O carrinho foi feito na forma de um SideCart, que pode ser ocultado. No carrinho é possível atualizar a quantidade, excluir e finalizar a compra

• Buscar Pokémon: Método para filtrar os pokémon a partir do seu nome.

• Resumo do carrinho: O resumo do carrinho aparece no Header da aplicação, por meio do ícone de cesta. A quantidade resumida é contada para cada pokémon diferente selecionado, independente da quantidade.

• Botão finalizar compra: Botão que finaliza a compra no carrinho lateral. Após finalizar a compra, o carrinho da loja é esvaziado e reiniciado o processo de compra.

• Modal de obrigado: Ao finalizar a compra é apresentado um modal, com a mensagem de obrigado. Foi adicionado também uma funcionalidade que retorna 15% de Cashback. E uma lista que direciona para outras lojas.

Além das funcionalidades principais foram adicionadas outras ao projeto:

• Salvar Dados de compra localmente: Os dados do carrinho de compras são salvos no localStorage. Cada loja armazena seus dados individualmente. Assim, mesmo atualizando a página ou navengando entre as lojas, os dados não se perdem até finalizar a compra.

• Seção detalhes: Foi adotado o uso de um modal para apresentar os dados de informações sobre o produto, como tipos, habilidades, altura e peso. Basta clicar no ícone de info, presente em cada card de pokémon.

• Notificação por toast: Para interagir e guiar o usuário, foram utilizados Toasts de notificação para apresentar algum aviso( por exemplo, quando tentar finalizar a compra com o carrinho vazio) ou de erro.

• Gerenciamento de estoque: Como a API não disponibiliza "estoque de pokémon", foi definido um padrão de no máximo 3 itens de cada no carrinho. A aplicação consegue incrementar e decrementar itens, e retorna um aviso caso a quantidade selecionada seja maior que o estoque definido.

• Uso de css-in-js e criação de Tema global com o ThemeProvider do styled-components

• Consumo de api com o uso da lib axios.

• listagem de pokémon e filtro por nome.

• Configuração de fonte local .

• Criação de um React hook - useCart

• A estratégia utilizada foi criar um Layout de loja e realizar o consumo da API por "type" e disponibilizar para cada loja. Como se fosse especializada em um tipo de pokemon apenas. Uma vez definido a estrutura da loja, foram criados Temas, com styled-components.

• As 3 lojas estão separadas por rotas /fireshop | /aquashop | /ghostshop. A ideia era deixar as três lojas dentro da mesma aplicação, para facilitar a demostração. Mas cada uma tem seu proprio estado e tema.

• Para criar uma nova loja, basta criar um novo tema e criar uma nova página com o componente Layout, passando o nome do tipo em inglês (e.g.water para pokemon de água). Ver nomes disponíveis na documentação da api PokéApi, em caso de dúvidas.

• React
• React-Icons
• React Router
• Styled-components
• Axios
• React-Modal
• React-Toastify
• Prettier
• Eslint

Faça um clone desse repositório e acesse o diretório.

$ git clone https://github.com/lucascmreis/pokeplace.git && cd pokeplace

# Instalando as dependências
$ yarn

# Executanto aplicação
$ yarn start

Faça o fork e clone o projeto a partir do seu usuário.

# Clonando projeto
$ git clone https://github.com/SEU-NOME-DE-USUARIO/pokeplace.git

# Criando um branch
$ git branch minha-alteracao

# Acessando o novo branch
$ git checkout -b minha-alteracao

# Adicionando os arquivos alterados
$ git add .

# Criando commit e a mensagem
$ git commit -m "Corrigindo...."

# Enviando alterações para o brach
$ git push origin minha-alteracao

Você deve navegar até o seu repositório onde fez o fork e clicar no botão New pull request no lado esquerdo da página.

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.