A Marvel acaba de te contratar para criar o front-end de sua loja de quadrinhos virtual. Desejam algo moderno, bonito, e que seus usuários não tenham muito problema para efetuar a compra. O layout e a arquitetura é com você, seja criativo!
- Uma listagem paginada das histórias em quadrinhos (HQ's);
- Uma página de visualização individual da HQ;
- Carrinho de compras;
- Checkout para finalização da compra com cartão de crédito ( Não é necessário utilizar API de pagamentos);
- Utilização de ReactJs com Vite e TypeScript;
- Utilizar Typescript corretamente;
- Estilização feita com Styled Components ou Tailwind CSS;
- Utilizar a lib react-hook-form para o formulário de cartão;
- Validação do formulário de cartão com a lib Zod ou Yup;
- Esquema de navegação de rotas com react-router-dom;
- Utilização do gerenciador de estado global Context API;
- Estrutura do código, organização e componentização;
- Que a UI seja autoral do participante, esteticamente bonita e simples de usar;
- Layout responsivo;
- Consumir API da Marvel (https://developer.marvel.com).
- Código confuso e bagunçado;
- Um único commit contendo todas as alterações do projeto. Desejamos ver o histórico da implementação das features;
- Descobrir que o teste não foi feito por você;
- Descobrir que seus componentes são componentes prontos de alguma lib visual.
- Verificaremos se os desafios propostos foram solucionados;
- Avaliaremos a componentização dos itens em tela;
- Organização, semântica, estrutura e legibilidade do código;
- Responsividade;
- Verificaremos também seu README. Portanto, capriche! Conte um pouco de como você pensou os passos da criação do website.
- Testes unitários com Vitest ou E2E com Cypress;
- Exibir o histórico de pedidos realizados (podem ser armazenados no localstorage ou utilizar json-server api);
- Criação de custom hooks;
- Utilizar Conventional Commits Pattern.