Desafio FrontEnd - OW Interactive

Sobre a OW Interactive

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.

Pré-requisitos

• HTML;
• CSS;
• Javascript (ES6+);
• VueJS;
• Task runners/module bundlers;
• Conhecimentos sobre REST;
• Conhecimentos sobre PWA;
• Conhecimentos de Git.

Desafio

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

Etapa 1

• 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.

Etapa 2

• 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.

Etapa 3

• 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.

Etapa 4

• 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...

Regras

• 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.

Diferenciais

• Utilizar o Nuxt ou a Vue CLI no desenvolvimento do projeto;
• Utilizar o ECMA6+ para escrever o JS;
• Utilizar Typescript;

Conclusão

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 =)