Uma aplicação web E-commerce onde é possível ver todos os quadrinhos, ver seus detalhes e adicioná-los ou removê-los do carrinho
• Descrição
• Start da aplicação
• Funcionalidades
• Report bugs
• Documentação da API da Marvel
• Bibliotecas
• Ferramentas
• Desenvolvedora
Link Vercel: Clique aqui para acessar o projeto.
- ReactJs
- Styled components
- Context API
- React-hook-form
- React toastfy
- React Router DOM
- Axios
- VS Code
- Github
- Typescript
- Node 16.18.0
- Consumo da Api da Marvel
- Consumo da Api do Google Maps
- Lista de quadrinhos
- Modal que renderiza os detalhes do quadrinho selecionado
- Filtragem por títulos e descrição dos quadrinhos
- Adicionar e remover o quadrinho selecionado ao carrinho
- Busca pelo endereço através da Api do Google Maps
- Padronizar as fonts
- Padronizar a paleta de cores no globalStyles
- Adicionar funcionalidade e estilo de button disable
- Corrigir bugs da funcionalidade de filtro, quando o filtro for clicado mas não receber nenhum valor deve listar todos os cards, caso o quadrinho não foi encontrado, retorna mensagem Nenhum quadrinho foi encontrado
- Adicionar funcionalidade de see caso um qudrinho for adicionado mais de uma vez, que renderize apenas um no carrinho e atualize o preço e o total
- Adicionar funcionalidade que é possível utilizar as APIs do Google Maps para exibir um mapa na tela e permitir que o usuário selecione um endereço, visto que até o momento se faz a busca no Google Maps, todavia não é possível selecionar o endereço
- Ajustar o Header para que no seu style, ele possa receber propriedades para se adaptar as páginas
- Ajustar o deploy da Vercel, visto que não renderiza os quadrinhos
- Implementar segurança de Keys privadas
Clique aqui para acessar a Api do Google Maps.
Com base no requisito fornecido, podemos entender que a aplicação é uma espécie de catálogo de quadrinhos, que deve conter uma lista de quadrinhos e uma tela de detalhes para cada quadrinho. Além disso, a aplicação deve permitir o envio dos quadrinhos para um endereço selecionado no mapa, utilizando o Google Maps.
Para implementar essa solução, é possível seguir os seguintes passos:
Definição a arquitetura da aplicação: Flux Architecture, compatível com ReactJs.
Implementar a tela de lista de quadrinhos: A primeira tela da aplicação deve exibir uma lista de quadrinhos, com informações como título, descrição, entre outros.
Implementar o modal de detalhe do quadrinho: Ao clicar em um quadrinho na lista, o usuário deve ser levado para uma tela de detalhes, que exibe informações mais detalhadas sobre o quadrinho.
Integrar o Google Maps: Para permitir o envio dos quadrinhos para um endereço selecionado no mapa, é necessário integrar o Google Maps à aplicação. Para isso, é necessário criar uma conta no Google Maps Platform e obter uma chave de API. Com essa chave, é possível utilizar as APIs do Google Maps para exibir um mapa na tela e permitir que o usuário selecione um endereço.
Implementar a funcionalidade de envio dos quadrinhos: Depois que o usuário selecionar o endereço no mapa, é necessário implementar a funcionalidade de envio dos quadrinhos. Isso pode ser feito por meio de um formulário que permite ao usuário inserir suas informações de contato e outras informações relevantes, como a quantidade de quadrinhos que deseja enviar e o horário preferido para a entrega.
Adicionar funcionalidades extras: Para agregar valor à solução, é possível adicionar outras funcionalidades, como uma barra de pesquisa para encontrar quadrinhos específicos, uma lista de desejos para que o usuário possa salvar seus quadrinhos favoritos, uma seção de avaliações e comentários para cada quadrinho, entre outras.
