https://github.com/jveiiga/api-github-avanti
Projeto by innovation class
https://github.com/jveiiga/api-github-avanti
css3 react vite
Last synced: about 2 months ago
JSON representation
Projeto by innovation class
- Host: GitHub
- URL: https://github.com/jveiiga/api-github-avanti
- Owner: jveiiga
- Created: 2025-04-24T03:04:38.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2025-04-24T03:22:44.000Z (about 2 months ago)
- Last Synced: 2025-04-27T00:53:09.853Z (about 2 months ago)
- Topics: css3, react, vite
- Language: JavaScript
- Homepage: https://jveiiga.github.io/api-github-avanti/
- Size: 375 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# š Projeto 02 - Busca de Perfil no GitHub
Este Ć© um projeto React que permite buscar e visualizar informaƧƵes de perfis pĆŗblicos do GitHub. O aplicativo consome a API do GitHub para exibir dados como nome, foto de perfil e bio do usuĆ”rio, seguindo o design proposto no Figma.
---
## š Objetivo
O desafio consiste em desenvolver uma aplicaĆ§Ć£o React que permita buscar perfis do GitHub e exibir informaƧƵes do usuĆ”rio conforme o layout fornecido.
---
## š Link do Layout no Figma
Acesse o layout do projeto no Figma clicando no link abaixo:
[Layout no Figma](https://www.figma.com/proto/DqtFxC6312M32mLt8FpJjq/inovation-class?page-id=22%3A2864&node-id=22-4293&viewport=359%2C115%2C0.25&t=SHsEqEgaMrXGMKwv-1&scaling=scale-down-width&content-scaling=fixed&starting-point-node-id=22%3A4293&show-proto-sidebar=1)
---
## šÆ Funcionalidades
- **Campo de Busca**: O usuƔrio digita o nome de um perfil do GitHub para buscar informaƧƵes.
- **ExibiĆ§Ć£o de Dados**: Mostra o nome, foto de perfil e bio do usuĆ”rio.
- **Mensagens de Erro**: Exibe mensagens apropriadas caso o perfil nĆ£o seja encontrado.
- **Design Personalizado**: Interface estilizada conforme o layout do Figma.
- **ExperiĆŖncia do UsuĆ”rio (opcional)**: Melhorias como spinner de carregamento e efeitos visuais.
---
## ā
Requisitos para o Desenvolvimento
1. Criar um campo de busca para o usuƔrio digitar o nome de um perfil do GitHub.
2. Consumir a API do GitHub e exibir os seguintes dados do usuƔrio:
- Nome do usuƔrio.
- Foto de perfil.
- Bio.
3. Exibir mensagens de erro caso o perfil nĆ£o seja encontrado.
4. Estilizar a aplicaĆ§Ć£o conforme o design do Figma.
- Ć permitido o uso de frameworks CSS como **Bootstrap**, **TailwindCSS** ou outros.
5. (Opcional) Melhorar a experiĆŖncia do usuĆ”rio com:
- Efeitos visuais.
- Indicador de carregamento durante a requisiĆ§Ć£o.
---
## š Tecnologias Utilizadas
- **React**: Biblioteca principal para construĆ§Ć£o da interface.
- **CSS/TailwindCSS (opcional)**: EstilizaĆ§Ć£o personalizada para a interface.
- **API do GitHub**: Fonte de dados do projeto.
---
## š Estrutura do Projeto
```
src/
āāā assets/
ā āāā images/ # Imagens utilizadas no projeto
āāā components/
ā āāā Loading.jsx # Componente de carregamento (opcional)
ā āāā ProfileCard.jsx # Componente para exibir informaƧƵes do perfil
āāā App.jsx # Componente principal da aplicaĆ§Ć£o
āāā App.css # Estilos globais
āāā index.js # Ponto de entrada do React
```
---
## š§ Como Executar o Projeto
### PrƩ-requisitos
- Node.js instalado
- Gerenciador de pacotes (npm ou yarn)
### Passos
1. **Clone este repositĆ³rio**:
```bash
git clone https://github.com/jveiiga/api-github-avanti.git
cd api-github-avanti
```
2. **Instale as dependĆŖncias**:
```bash
npm install
```
3. **Execute o servidor de desenvolvimento**:
```bash
npm run dev
```
4. **Abra o navegador** e acesse:
```
http://localhost:5173
```
---
## š Tratamento de Erros
- **UsuĆ”rio nĆ£o encontrado**: Exibe uma mensagem amigĆ”vel caso o nome de usuĆ”rio nĆ£o exista.
- **Limite de requisiƧƵes excedido**: Caso a API do GitHub retorne um erro 403, sugere ao usuƔrio tentar novamente mais tarde.
---
## š§ Contato
Feito com š» por [Jeferson Veiga](https://github.com/jveiiga).
**Email:** [email protected]