/codeby_test_assessment

React - Tailwind - Redux Tool Kit - Flexbox

Primary LanguageJavaScript

Cart Candy - logo

Cart Candy - Os melhores doces você encontra aqui!

About    |     Getting started    |    Techs    |   

Github Stars Commits License

CODEBY - Teste carrinho

Deployed On Vercel

Click on the button below to check it out

Deploy with Vercel

Sobre o projeto

Teste do carrinho da empresa CODEBY

  • Objetivos

    • Desenvolver um “Carrinho de compras” usando uma API
    • Listar os produtos, exibir o total da compra e exibir uma mensagem informando se o pedido possui frete grátis.

  • Requisitos mínimos

    • Listar os produtos provenientes da API.
    • Os produtos devem ter imagem, nome e preço.
    • Exibir ao fim da lista o valor total de todos os produtos.
    • O texto de frete grátis deverá aparecer apenas se o valor for acima de R$ 10,00.
    • Seguir o layout
    • Usar Flex-Box CSS
    • Poderá usar Vanilla JS, React, Vue ou outro framework. Sinta-se a vontade para usar a ferramenta que preferir.

Fui um pouco além

  • Features

    • Home listando os produtos (Fetch da api acima.json)
    • Ao clicar em comprar usuário é direcionado página do produto
    • Escoha a quantidade de produtos em sequida adicione ao carrinho (Add To Cart)
    • Na navbar, quando clicado no ícone do carrinho, se não houver produtos no carrinho uma mensagem aparecerá informando, caso tenha o usuário é direcionado ao meu carrinho com todos os produtos listados e o preço total dos produtos adicionados (Quantidade X Preço). Ao passo que for adicionando, quando esse valor superar $10,00 o texto frete grátis é exibido.
    • Para essa funcionalidade, Redux toolkit foi usado.
    • Outra versão do projeto: Link

  • Responsividade

    • Navbar component
    • Hero component
    • Listagem dos produtos
    • Footer - [Melhorar]
    • Página do produto

O arquivo json o qual foi feito o fetch está alocado no projeto.

CODEBY - Cart Test 🛒 🛒 🛒

Intro

CODEBY - Cart Test

Adicionando ao carrinho - Frete grátis (Caso valor total adicionado seja superior a R$10)

CODEBY - Cart Test

Responsivo

CODEBY - Cart Test

Getting started

  • Clone this repo with git@github.com:eulazzo/testCart.git ;
  • Move to testCart-main folder and run npm install to add dependencies;
  • run npm run start to start the server.

Techs

Front-end
ReactJS
Redux Tool Kit
TailwindCSS
Fetch
React Hooks