O projeto é uma página web que consiga pesquisar usuários no GitHub e retornar seus repositórios, que também consiga filtrar os repositórios de dado usuário.
Para este projeto foram utilizadas as tecnologias:
HTML 5CSS 3JavaScript (vanilla)FigmaPhotoshopGitHubVsCode
A pesquisa do usuário pode ser realizada pela tecla enter ou pelo botão requer o termo correto e inteiro. Ex.:
input: PurpleWitcher //retorna um resultado válido
input: PurpleWitch //retorna um erro 404
Já o filtro de repositórios não exige o termo inteiro. Ex.:
input: alura //retorna todos os repositórios que contenham "alura" em algum lugar em seu nome
A execução do projeto foi simples, com bastante leitura da API bem documentada e algumas pesquisas em pouco tempo já estava com os retornos esperados, então foi necessário fazer o planejamento da interface, o qual pode ser acessado no Figma, as versões para Desktop e Mobile.
Consegui sem nenhum problema criar as marcações HTML e CSS exatamente como o planejado, para o CSS utilizei da metodologia B.E.M, que consiste em dividir o CSS em diversos arquivos, optei por separar por seções da página e globais afim de manter uma fácil manutenção e legibilidade. Considerei utilizar o bootstrap neste projeto para os grids, mas reconsiderei a necessidade então o fiz utilizando apenas flexBox.
Quanto à lógica utilizada nos scripts, já conseguindo capturar o retono JSON da API, não posso dizer que foi completamente tranquila mas também não enfrentei grandes dificuldades, por exemplo lidar com a paginação, acabei optando por fazer outra pesquisa passando diretamente na requisição a página específca que gostaria de exibir. Também me preocupei com alguns detalhes na melhoria da experiência do usuário, como o focus no input, tratativa para permitir o usuário errar, retorno ao top na paginação... Outro ponto que considero importante quanto ao código foi a separação de pesquisa e filtro, que compartilham apenas o mesmo input de pesquisa. Pois tanto sua paginação, funções de pesquisa e até mesmo estrutura HTML e CSS precisaram ser separados em minha lógica. Mais detalhes quanto ao código podem ser encontrados diretamente no código, que está devidamente documentado.
- ✔️
Versões: Mobile e Desktop; - ✔️
Pesquisa: de usuários e seus repositórios; - ✔️
Exibição de repositórios organizados: por data de criação; - ✔️
Exibição máxima: de 50 repositórios; - ✔️
Paginação: de repositórios e repositórios filtrados; - ✔️
Filtro de repositórios: Pesquisados pelo nome do repositório, a pesquisa pode ser feita utilizando uma cadeia de caracteres que contenha no nome do repositório; - ✔️
Exibição de informações: tanto para o perfil do usuário quanto para os repositórios.