eloisaoliveira / frontend-test-github

Teste em níveis para desenvolvedores front-end.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

FCamara 🚀

"Queremos ser como uma árvore, crescer um pouco todos os dias e tentar tocar o céu, sem perder a solidez de nossas raízes." Conheça: www.fcamara.com.br

Teste para vaga de Desenvolvedor Front-end

Desenvolver páginas seguindo um modelo de design e obter dados a partir de uma API.

Tarefas

1. Desenvolva o esqueleto da aplicação

  • Desenvolva o cabeçalho, sidebar e área de conteúdo.
  • Crie a estrutura de abas e faça a navegação entre elas.

2. Implementando pesquisa

  • Implemente o campo de pesquisa para que o usuário busque por um repositório. O dashboard funcionará a partir do repositório pesquisado. Repositórios sugeridos: react, vue.

3. Conectar à API do Github

  • Conecte à API do Github e liste os commits do repositório pesquisado.
  • Listar os commits em uma tabela, dispondo as informações de acordo com o documento.

4. Implementando gráficos na aba Commits

  • Implemente um gráfico de linha que liste a quantidade de commits do repositório ao longo do tempo. Utilize o gráfico Commits Over Time como exemplo.
  • Implemente um gráfico de barra que liste o top 10 de usuários que mais fizeram commits ao longo do tempo. Utilize o gráfico Top 10 Users by Commit como exemplo.

5. Implementando gráficos na aba Pull Requests

  • Desenvolva o gráfico de barras que liste os pull requests e agrupe-os por status (opened, closed e merged).
  • Crie uma tabela que liste todos os pull requests do repositório.

6. Implementando gráficos na aba Issues

  • Desenvolva um gráfico de pizza para listar a porcentagem de issues abertas, fechadas e reabertas.
  • Desenvolva uma tabela para listar todas as issues do repositório.

7. Implementando paginação

  • Implemente a paginação em todos os gráficos desenvolvidos.
  • Implemente a paginação e ordenação em todas as tabelas criadas.

Requisitos

  • Utilizar uma das seguintes bibliotecas CSS: Bulma, Bootstrap ou Materialize.
  • Seguir as definições de design listadas no documento.
  • Utilizar um dos seguintes frameworks de desenvolvimento web: Angular, React ou Vue.js.
  • Utilizar ao menos 3 features do ES6+ e escrever no README o porquê você as utilizou.
  • Utilizar D3.js para o desenvolvimento dos gráficos.

Tarefas bônus

  • Utilizar um pré-compilador CSS (SASS, LESS).
  • Implementar testes unitários.
  • Utilizar uma ferramenta para fazer showcase de componentes isolados (Storybook.js, Styleguidist).
  • Realizar o deploy da sua solução no Heroku ou alguma outra plataforma de hosting.

Submissão

  • Crie um fork do teste para acompanharmos o seu desenvolvimento através dos seus commits.
  • Recomendamos a criação de pull request para cada tarefa, mantendo a master apenas com versões estáveis.

Obrigado!

Agradecemos sua participação no teste. Boa sorte! 😄

About

Teste em níveis para desenvolvedores front-end.