About Frontend mission (testing, checklist, ...)

No description available

Esta é uma missão inicial para teste de suas habilidades Jedi com React Armas necessárias na missão O projeto deve ser desenvolvido em React, e utilizar Context administrar o estado do carrinho de compras e ser criado com create-react-app. O Front-End deve utilizar Material UI: https://material-ui-next.com/ Os formulários deve utilizar o Formik: https://jaredpalmer.com/formik/ Os produtos disponíveis devem ser recuperados através de um mock de API Rest que já existe neste projeto. Você pode iniciar a api com npm run api A missão Carrinho de Compras Seu objetivo é montar um carrinho de compras simples, conforme o prototipo a seguir: O layout deve ser como de um site de vendas convencional, com uma listagem de produtos, e um icone de carrinho de compras no topo do site. O icone do carrinho de compras deve exibir uma badge com a quantidade de itens presente no carrinho. A tela de listagem de produtos deve: Listar produtos Ao entrar no projeto, deve exibir os produtos na listagem com foto, titulo e preço formatado em reais; Ao clicar no produto da lista, deve exibir os detalhes de um produto individual; Permitir comprar Ao clicar em comprar, e o produto não estiver no carrinho, deve ser adicionado; Ao clicar em comprar, e o produto ja existir no carrinho, deve ser incrementado em 1; Exibir resumo do carrinho Exibir no icone do carrinho uma badge com quantidade de itens; Exibir ao lado do icone, o valor total da compra; O carrinho deve: Permitir remover itens; Ao remover, liberar o estoque do produto; Permitir alterar a quantidade de um item; Ao clicar em aumentar, deve incrementar em 1; Ao clicar em diminuir, deve decrementar em 1; Ao incrementar, deve validar se o produto ainda possui estoque; Ao decrementar, deve liberar o estoque do produto; Não deve permitir o usuário informar quantidade zero; Exibir o somatório total dos itens incluidos; A finalização do pedido deve: Ter um formulário de finalização com os seguintes campos e validação: Nome Email CPF Endereço Cep Rua Bairro Número Serviço Rest

No description available

No description available

Red Line, Phase 0: "guerrilla" repository : filrouge-0-guerrilla team : false duration : six hours note to coach: create a Google Form for the project handover. Scenario You work in the E-Marketing department of a local web agency. The PM ("Project Manager") comes rushing into your office while you were quietly sipping your Cinnamon coffee, browsing your Twitter account. "We have an emergency : only you can save us !" You reply : "Me? Why me ?" The PM: "Because Luìs is sick, Marie-Ange was debauched by Emakina, and I don't understand anything about the web: I'm just a PM, after all! But hey, listen: the customer is a good client. We don't want to disappoint them. The problem is that they have a very important event tomorrow and they just realized that their digital presence is crap. Do what you can to improve this so that by tomorrow they have a one-pager that is better than what they have today." You: "All right, all right. I'll take care of it. Anyway, I was bored." Your Mission Your coach assigns you to a project. Create and deploy before 4PM a one-pager that looks and communicate better than their current site, and is responsive. The only possible way is to use and tweak a template (pick one here : html5up.net). The specifics Hosting via a GitHub Page Use the content on their existing website to create a better one. If they don't have one, gather content based on what you can find on the web. Mac Gyver style. You don't have to use all of their content, summarize it by focusing on what's really important to understand who they are, and what they do. Pick a template on html5up.net Tweak the template to adapt it to the content Once published, you are not done. Use the Lighthouse Test and improve the score as much as you can for each category. Finished? Send your work to the coachs using this form . Learning objectives Find out how to quickly build a one-page website using pre-existing templates. Guerilla style. Discover and use the Lighthouse Test and the W3C Validator, great tools to improve your coding knowledge and your frontend skills Put your new skills to use in a real-life scenario Get used to the notion of satisficing as an alternative to perfectionism. Good luck, soldier.