🎯 Plataforma para acesso aos dados de perfis de usuários do Github.

Overview

🎯 Github Profile

🚀 Desafio Front End | Compass.UOL

License

Tecnologias   |    Projeto   |    Como rodar   |    Licença


demo.mp4

🚀 Tecnologias

Next.js  React  React Query  TypeScript  SASS  Github API  Heroku 

💻 Projeto

Esse projeto é uma plataforma para acesso aos dados de perfis de usuários do Github. O usuário pode fazer login com sua conta do Github, pesquisar por um usuário especifico, listar os seus repositórios e listar seus repositórios favoritos.

Esse é um desafio técnico para a vaga de Front End Developer na Compass UOL.

🔥 Demo: https://profile-git.herokuapp.com/

🚀 Checklist

  • Login com Github;
  • Pesquisa por usuários;
  • Listar repositórios de um usuário;
  • Listar repositórios favoritos de um usuário;
  • Cache de dados;
  • Loading screen;
  • Implemetar a metodologia BEM CSS;
  • Melhorar resposividade da Dashboard (Tablet e Mobile);
  • Subistituir o loading por Skeleton para melhorar o UX;
  • Testes unitários;
  • Testes de integração;
  • Deploy;

🔧 Como rodar

É necessário ter instalado:

🗂 Faça um clone do projeto

git clone https://github.com/goncadanilo/github-profile.git

📥 Instale as dependências

# Acesse o diretório do projeto
cd github-profile

# Instale as dependências
yarn

⚙️ Defina as variáveis de ambiente

Será necessário definir as seguintes variáveis de ambiente:

GITHUB_APP_CLIENT_ID=<github-client-id>
GITHUB_APP_CLIENT_SECRET=<github-client-id>

Para saber como gerar essas variáveis de ambiente, acesse o link abaixo:

https://docs.github.com/pt/developers/apps/building-oauth-apps

💡 OBS: Quando for criar o OAuth App no github, defina o callback como: http://localhost:3000/api/auth/ para executar o projeto em ambiente local.

Inicie a aplicação

yarn dev

📝 Licença

Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.


Feito com by Danilo Gonçalves. Me adicione no LinkedIn 👋

You might also like...

Seguir e deixar de seguir automaticamente usuários do GitHub

(PT-BR) Script para seguir ou deixar de seguir usuários da página atual do GitHub. Como usar: Para começar a utilizar, você precisa baixar o Tampermon

Sep 17, 2022

Aplicação que permite a busca por nome de usuários do Github e mostra seus repositórios.

Aplicação que permite a busca por nome de usuários do Github e mostra seus repositórios.

Github User Finder Aplicação que permite a busca por nome de usuários do Github e mostra seus repositórios. 💻 Acesse a aplicação aqui 🎨 Layout por A

Apr 30, 2022

Plataforma del Registro de Autoexclusión del Juego

Plataforma del Registro de Autoexclusión del Juego

WebApp boilerplate with React JS and Flask API Styles You can update the styles/index.scss or create new .scss files inside styles/ and import them in

Feb 4, 2022

Simple Notes é um projeto de uma plataforma de anotações

Resumo Simple Notes é um projeto de uma plataforma de anotações. O grande diferencial é que as anotações são públicas e os usuários podem anotar histó

Feb 8, 2022

API em NodeJS, utilizando banco de dados MongoDB (TypeORM), com cobertura de testes (coverages), utilizando o Jest

API em NodeJS, utilizando banco de dados MongoDB (TypeORM), com cobertura de testes (coverages), utilizando o Jest

Api Backend Tindin Sobre API em NodeJS, utilizando banco de dados MongoDB (TypeORM), com cobertura de testes (coverages), utilizando o Jest. 👉 app ur

Jan 20, 2022

Um app com salas de bate papo aonde os usuários serão "cachorros"

🐶 DOG TALK 💬 Um app com salas de bate-papo aonde os usuários serão "cachorros"... 🎯 Objetivo deste projeto Aplicar areas distintas em desenvolvimen

Apr 13, 2022

👤 Aplicação de registro de usuários. Desenvolvido com Next.js, Sass, TypeScript, Node.js e Docker.

 👤 Aplicação de registro de usuários. Desenvolvido com Next.js, Sass, TypeScript, Node.js e Docker.

👤 Registrado Aplicação de registro de usuários capaz de criar, ler, atualizar e deletar usuários do banco de dados (CRUD). O projeto é dividido em Fr

Oct 25, 2022

Dar follow em um lista de usuários a partir de um perfil :milky_way:

Follow-Github Dar follow em um lista de usuários a partir de um perfil OBS: 'follow_users_v2' para funcionar corretamente, é recomendado usar o DevToo

Jul 6, 2022

Extensión para crear el icono y cover de un curso en Platzi para organizar la toma de apuntes en Notion

Extensión para crear el icono y cover de un curso en Platzi para organizar la toma de apuntes en Notion

💚 Platzi Cover Extensión para extraer el icono y cover de un curso en Platzi para organizar la toma de apuntes en Notion 📦 Instalación Descargar el

Nov 15, 2021
Owner
Danilo Gonçalves
Desenvolvedor Full Stack apaixonado por tecnologia 🚀
Danilo Gonçalves
O projeto ig.news é um blog onde os usuários podem ter acesso ao conteúdo de cada postagem de acordo com o status de sua assinatura.

IGNEWS - Portal de notícias ?? ?? Sobre | Demo | Tecnologias | Requerimentos | Começando ?? Sobre O projeto ig.news é um blog onde os usuários podem t

Gabriel Castro 5 Sep 28, 2022
Criação, leitura, atualização e exclusão de usuários em uma plataforma

Teste Prático - Desenvolvedor Full Stack Pleno Tabela de Conteúdo Sobre o Projeto Feito Com Iniciando o Projeto Pre-Requisitos Instalação via Docker I

Murilo Maia 6 Apr 11, 2022
Back-end desenvolvido com NodeJS, TypeScript, Prisma e Express para prover dados para as aplicações em desenvolvimento.plicações do evento NLW eSports.

NLW eSports Back-End Aplicação back-end para surprir as necessidades de dados das demais plataformas desenvolvidas que são citadas mais abaixo. Este s

Felippe Rian 2 Sep 17, 2022
A AfirmaJobs é uma plataforma de divulgação de vagas voltadas para a diversidade e inclusão. A aplicação foi desenvolvida como projeto final do curso bootcamp da Reprograma

AFIRMAJOBS Este projeto é resultado do Bootcamp Back-End - Todas em Tech - { reprograma } Justificativa Grupos historicamente minorizados – população

Geankre Souza 7 Dec 13, 2022
Projeto individual, um site para cobertura de partidas de vôlei, times onde você pode saber onde, quando acontecerá as partidas, e dados sobre os times.

?? Volleyball Esports Coverage Um portal de vôlei para as pessoas se conectarem ou divulgarem suas partidas, conhecimentos e uma maneira de conhecerem

PedroJsn 4 Jun 6, 2022
API desenvolvida em NodeJs sem o uso de framewors e, utilizando o google planilhas para armazenamento de dados

NodeJS + Google SpreadSheet Catálogo online de produtos ??️ O Projeto Desenvolver uma API de busca de informações como preço médio, marca e categoria,

Arthur Couto 10 Jul 14, 2022
Projeto de código aberto para ajudar as pessoas a ingressarem em carreiras de dados

Bem vinde O que é o Data Career Guide? É um projeto gratuito de guia (não é um curso e nem um livro) para carreiras na área de dados, inspirado no Lea

Data Career Guide 6 Dec 30, 2022
Uma Intranet que permite um acesso restrito e promove a integração dos processos de uma empresa, facilitando o dia-a-dia dos seus colaboradores.

Intranet ANÁLISE E DESENVOLVIMENTO DE SISTEMAS PROJETO: DESENVOLVIMENTO WEB FRONT-END 1 SEMESTRE Uma Intranet que permite um acesso restrito e promove

Análise e Desenvolvimento de Sistemas - PUC Minas Virtual 5 Jun 1, 2022
Uma aplicação criada com react-native para armazenar as skills dos usuários cadastrados.

SkillsClass Aplicação focada no gerenciamento de skills dos usuários cadastrados. Uma aplicação desenvolvida no ignite da Rocketseat com alguns toques

Carlos Ferreira 1 Dec 25, 2021
Um website completo desenvolvido com Next SSR, Typescript, Prismic CMS do tipo blog com diversas funcionalidades para interações entre os usuários.

Título: Spacetraveling Descrição: Um website completo desenvolvido com Next SSR, Typescript, Prismic CMS do tipo blog com diversas funcionalidades par

Guilherme Augusto de Almeida Amaral 8 Dec 21, 2022