Quadro de contribuições do Github

O objetivo foi o desenvolvimento do front-end de uma réplica do quadro de contribuições do Github sem utilização de bibliotecas e os dados a serem consumidos são de um arquivo JSON fornecido.

Funcionalidades   |    Configurações necessárias   |    Clonando o repositório   |    Iniciando a aplicação   |    Realizando os testes   |    Tecnologias | Ferramentas | Recursos   |    Licença

Funcionalidades mapeadas

• Seleção de anos conforme dados do arquivo JSON; ✔️
• Atualização da quantidade de contribuições conforme ano selecionado; ✔️
• Atualização do retorno visual do quadro de contribuições conforme ano selecionado; ❌
• Link para página do Github que explica a contagem de contribuições; ✔️
• Réplica do quadro de contribuições do Github; ❌
• Testes relacionados à página criada. ✔️

✔️ Configurações necessárias

Seguem as configurações neessárias para visualizar a aplicação em sua máquina.

• Git;
• Node;
• Yarn.

🔽 Clonando o repositório

1. Pelo terminal, acesse o diretório em que deseja ter o repositório clonado e execute o comando a seguir.

# clonando o repositório
git clone https://github.com/belapferreira/github-contributions

🔰 Iniciando a aplicação

1. Pelo terminal, acesse a pasta do repositório clonado e execute os comandos abaixo.

# instalando as dependências
yarn install

# iniciando a aplicação
yarn start

🔍 Realizando os testes

1. Foram criados testes para verificar a renderização do HTML da aplicação e também para o elemento que permite a seleção do ano para qual haverá o retorno visual em tela. Para ativar os testes execute o comando abaixo estando na pasta do projeto;

# ativando testes
yarn test

2. Para gerar o Coverage Report execute o comando abaixo no terminal e será criada uma pasta chamada coverage na raiz do projeto. Dentro dessa pasta haverá outra chamada Icov-report que conterá um arquivo index.html. Ao abrir index.html será possível visualizar o relatório de cobertura dos testes da página da aplicação.

# gerando Coverage Report
yarn test --coverage --watchAll false

🔧 Tecnologias | Ferramentas | Recursos

Esse projeto foi desenvolvido utilizando os seguintes recursos:

-  Date FNS; -  Editor Config; -  Eslint; -  Jest; -  Prettier; -  React; -  React Calendar Heatmap; -  React DOM; -  React Icons; -  React Router Dom; -  React Scripts; -  React Test Renderer; -  Styled Components; -  TypeScript.

📝 License

Esse projeto está sob MIT license. Veja LICENSE para mais informações.

---

Feito por Bela Ferreira 💙 Contato: https://www.linkedin.com/in/belapferreira 😊