Skip to content

Latest commit

 

History

History
234 lines (128 loc) · 8.33 KB

README.md

File metadata and controls

234 lines (128 loc) · 8.33 KB

Projeto em fase de desenvolvimento (mas já pode dar uma espiadinha)

Esta aplicação está utilizando a API que também está em fase de desenvolvimento: https://github.com/Romeusorionaet/Api-shopping-store

Shopping Store

Atenção: A Api na qual este e-commerce consome, está hospedado de forma gratuita, e esses serviços são apenas para testes. Isso implica diretamnete no funcionamento do site como por exemplo, lentidão ao carregar os produtos no primeiro acesso.


Propósito

Este E-commerce foi criado para fins de portfólio, demonstrando meus conhecimentos em diversas tecnologias. A Shopping Store será continuamente atualizada, embora sem uma data específica para as atualizações. Sempre que adquirir novos conhecimentos e técnicas para melhorar o sistema, irei aplicá-los aqui.

Ferramentas Utilizadas

Package.json

É importante mencionar que algumas funcionalidades introduzidas no e-commerce ainda não foram exploradas em sua totalidade. Por exemplo, o sistema de notificação atualmente só envia alertas quando um comprador tenta realizar uma compra, mas não a finaliza, lembrando-o de concluir a transação. Ainda pretendo explorar mais, tanto este sistema de notificações quanto outras funcionalidades, expandindo-as para outras áreas do e-commerce.

Meus contatos


Aprensentação das interfaces / Funcionalidades

  • Home

Na primeira visualização, os produtos em promoção são apresentados em um slider automático. Logo abaixo, há a possibilidade de ver o catálogo completo ou entrar em contato com o vendedor.

preview

  • Home (Parte 2)

Na segunda seção da Home, há uma barra de pesquisa que direciona o usuário a outra página com os resultados da pesquisa. Em seguida, há um carrossel de produtos com controles de setas (direita e esquerda) bastante intuitivos.

preview

  • Menu

O Menu permite a navegação completa por todo o e-commerce.

preview

  • Autenticação

Uma interface intuitiva permite ao usuário realizar sua autenticação, com a opção de entrar pelo Google ou inserir manualmente o e-mail e a senha. Caso não tenha uma conta registrada, há a opção de criar uma.

preview

  • Registrar conta

Nesta interface, o usuário insere seus dados para registro. Diferentemente do registro pelo Google, onde a conta é autenticada automaticamente, ao criar uma conta manualmente, será necessário validá-la após a criação.

A validação da conta é simples e intuitiva: um e-mail é enviado para sua caixa de entrada, por isso é importante fornecer um e-mail válido ao criar a conta, pois o processo de validação é essencial para realizar a autenticação na plataforma.

No e-mail enviado, haverá um link contendo um token. Basta clicar no link, que levará de volta à plataforma, onde você só precisará clicar em "confirmar."

preview

  • Corfirmação do E-mail

Ao acessar o link recebido na sua caixa de entrada, você será direcionado para uma página onde poderá confirmar seu e-mail clicando no botão "Confirmar".

preview

  • Adicionar um item ao carrinho

Agora você pode adicionar itens ao seu carrinho de compras. Ao adicionar um item, uma mensagem temporária aparecerá na tela, informando que o item foi adicionado com sucesso.

preview

  • Carrinho de compra

No carrinho de compras, você poderá visualizar os produtos adicionados, com a opção de aumentar ou diminuir a quantidade de um item específico, ou removê-lo do carrinho. Cada item é apresentado de forma resumida, exibindo apenas o título, valor, quantidade e imagem do produto.

O carrinho também exibe informações adicionais, como o subtotal (valor total do carrinho sem desconto), descontos aplicados, e o total (valor total do carrinho com desconto). Por fim, há a opção de prosseguir para o próximo passo, que é o registro do endereço de entrega.

preview

  • Endereço de entrega

Nesta interface, você encontrará um formulário essencial para registrar o endereço do cliente, com a possibilidade de atualizar qualquer informação necessária. Após registrar o endereço, basta finalizar a compra.

preview

  • Finalizar compra

Finalizar uma compra é simples e seguro. Como mostrado na figura a seguir, estamos utilizando a ferramenta Stripe, atualmente em modo de teste.

preview

  • Notificações

O e-commerce também conta com um sistema de notificações. A figura abaixo ilustra um exemplo de como uma notificação é recebida. O menu de notificações permite visualizar também notificações antigas.

preview

  • Visualização de uma notificação

Ao clicar em uma notificação no menu, você será direcionado para uma interface semelhante à ilustrada na figura abaixo.

preview

  • Seus pedidos

Após finalizar uma compra com sucesso, você pode abrir o menu de navegação e selecionar a opção "Seus Pedidos" para acessar a página onde poderá visualizar todos os seus pedidos.

preview

  • Seus pedidos (Parte 2)

A seção "Seus Pedidos" exibirá detalhes sobre sua compra, como a data da compra, status, situação do processo, endereço de entrega, código de rastreamento (se o pedido já tiver sido entregue à agência de entrega) e os valores da compra.

preview

  • Página de pesquisa

Ao pesquisar por um produto na barra de pesquisa localizada na página inicial do e-commerce, você será redirecionado para uma nova interface que exibirá os resultados da pesquisa.

preview

  • Páginação

Ao visualizar os resultados da sua pesquisa, a interface inclui um modelo de paginação simples. Ela mostra setas para navegar entre as páginas e visualizar novos produtos, além de exibir o número da página atual.

preview

  • Detalhes do produto

Ao clicar em um produto, você será direcionado para uma nova interface onde poderá visualizar mais informações sobre o item escolhido.

A página de detalhes do produto inclui opções para ver novas imagens, ler sobre a política de devolução, formas de pagamento e segurança.

preview

  • Detalhes do produto (Parte 2)

preview

  • Catálogo de produtos

Esta é a forma como você visualizará o catálogo completo de todos os produtos.

preview


Em produção / sem data prevista para publicação

  • Controle Administrativo do e-commerce
  • Acesso completo ao perfil do usuário

Licença

License