Fazemos parte do universo digital, focada em criar e desenvolver experiências interativas, integrando planejamento, criatividade e tecnologia. Conheça mais sobre nós em: OW Interactive - Quem somos.
- HTML;
- CSS;
- Javascript (ES6+);
- VueJS;
- Task runners/module bundlers;
- Conhecimentos sobre REST;
- Conhecimentos sobre PWA;
- Conhecimentos de Git.
Faça o download do arquivo PSD ou Figma clique aqui para baixar e após o download terminado siga as etapas listadas abaixo:
Link direto Figma: https://www.figma.com/file/DMHwHWENaL8TxE7M7G59ty/Desafio---Front/duplicate
- Implementar o HTML/CSS/JS do layout .psd contido no arquivo baixado;
- Implementar o banner rotativo da página de listagem de produtos;
- Implementar o layout responsivo.
- Na página de listagem dos produtos, faça:
- Consuma os produtos da API: clique aqui para acessar a API;
- Implementar o campo de pesquisa dos produtos;
- Implementar a funcionalidade de adição de um produto ao carrinho.
- Na página de carrinho, faça:
- A listagem de produtos adicionados ao carrinho e implemente todas as ações referentes ao carrinho (quantidade, remoção, etc.);
- Após a finalização da compra o usuário deverá ir para a página de checkout.
- Na página de checkout, faça:
- Implementar o cadastro do usuário;
- Validar os campos que no design possuem o *;
- Implementar a busca por CEP. Utilizar alguma API disponível online, por exemplo: ViaCEP;
- Ao finalizar o cadastro do usuário exibir um modal de sucesso;
- Documente o seu código.
- Salvar os produtos do carrinho no Local Storage do navegador, para caso, o usuário feche a aba/navegador ele possa retornar com os produtos no carrinho;
- Seguir os requisitos de uma PWA, ex: ser responsivo, instalável, independente de conexão, etc...
- Escrever HTML semântico;
- Utilizar o template do VueJS (.vue);
- Utilizar algum sistema de grid (ex: Bootstrap Grid);
- Utilizar animações de hover;
- Utilizar máscaras e validações no formulário;
- Utilizar o Axios ou Fetch na integração da API;
- Utilizar pré-processador para escrever o CSS (ex: SASS);
- Utilizar algum task runner ou module bundler na compilação/transpilação dos seus assets;
- Atenção: Não utilizar qualquer biblioteca de UI para desenvolver os componentes da página.
- Utilizar o Nuxt ou a Vue CLI no desenvolvimento do projeto;
- Utilizar o ECMA6+ para escrever o JS;
- Utilizar Typescript;
Crie um fork e submeta ao Github o seu desafio. Após isso envie um e-mail para letsrock@owinteractive.com, com o assunto [DESAFIO FRONT-END] com o link para o seu desafio. Obrigado por participar e boa sorte =)