Diamond é uma Agência de Creative Technology que cria produtos inovadores e experiências digitais inspiradoras através de tecnologia. Somos especializados em elaborar soluções digitais, combinando os nossos conhecimentos em: Tecnologia e Inovação (VR/AR/Gaming, Web, Desenvolvimento Web, Microsoft e Frontend, e Soluções Mobile) e Criatividade & Marketing (UX/UI Design e Marketing Digital).

Sobre o desafio

Este é um teste bem simples, no qual deverá ser capaz de escrever um Vue/React/Angular/Svelte/Vanilla app, usando o layout fornecido como referência. Vai precisar fazer requests a uma API para obter algum conteúdo JSON, filtrar os dados e imprimi-los na página.

Pode usar qualquer boilerplate/abordagem que preferir, mas tente mantê-lo simples. Encorajamos a usar as suas ferramentas e pacotes favoritos para criar uma app que seja sólida.

A app deve ser uma pesquisa de filmes com duas páginas:

• Home page: com um campo de pesquisa e uma lista com os resultados;

Pense num estado vazio, estado de carregamento e o estado de nenhum resultado encontrado

• Movie page: página de detalhes do filme;

Pense num estado de carregamento e o estado de nenhum resultado encontrado

O objetivo deste desafio é avaliar as suas habilidades em HTML, CSS, Javascript e Vue/React/Angular/Svelte/Vanilla, API e abordagem geral ao compor uma app Web simples, com um conjunto de páginas e um feed de API. Também vamos avaliar o resultado final do código HTML, CSS e JS.

Primeiros passos

1. Faça um fork deste repositório para a sua conta pessoal;
2. Crie um branch com o seu nome;
3. Resolva o desafio da melhor maneira possível;

Envie-nos seu código de duas maneiras.

1. Envie-nos um PR (Pull Request);
2. Envie-nos um email com seu código num zip para: [email protected] com o título [Frontend - Test] - @Seu-Nome

Dicas/Sugestões

• Escreva um bom README com informações básicas (por exemplo: como iniciar o projeto e como fazer o build do mesmo);
• Não há layouts pensados para a versão mobile, mas se criar uma app responsiva, será uma grande vantagem. Nós gostaríamos de ver suas habilidades de UI/UX também!
• Sinta-se à vontade para trabalhar e melhorar os designs disponíveis. Pense neles como diretrizes.
• Há um botão "curtir" na página de detalhes. Seria ótimo se essa informação fosse persistente!
• Prefira usar uma metodologia css, como BEM, ITCSS, etc;
• Fazer perguntas é bom. Nós não vamos penalizar ninguém por fazer perguntas;
• Às vezes, o servidor da API é lento, então pense em carregar e esvaziar os estados em toda a sua app;
• Estamos à procura de sinais de que entende conceitos como eventos, promessas e reactividade, e como esses conceitos são implementados em Javascript;
• O uso de testes unitários será valorizado, mas não um factor eliminatório;
• O histórico do git será muito valorizado;
• O código será avaliado por: semântica, estrutura, legibilidade, tamanho, elegância (entre outros factores);

Informações necessárias

API:

Sugerimos que utitilize OMDb API, embora possa usar qualquer outra API que preferir.

Protótipo / Guia de estilos:

Veja dentro da pasta /layout, lá encontrará tudo o que precisa.

• Protótipo
• Guia de estilos

Contato ou dúvidas

Use as issues ou envie-nos um email: [email protected]

Good luck 🍀