R7.com

Teste Frontend

Esse teste consiste em conhecermos um pouco mais sobre suas skills com HTML, CSS, JavaScript, Código responsivo, suporte a crossbrowser e lógica.

Orientações

Primeiramente, faça o clone do projeto no seu computador. Crie uma branch (pode ser com seu nome mesmo) e depois instale as dependências: > usar essa estrutura inicial é opcional.

npm install

Após isso, rode a aplicação: sh npm start

Depois do setup acima, você deve seguir as seguintes instruções, para construir a aplicação:

1. Desenvolver a página, que tem o seu layout em a-fazenda.psd.(A única fonte usada foi a Montserrat, disponível no Google Fonts)
2. Criar um JavaScript que faça a requisição para /fazenda.json
   • Apresentar os dados requisitados pelo layout.
   • Calcular a porcentagem de "positives" e "negatives".
   • Ordernar os items do json a partir da porcentagem calculada acima.

Pontos de atenção

1. NÃO alterar o arquivo fazenda.json. Em hipótese nenhuma!
2. Não submeta o Pull Request, envie um link do seu repositório para [email protected]

Requisitos obrigatórios

todas as ferramentas citadas abaixo são apenas exemplos, você pode usar a que preferir.

1. Escreva o código da melhor forma possível, utilizando javascript puro ou algum framework: react, angular, vue.
2. Não usar geradores como yeoman, angular-cli, create-react-app.
3. Utilizar CSS componentizado com boas práticas e padrões de arquitetura (OBS: Não utilizar um framework pronto como Bootstrap)
4. Testes, você pode usar jest, cypress.
5. Documentação, nos conte como usar seu projeto em doc/README.md, como rodar os testes, subir a aplicação, etc.
6. Automação de tarefas, você pode usar ferramentas como Gulp, Grunt, Webpack entre outras.
7. Ser fiel ao .psd.
8. O layout deve ser responsivo

O que será avaliado?

• Ordenação dos participantes
• Cálculo dos votos
• Layout responsivo
• Documentação
• Automatizador de tarefas
• Performance
• Organização
• Boas práticas
• ES6
• Testes
• Arquitetura css (BEM, SMACSS, ITCSS, etc)
• Semântica/Acessibilidade/SEO

_{Os dados presentes neste teste são totalmente fictícios.}