Desenvolvido em React e utilizando Redux e Redux-Saga, a loja virtual LadoDiCá é uma inicitiva referente a criação de um e-commerce para disponibilizar os produtos voltado para o público infantil.
1- Página principal
- Listagem dos produtos com informações do nome e preço e quantidade de itens no carrinho;
- Possibilidade de inserir itens no carrinho;
- Campo de busca onde o usuário pode buscar por nome ou referência(código) do produto;
- Informação de quantos itens (diferentes) possui no carrinho, o mesmo pode ser acessado de qualquer lugar da aplicação;
- Mostrar os produtos por categoria (Meninas/Meninos/Kits/Fraldas/Sapatinhos) apenas clicando nas mesmas.
- Informações para contato no rodapé, todos com redirecionamento para a mídia social/Whatsapp.
2- Detalhamento do Produto
- Possbilidade de ver as fotos disponiveis do protudo em destaque, apenas clicando nas miniaturas;
- Campo para inserir o tamanho do produto;
- Detalhes do produto onde é apresentado uma descrição mais detalhada do mesmo;
- Botão para inserir o item no carrinho;
3- Carrinho de compras
- Listagem dos produtos adicionados ao carrinho, com suas respectivas quantidades,
- Possibiliade de aumentar/diminuir a quantidade dos itens;
- Possibilidade de remover o item do carrinho;
- Informação dos valores (Subtotal/Total Geral), todos são calculados de forma dinâmica;
- Possibilidade de inserir um cupom de desconto disponível;
- Botão para finalizar a compra;
4- Finalização da compra
- Um modal onde é mostrada a informação que a compra foi concluída com sucesso, após fechar o mesmo, o carrinho será limpo e o usuário será direcionado para página inicial;
Como fonte de dados foi utilizado o JSON-SERVER ele disponibiliza um MOCK de dados previamente cadastrados, como se fosse uma API, onde a aplicação pode fazer requisições utilizando os verbos HTTP;
Para utilizar o recurso de buscas, como o JSON-SERVER não possui o recurso para buscar por um campo OU outro, foi adicionado um middleware (de acordo com a documentação), onde a requisição POST é recebida e processada, e retorna os dados encontrados.
O arquivo JSON onde estão cadastrados os produtos, está no diretório /json-server/db.json
Após o Download do repositório, na raiz da pasta executar o comando para instalar todas as dependências:
npm install
Após o processo terminar execute o seguinte comando (também na raiz) para colocar sistema da loja no ar:
npm start
Depois para colocar no ar o JSON-SERVER:
node server.js
Se der tudo certo a página ficará disponível no endereço: http://localhost:3000/
