Esse projeto Ć© uma atualizaĆ§Ć£o do Panda Store Project. Um projeto refatorado utilizando Redux.
Uma versĆ£o simplificada, sem persistĆŖncia no banco de dados, de uma loja online. Desenvolvido em dupla de acordo com demandas definidas em um quadro Kanban. A partir dessas demandas, temos uma aplicaĆ§Ć£o onde os usuĆ”rios poderĆ£o:
- Buscar produtos por termos e categorias a partir da API do Mercado Livre;
- Interagir com os produtos buscados de modo a adicionĆ”-los e removĆŖ-los de um carrinho de compras em diferentes quantidades;
- Visualizar detalhes e avaliaƧƵes prƩvias de um produto, bem como criar novas avaliaƧƵes;
- E por fim, finalizar a compra (simulada) dos itens selecionados.
A pƔgina web consome os dados da API do Mercado Livre para realizar a busca de itens da loja online. As buscas podem ser consultadas nos seguintes endpoints:
- Para listar as categorias disponĆveis:
- Tipo da requisiĆ§Ć£o:
GET - Endpoint: https://api.mercadolibre.com/sites/MLB/categories
- Tipo da requisiĆ§Ć£o:
- Para buscar por itens por termo:
- Tipo da requisiĆ§Ć£o:
GET - ParĆ¢metro de busca $QUERY (este parĆ¢metro deve ser substituĆdo pelo valor do campo de busca)
- Endpoint: https://api.mercadolibre.com/sites/MLB/search?q=$QUERY
- Tipo da requisiĆ§Ć£o:
- Para buscar itens por categoria:
- Tipo da requisiĆ§Ć£o:
GET - ParĆ¢metro de busca $CATEGORY_ID (este parĆ¢metro deve ser substituĆdo pelo ID da categoria selecionada)
- Endpoint: https://api.mercadolibre.com/sites/MLB/search?category=$CATEGORY_ID
- Tipo da requisiĆ§Ć£o:
- Para buscar itens de uma categoria por termo:
- Tipo da requisiĆ§Ć£o:
GET - ParĆ¢metro de busca $QUERY (este parĆ¢metro deve ser substituĆdo pelo valor do campo de busca)
- ParĆ¢metro de busca $CATEGORY_ID (este parĆ¢metro deve ser substituĆdo pelo ID da categoria selecionada)
- Endpoint: https://api.mercadolibre.com/sites/MLB/search?category=$CATEGORY_ID&q=$QUERY
- Tipo da requisiĆ§Ć£o:
Se vocĆŖ quiser aprender mais sobre a API do Mercado Livre, veja a documentaĆ§Ć£o.
Implemente um mĆ³dulo que acessa a API do Mercado Livre.
Criar o campo de busca da tela principal, a listagem de produtos, inicialmente vazia. A listagem vazia deve conter a mensagem "Digite algum termo de pesquisa ou escolha uma categoria".```
Criar o botĆ£o de carrinho de compras na tela principal, de listagem de produtos, e criar uma tela para o carrinho de compras, inicialmente vazio.```
Listar filtros de categoria obtidos da API na tela principal, de listagem do produto. A requisiĆ§Ć£o da API para recuperar as categorias deve ser feita uma Ćŗnica vez apĆ³s o carregamento da tela.
Criar a listagem de produtos. Fazer a exibiĆ§Ć£o resumida do produto (o "card" que aparece na listagem). A exibiĆ§Ć£o deve ter tĆtulo, foto e preƧo. Fazer requisiĆ§Ć£o Ć API do Mercado Livre enviando os termos buscados por quem usa e usar o retorno para fazer a listagem dos produtos. Se a busca nĆ£o retornar resultados, gerar a tela correspondente com o texto "Nenhum produto foi encontrado".
Como pessoa usuƔria, eu quero clicar em uma categoria e ver a listagem de produtos ser filtrada de acordo com os produtos daquela categoria.
7. Redirecione para uma tela com a exibiĆ§Ć£o detalhada ao clicar na exibiĆ§Ć£o resumida de um produto
Como pessoa usuĆ”ria, eu quero clicar no card do produto e visualizar a exibiĆ§Ć£o detalhada do produto com nome do produto, imagem, preƧo e especificaĆ§Ć£o tĆ©cnica. A tela tambĆ©m deve possuir um botĆ£o que leve ao carrinho de compras.
Na tela de listagem de produtos, permitir adicionar o produto ao carrinho.
Na tela de exibiĆ§Ć£o detalhada do produto, permitir adicionar o produto ao carrinho.
10. Visualize a lista de produtos adicionados ao carrinho em sua pĆ”gina e permita a manipulaĆ§Ć£o da sua quantidade
Adicionar lista de produtos ao carrinho, com valor total ao final. Criar botƵes (-) e (+) para cada produto do carrinho, permitindo alterar a quantidade desejada de cada produto. A quantidade nĆ£o pode ser negativa. Criar tambĆ©m botĆ£o (X) para remover produtos do carrinho e botĆ£o para finalizar a compra.
Adicionar formulĆ”rio ao produto, em sua exibiĆ§Ć£o detalhada, para permitir adicionar avaliaƧƵes com nota de 1 a 5 estrelas e comentĆ”rios (o comentĆ”rio deve ser opcional, sendo possĆvel enviar apenas a nota). Exibir a lista de avaliaƧƵes jĆ” feitas. Se quem usa sai e volta da tela, a nota e as avaliaƧƵes nĆ£o devem ser apagadas.
12. Finalize a compra vendo um resumo dela, preenchendo os seus dados e escolhendo a forma de pagamento
Implementar tela para a finalizaĆ§Ć£o da compra. A tela deve conter uma seĆ§Ć£o para revisĆ£o dos produtos com o valor total da compra, um formulĆ”rio para ter as informaƧƵes do comprador e um a seĆ§Ć£o para escolher o mĆ©todo de pagamento. Ao se clicar em "Comprar", deve-se validar que o formulĆ”rio estĆ” preenchido e que a forma de pagamento foi escolhida e, em caso positivo, deve-se zerar o estado, redirecionar para a tela inicial (listagem de produtos). Caso algo nĆ£o tenha sido preenchido, mantĆ©m-se na mesma tela com o dados sem apagar e destaca-se os campos nĆ£o preenchidos em vermelho.
13. Mostre junto ao Ćcone do carrinho a quantidade de produtos dentro dele, em todas as telas em que ele aparece
Adicionar ao Ćcone do carrinho, em todas as telas em que ele aparece, um nĆŗmero com a quantidade de produtos adicionados.
Adicionar quantidade disponĆvel do produto (disponĆvel via chamada da API na chave "available_quantity") e limitar a compra de acordo com a quantidade em estoque. Desabilite os botƵes de (+) daquele produto na aplicaĆ§Ć£o ao se alcanƧar a quantidade mĆ”xima dele no estoque.
Adicionar indicador de frete grĆ”tis Ć exibiĆ§Ć£o resumida e detalhada do produto.
Adicionar ao site um layout agradĆ”vel para quem usa ter uma boa experiĆŖncia.
FaƧa um layout responsivo completo, para telas pequenas.
Criar um seletor dropdown que permite a lista de produtos ser ordenada por maior e menor preƧo.
Coloque uma animaĆ§Ć£o no carrinho quando adicionar/remover um produto.
Exibir o conteĆŗdo do carrinho num slider na lateral da tela, de forma que ele possa ser exibido e escondido atravĆ©s da interaĆ§Ć£o com botĆ£o (veja os detalhes no card).
Destacar produtos que jƔ foram adicionados ao carrinho, diferenciando-o dos demais produtos da lista da pƔgina principal (veja os detalhes no card).
Da tela de detalhamento de produto, permitir alterar a quantidade daquele produto no carrinho, se ele estiver lĆ”, com botƵes (-) e (+). A quantidade nĆ£o pode ser negativa (veja detalhes no card).