Front End – Challenge

💻 Sobre o projeto

O projeto tem como objetivo construir uma aplicação usando ReactJS que permite buscar o perfil de usuários na API pública do GitHub e mostrar seus dados em uma página de perfil.

A aplicação utiliza a API do GitHub para ter informações sobre os usuários, como nome de usuário, o nome, biografia, localização, número de seguidores, de quantas pessoas o usuário está seguindo e a quantidade de estrelas.

O objetivo é fornecer uma interface simples para poder pesquisar perfis de desenvolvedores do GitHub.

📱 Tecnologias utilizadas no projeto

📃 Funcionalidades

▪️ Página Home:

A página inicial apresenta um título “Search Devs”, e um campo para que o usuário possa pesquisar ppr um nome de usuário do GitHub e um botão.

▪️ Página Profile:

Quando clica no botão, a aplicação faz uma chamada à API do GitHub e exibe as informações do usuário, como nome, nome de usuário, biografia, quantidade de seguidores, quantidade de pessoas que o usuário está seguindo, quantidade de estrelas e e algumas outras informações, como site pessoal, localidade, empresa e twitter. A página também tem um botão “Voltar” que leva o usuário de volta à página inicial (Home).

E a página apresenta uma seção de repositórios do usuário, exibindo uma lista ordenada de seus repositórios com base na quantidade de estrelas, apresentando o nome do repositório como um link, um resumo do repositório, a quantidade de estrelas que ele tem e a data da última atualização.

O site é responsivo, oferecendo uma boa experiência e de fácil utilização tanto em desktops quanto em dispositivos móveis, como celulares e tablets.

💻Pré-requisitos

Precisamos ter na máquina esses dois (geralmente vem juntos na instalação) pra gerenciar as dependências desse projeto:

Ou pode verificar se já tem na sua máquina:

🟩 Como executar esse projeto

git clone https://github.com/seu-nome-de-usuario/fronteend-challenge.git


cd fronteend-challenge

npm install

npm run dev

✨ Motivação de escolha das libs e framework

Optei por utilizar o React Vite para facilitar o processo de desenvolvimento e construção da aplicação.

Usei React Router para gerenciar a navegação entre as diferentes páginas da aplicação

Usei Styled Components para a estilização dos componentes. O Styled Components nos permite criar estilos reutilizáveis e modularizados.

E para consumir a API do GitHub, utilizei o Axios, que simplifica as chamadas de API e permite lidar com erros de forma eficiente. Além disso, usei a biblioteca Moment.js para formatar a data de criação dos repositórios exibidos na aplicação.

Também usei o Jest para fazer testes da aplicação, garantindo a qualidade e estabilidade do código.

🏢 Estrutura do Projeto

🔹 src/assets/: Nessa pasta temos as imagens que estão sendo usadas no projeto.

🔹 src/components/: Nessa pasta tem todos os componentes utilizados na aplicação.

🔹 src/components/RepositoryInfos/: Esse componente é responsável por mostrar as informações dos repositórios do usuário do GitHub.

🔹 src/components/ProfileInfos/: Esse componente é responsável por mostrar as informações de perfil do usuário do GitHub.

🔹 src/pages/: Nessa pasta temos as páginas da aplicação. Cada página é organizada em sua própria pasta.

🔹 src/pages/Home/: Nessa página tem a tela inicial da aplicação, que permite buscar por usuários do GitHub.

🔹 src/pages/Profile/: Nessa página mostra as informações de um usuário específico do GitHub e seus repositórios.

🔹src/tests/: Nessa pasta contém os testes para cada componente da aplicação.

🔹 src/GlobalStyled.jsx: Nesse arquivo contém os estilos globais da aplicação.

Essa estrutura foi criada para facilitar a manutenção e organização do código. Cada componente e página é separado em sua própria pasta, com seus próprios arquivos de estilo.

💻 Deploy do projeto

https://fronteend-challenge-black.vercel.app/

🟦 Links da API e Documentação

🔹 API de busca de usuários do GitHub: https://api.github.com/users/username

🔹 API de busca de repositórios do usuário pesquisado: https://api.github.com/users/username/repos

🔹Documentação oficial do GitHub: https://docs.github.com/en/rest

Imagens do projeto

📱 Contato

Caso tenha alguma dúvida ou queira entrar em contato comigo, sinta-se à vontade para me enviar um e-mail ou uma mensagem nas redes sociais:
Instagram: https://www.instagram.com/medeiros_eo/

LinkedIn: https://www.linkedin.com/in/endioliveira/

E-mail: eomedeiros21@gmail.com