Shop-cart

Descrição do Projeto

⚛️ React

Aplicativo que simula a adição de produtos a um carrinho de compras.

Conteúdo

Objetivo
Descrição
Como utilizar
Status do Projeto
Link do deploy no Vercel
Tecnologias Utilizadas
Autor

Objetivo

Simular a adição de produtos, neste contexto automóveis antigos, a um carrinho de compras. Aplicativo elaborado como parte do curso de formação web full stack da Kenzie Academy Brasil

Descrição

A home page é composta por cards individuais para cada automóvel. Os mesmos são distribuidos em um container específico.

Cada card é composto pelo título, uma imagem representativa, o valor unitário e um botão para adição do automóvel ao carrinho.

Cada item somente pode ser adicionado uma vez ao carrinho.

Ao mover o mouse sobre um card, o mesmo ficará em uma plano superior aos demais.

Presente em todas as páginas está um cabeçalho superior com um link para a home page e outro para o carrinho. No ícone representativo do carrinho um índice verde é mostrado para indicar o número de itens adicionados ao carrinho.

Como utilizar

Home Page

Após examinar o card escolhido clicar no botão de adicionar. Este botão, na home page, mostrará uma estilização em verde representando o status de adição do produto ao carrinho.

Cart Page

Ao acessar o carrinho, através do link presente no cabeçalho, será exibida uma tabela com o valor total e uma listagem contendo o nome e valor dos itens adicionados. Abaixo são mostrados de forma semelhante à home page os cards dos automóveis adicionados. O botão presente nos cards, na página do carrinho, possui agora a função de remover o item do carrinho. O mesmo é estilizado em vermelho, indicando sua função de remoção.

Status do Projeto

Projeto já finalizado e funcional

Link do deploy com o aplicativo funcional

Shop-cart

🛠 Tecnologias

• React
• JavaScript
• Styled Components
• Redux
• Redux Thunk
• React Router Dom

Autor

🚀 Roberto Bressanelli