Projeto Front-end Web - E-commerce 🛒🛍️

Exercício de seleção 4all - carrinho de compras

Gif:

---

Indice

• 🚀 [Sobre o Projeto]
• 👨‍💻️ [Tecnogias utilizadas]
• 📦️ [Como utilizar o projeto]
• 🤔️ [Como contribuir]

---

Principais tecnologias utilizadas:

1. ReactJS
2. Estilização com CSS e styled-components
3. Uso de bibliotecas de UI (MaterialUI)
4. Aplicações com múltiplas rotas utilizando React Router

---

IDE

• Visual Studio Code

Escopo do projeto

O Objetivo era criar uma plataforma de ecommerce simples com duas telas;

Na primeira tela :

• Lista de produtos
• Botão para adicionar o produto ao carrinho
• Select que irá filtrar os produtos por categorias

No header

• Quantidade de produtos que estão no carrinho.

Na segunda tela:

• carrinho de compras
• lista de produtos que o cliente selecionou
• Quantidade e valor total de produtos

Regras: Ao zerar a quantidade de um produto ele é removido da lista. A quantidade de um produto pode ser incrementada infinitamente. Após remover o último produto do carrinho irá aparecer uma confirmação para sair da tela do carrinho e voltar a primeira tela. Ao finalizar a compra irá aparecer um modal informando o usuário que a compra foi realizada com sucesso.

---

Como rodar a aplicação

Para copiar o projeto, utilize os comandos:

  # Clonar o repositório
  ❯ git clone https://github.com/TatianaFischer/ecommerce4all.git

  # Entrar no diretório
  ❯ cd ecommerce4all

Para instalar as dependências e iniciar o projeto, você pode utilizar o Yarn ou NPM:

Utilizando yarn

  # Instalar as dependências
  ❯ yarn

  # Iniciar o projeto
  ❯ yarn dev:server

Utilizando npm

PS: Caso utilize o NPM, apague o arquivo yarn.lock para ter todas as dependências instaladas da melhor forma.

  # Instalar as dependências
  ❯ npm install

  # Iniciar o projeto
  ❯ npm start

---

Contribuição

Contribuições com o projeto são muito apreciadas. Para isso:

• Faça um Fork do projeto

• Crie uma branch para sua feature

git checkout -b feature

• Adicione as mudanças

git add .

• Commit as mudanças

git commit -m 'Adicionando a feature X'

• Faça o push da branch

git push origin feature

• Abra um Pull Request

🚀 Projeto no ar

Deploy

Feito por Tatiana Fischer 💛