Aplicação usando Redux, Redux-Saga, Redux Persist, Ducks, seamless-immutable, styled-components, react-currency-format, JSON Server e Reactotron.
Nesse desafio você irá construir uma aplicação com interface de e-commerce, o usuário poderá adicionar produtos ao carrinho e no final exibir o valor total do pedido.
Além disso, os dados de produtos e categorias virão de uma API com json-server (o arquivo da API está na pasta do desafio).
A interface da aplicação será como a seguinte:
- Os dados devem ser consumidos do JSON Server utilizando o arquivo server.json em anexo;
- O usuário deve poder adicionar produtos, alterar sua quantidade e removê-lo do carrinho;
- O valor do carrinho deve ser calculado pela soma dos preços x quantidades;
- A barra de categorias deve fornecer scroll horizontal para ver todas categorias;
- As requisições assíncronas devem utilizar Redux Saga;
- Você deve exibir sinais de loading enquanto a requisição está sendo feita na lista de produtos/categorias inicial;
- http://localhost:3000/categories (Busca categorias)
- http://localhost:3000/category_products/1 (Busca produtos pelo ID da categoria)
- http://localhost:3000/products/1 (Busca detalhes do produto pelo ID)
Esta é a primeira tela, onde encontram-se todos os produtos vindos da API, podendo também escolher uma categoria de produtos.
Nesta tela, aparece os detalhes do produto escolhido, podendo adicionar o produto no carrinho ou voltar para a tela anterior.
Nesta tela, aparece todos os produtos que estão no carrinho e o subtotal, podendo alterar a quantidade do produto ou excluí-lo do carrinho, também é possível também voltar para a tela Home.
Clique aqui e siga Configuração de Ambiente.
Clique aqui e siga Instalação de Projeto.
Clique aqui e siga Execução de Projeto para Desenvolvimento.
Clique aqui e siga Execução de API.
-
API do Json Server
-
Rotas
-
Categorias
- Busca todas as categorias
-
Produtos por Categoria
- Busca dados de todos os produtos da categoria selecionada
-
Produtos
- Busca todos os dados do produto selecionado
-
-