Sobre o R7.COM

O R7.com, portal do Grupo Record de Comunicação acumula 1 bilhão de páginas vistas mensalmente e tem mais de 76 milhões de visitantes únicos por mês. São mais de 600 milhões de vídeo views e 84 milhões de engajamento nas redes. Com mais de 40 colunistas, o portal R7 tem uma força muito grande no ambiente mobile: 67 milhões de seus visitantes únicos utilizam dispositivos móveis para acessar o portal.

O ambiente digital da Record conta muita interação. São 43 milhões de inscritos no YouTube; 63 milhões no Facebook; 25 milhões no Instagram e mais de 26 Milhões no Twitter.

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:

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