Sobre o R7.COM

O R7.com é um portal mantido pela Record TV, com quase 10 anos de vida. Possui mais de 50 milhões de visitantes únicos e média de 200 milhões de pageviews mensalmente 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:

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 apinto@rederecord.com.br

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 um pré-processador CSS de sua preferência.
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.
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

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