Olá! e aí... está preparado para nosso projeto? Ele é bem simples, então não se assuste aposto que você irá tirar de "letra" 😎
- Conhecimentos avançados em CSS, e saiba como utilizar SASS ou LESS para facilitar seu dia a dia;
- Claro o mais obvio 😆, dominio da linguagem Javascript. Você poderá utilizar os recursos que estiver a disposição, mas la vai uma dica! gostamos de ver códigos seus, ver um js puro e ES6 seria demais! então use plugins com moderação, combinado ?
- Entender como funciona os conceitos de usabilidade e acessibilidade, para aplicalos adequadamente;
- Conhecimento claro em desenvolvimento Cross-browser;
- Ter uma ótima orientação sobre semantica, de estilo, de marcação e dos scripts;
- Ahh e também gostamos de ver componentes reutilizaveis 😉
A ideia é simplesmente criar uma lista de produtos que chamaremos de "catalog", onde poderemos escolher a variação de cor e assim possibilitarmos a compra direta para o carrinho de compras! Ou seja, ao clicar em comprar em um produto da lista, deverá levar ao carrinho chamado de "cart", garantindo que o produto não possa ser enviado caso nenhuma variação de cor tenha sido selecionado. Ao mesmo tempo, iremos garantir que a lista de produtos no carrinho não seja perdida, quando navegarmos para o "catalog" novamente. Simples não ?
Leia atentamente os requisitos das páginas pois elas se conversam entre si.
Requisitos Catalog:
- ➡️ Criar 6 celulas de produtos diferentes;
- ➡️ Adicionar foto do produto, com transição de foto secundaria no hover;
- ➡️ Tag de novo produto;
- ➡️ Nome do produto;
- ➡️ Variação de cor ( ex: azul e vermelho);
- ➡️ Preço de, Preço por;
- ➡️ Botão Comprar, ação deve levar para o carrinho;
- ➡️ Apenas abrir carrinho ao clicar em comprar se houver variação selecionada;
Requisitos Cart:
- ➡️ Retornar produto clicado, com sua variação, nome e preço;
- ➡️ Possibilitar a inserção de quantidade e excluir produto da lista;
- ➡️ Incluir Subtotal;
- ➡️ Criar botão continuar comprando, e sua ação de voltar a lista "Catalog" sem perder os produtos adicionados;
- Comprender cycle life e comunicação assincrona;
- React Router;
- Redux ou Flux;
To get started:
- Faça o fork desse projeto;
- Clone o projeto com git;
- Assim que finalizado nos envie declarando as configurações de instalação se preciso, como dependencias e demais itens adicionais;
- Branch utilizada;