Final Submission: Gitalytics - A simple overview of Github activities
Tags: dohackathon, angular, nest, github
Published: 2021-01-01 16:37:21

---
title: Final Submission: Gitalytics - A simple overview of Github activities
published: true
description: My submission to the DigitalOcean App Platform Hackathon!
tags: dohackathon,angular,nest,github
series: Gitalytics Digital Ocean Hackathon
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/7xp7blt4tc253t6nf5a6.png
---

## What I built

I built an app called ___Gitalytics___, which will show summarized GitHub Activities.

### Category Submission: 

As it doesn’t fit into any other categories, I am submitting this entry in __Random Roulette__ category.

### App Link

Visit it here: <https://gitalytics.shhdharmen.me>

### Screenshots

Home Page (Light theme):

![Home Page (Light theme)](https://dev-to-uploads.s3.amazonaws.com/i/oygeh0za67k4vgav2jfx.png)

Home Page (Dark theme):

![Home Page (Dark theme):](https://dev-to-uploads.s3.amazonaws.com/i/4qdt9t3z8wd1fri4ebrr.png)

 #2020Coded Page (Light theme):

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5i4ahq3qktv5o51ysbt0.png)

 #2020Coded Page (Dark theme):

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/srk1xm2a1gdna94grteg.png)

About Page (Light theme):

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/du5nxcif6ba44l4zh1fz.png)

About Page (Dark theme):

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1wvb4xx11vurzng5cl43.png)

Share Repository Dialog (Light theme):

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uvsc33mdns6kg0qrimc8.png)

Share Pull Requests Dialog (Dark theme):

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t7mgmtx3bipeyyr655f2.png)

User info popover:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xymu1giybi14ltran8oz.png)

### Description

As of now, Gitalytics can get and show following details of 2020 fetched from GitHub:

1. Repositories
2. Star count (from 1st 100 [CreatedRepositoryContribution](https://docs.github.com/en/free-pro-team@latest/graphql/reference/objects#createdrepositorycontribution))
3. Fork count (from 1st 100 [CreatedRepositoryContribution](https://docs.github.com/en/free-pro-team@latest/graphql/reference/objects#createdrepositorycontribution))
4. Commits
5. Issues
6. Closed Issues (from 1st 100 [CreatedIssueContribution](https://docs.github.com/en/free-pro-team@latest/graphql/reference/objects#createdissuecontribution))
7. Pull Requests
8. Merged Pull Requests (from 1st 100 [CreatedPullRequestContribution](https://docs.github.com/en/free-pro-team@latest/graphql/reference/objects#createdpullrequestcontribution))
9. Closed Pull Requests (from 1st 100 [CreatedPullRequestContribution](https://docs.github.com/en/free-pro-team@latest/graphql/reference/objects#createdpullrequestcontribution))
10. Pull Request Reviews
11. Comments and Reactions on Pull Request Reviews (from 1st 100 [CreatedPullRequestReviewContribution](https://docs.github.com/en/free-pro-team@latest/graphql/reference/objects#createdpullrequestreviewcontribution)) 

You can export each data as PNG. And you can also share stats on twitter. I will look like below:

{% twitter 1345014340743618561 %}

### Link to Source Code

Code is available at GitHub:

{% github shhdharmen/gitalytics no-readme %}

### Permissive License

Code is licensed [MIT](https://github.com/shhdharmen/gitalytics/blob/main/LICENSE)

## Background

I got inspired from Spotify Year in Review feature and thought that developers should also see their GitHub Year in Review, a.k.a  __#2020Coded__.

### How I built it

I have created an NX workspace using angular-nest preset. For more on code visit my previous article.

{% link https://dev.to/shhdharmen/gitalytics-basic-structure-done-with-nx-and-deployed-on-digitalocean-app-platform-5a6p %}

While developing this app, I learned following things:

1. GitHub GraphQL API
2. Deployment on DigitalOcean Platform
3. Binding environment variable at build time in Angular, [link](https://medium.com/@ferie/how-to-pass-environment-variables-at-building-time-in-an-angular-application-using-env-files-4ae1a80383c)
4. Setting up CORS in NestJS

---

## Conclusion

This is my first full-stack web app. I am planning to make more such apps in future.

I would like to thank Dev.to and DigitalOcean team for coming up this hackathon and encouraging developers.

Thanks for reading.

Happy Coding

🌲 🌞 😊