Os requisitos desse projeto não são especificos de nenhuma linguagem nem framework, as integrações podem acontecer tanto no frontend quanto no backend. O foco principal é na usabilidade do projeto pelo usuário. A base da aplicação é baseada em 3 etapas:
- a busca de um perfil na api do github;
- a listagem dos resultados da busca;
- a visualização desse perfil;
Na primeira etapa, é necessário receber o nickname do usuário e usar isso pra buscar na api do github a lista de perfis que são encontradas pelo github. Caso seja uma aplicação focada em frontend é interessante lidar com o loading, em todo caso é ideal conseguir manter o estado da busca na url dessa forma é possível salvar buscas anteriores pela url.
Por exemplo:
https://alguma-url.com/search?query=[Busca-feita-pelo-usuário]
Na segunda etapa precisamos obter o resultado da busca e listar os resultados, mas cada busca na api tem um número limitado de resultados, então é obrigatorio ter algum nivel de paginação para gerenciar essa busca. Essa paginação pode ser feita tanto em componentes frontend quanto em uma rota no backend. Para conseguir ser encaminhado para a proxima etapa essa listagem deve disponibilizar um meio para que o usuario navegue para a ultima etapa.
Na terceira etapa é necessario usar o id do perfil encontrado na segunda etapa para buscar os dados especificos de um unico usuario, alguns dados basicos deves ser mostrados nessa etapa como nome, nickname, link do github e quantidade de seguidores. Alguns dos dados renderizados são opcionais e nem todo perfil retorna eles.
O projeto envolve uma integração com o serviço de api do github para buscar todas as informações:
Tenho um projeto de referencia feito (mas incompleto) em react e rescript:
A descrição de cada etapa só mostra o funcionamento basico do projeto sem especificar nenhuma ferramenta ou conceito obrigatorio. Algumas sugestões de funcionalidades são feitas mas não são obrigatórias tambem.
Sugestões de conceitos pra turbinar o projeto:
- Frontend responsivo;
- Componentes com estilização reutilizaveis (idealmente algo como atomic design);
- Primeira etapa implementada usando mecanismo de debounce ou throttle e sem necessidade de um evento ativo do usuario;
- Scroll infinito na segunda etapa para evitar paginação;
- Abstrair e centraliza lógica e estado da busca na primeira etapa em um contexto próprio;
- Navegação fluida mantendo estado entre telas (a sugestão de manter estado na url resolve isso);
- Type safety atraves de typescript ou variações;
- Testes automatizados de integração, unitarios e de snapshot;
- Consumo da api do github usando graphql;
- etc...
Extreme go horse e php não são tolerados, sujeito a ban da mentoria!
poxa...
