Sobre o R7.COM

O R7.com é um portal de notícias mantido pela Record TV, com quase 10 anos de vida. Possui mensalmente mais de 50 milhões de visitantes únicos e média de 200 milhões de pageviews e conta coma uma equipe de quase 300 pessoas.

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:

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. Se for preciso modificar a estrutura e workflow, atualizar o README.
3. Não submeta o Pull Request, envie um link do seu repositório para [email protected] :D

Requisitos obrigatórios

1. Escreva o código de preferencia em javascript puro, mas você também pode usar react, angular, vue, ou outro framework.
2. Não usar geradores como yeoman, angular-cli, create-react-app, etc.
3. Utilizar um pré-processador CSS de sua preferência.
4. Testes. Você pode usar jest, cypress, etc..
5. Documentação, remova todo o conteúdo deste README e nos conte como usar seu projeto, rodar os testes, subir a aplicação, etc.
6. Automação de tarefas, você pode usar ferramentas como Gulp, Grunt, Webpack, etc.
7. Ser fiel ao .psd.
8. Crossbrowser, sua aplicação deve funcionar nos principais navegadores (IE11+, Firefox, Safari, Chrome).
9. O layout deve ser responsivo

Requisitos extras

1. Acessibilidade
2. SEO
3. Performance

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
• Pré-processador css
• Arquitetura css (BEM, SMACSS, ITCSS, etc)
• Semântica/Acessibilidade/SEO

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