LabeCommerce

Clique aqui para conferir o resultado final!

Status do Projeto:
Concluído ✔

Tecnologias e Ferramentas utilizadas:

Índice

• 1. Resumo do Projeto
• 2. Definição de Produto
• 3. Instalação
• 4. Iniciando
• 5. Tecnologias Utilizadas
• 6. Lista de Requisitos do Projeto
• 7. Desenvolvedora

---

1. Resumo do Projeto

O Labecommerce é um e-commerce com recursos avançados que permite aos usuários ordenar, pesquisar e filtrar produtos de forma intuitiva. Ele também oferece um carrinho de compras completo, com resumo da compra, opção de limpar o carrinho e ajustar as quantidades. Além disso, o Labecommerce possui organização em páginas e a capacidade de ocultar o carrinho para visualizar mais produtos.

---

2. Definição de Produto

O Labecommerce oferece diversas funcionalidades aos usuários:

• Ordenação dos produtos por preço em duas opções:

  • Ordem crescente
  • Ordem decrescente

• Pesquisa de produtos por nome, considerando letras minúsculas ou maiúsculas.

• Filtragem por valores com dois tipos de filtros:

  • Valor mínimo
  • Valor máximo

• Todos os filtros podem ser usados simultaneamente.

• Para maior comodidade do usuário, há um botão "Limpar" que restaura a busca padrão na tela.

• O usuário também pode ocultar o carrinho para visualizar mais produtos na tela.

• No carrinho, é possível ver um resumo da compra, incluindo a quantidade de itens e o valor total. O usuário pode limpar o carrinho com um único clique no ícone da lixeira. Além disso, no carrinho, existem botões que permitem aumentar ou diminuir a quantidade de um item. O usuário também pode excluir um produto completamente, independentemente da quantidade, clicando no ícone da lixeira correspondente ao produto.

• O carrinho também possui uma facilidade adicional para o usuário: um botão para voltar ao topo da lista quando o usuário rola a tela para visualizar os itens no final.

• Outra facilidade oferecida é a organização dos produtos em páginas, permitindo ao usuário selecionar a página desejada com apenas um clique. Existem dois tipos de visualizações de página disponíveis:

  • Com o carrinho aberto, o usuário pode visualizar até 10 produtos.
  • Com o carrinho fechado, o usuário pode visualizar até 12 produtos.

• Os itens do carrinho permanecem no carrinho mesmo após a atualização da página.

• O Labecommerce é um site responsivo que se adapta a diferentes dispositivos, incluindo desktop, tablet e celulares. A interface do usuário foi projetada para garantir uma experiência de uso adequada em todas as resoluções de tela. Independentemente do dispositivo utilizado, os usuários poderão acessar e utilizar todas as funcionalidades do Labecommerce, como visualizar a lista de produtos, adicionar itens ao carrinho, aplicar filtros e realizar buscas.

---

3. Instalação

Pré-requisitos:

• Node.js
• npm

Para instalar as dependências no diretório do seu projeto, execute o seguinte comando:

npm install

---

4. Iniciando

Para iniciar o aplicativo, execute o seguinte comando:

npm run start

---

5. Tecnologias Utilizadas

Este site foi construído com as seguintes tecnologias:

• JavaScript
• React
• Styled-Components

---

6. Lista de Requisitos do Projeto

• Home
  • [ ✔ ] O usuário deve ser capaz de visualizar uma lista de produtos
  • [ ✔ ] O usuário deve ser capaz de visualizar os dados do produto (nome, preço e imagem)
  • [ ✔ ] O usuário deve ser capaz de adicionar um produto no carrinho
• Carrinho
  • [ ✔ ] O usuário deve ser capaz de visualizar os produtos adicionados
  • [ ✔ ] O usuário deve ser capaz de visualizar a quantidade correta de cada produto
  • [ ✔ ] O usuário deve ser capaz de remover itens do carrinho
  • [ ✔ ] O usuário deve ser capaz de ver corretamente o valor total de sua compra
  • [ ✔ ] Quando a página é atualizada, os itens devem continuar no carrinho
• Filtros e Ordenação
  • [ ✔ ] O usuário deve ser capaz de filtrar os itens por preço mínimo
  • [ ✔ ] O usuário deve ser capaz de filtrar os itens por preço máximo
  • [ ✔ ] O usuário deve ser capaz de realizar uma busca por nome
  • [ ✔ ] O usuário deve ser capaz de ordenar os itens em ordem crescente ou decrescente
  • [ ✔ ] O usuário deve ser capaz de adicionar filtros, busca e ordenação simultaneamente
  • [ ✔ ] O usuário deve ser capaz de retornar à visualização sem filtros

7. Desenvolvedora

Este projeto foi desenvolvido por:

Amanda Polari: LinkedIn | GitHub