I created Gitalytics - A simple overview of Github activities

I created Gitalytics - A simple overview of Github activities

Subscribe to my newsletter and never miss my upcoming articles

Gitalytics

A simple overview of your github activities https://gitalytics.shhdharmen.me

gitalytics banner.png


Table of Contents

About

What is this?

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

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.

What does it show?

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

  1. Repositories
  2. Star count (from 1st 100 CreatedRepositoryContribution)
  3. Fork count (from 1st 100 CreatedRepositoryContribution)
  4. Commits
  5. Issues
  6. Closed Issues (from 1st 100 CreatedIssueContribution)
  7. Pull Requests
  8. Merged Pull Requests (from 1st 100 CreatedPullRequestContribution)
  9. Closed Pull Requests (from 1st 100 CreatedPullRequestContribution)
  10. Pull Request Reviews
  11. Comments and Reactions on Pull Request Reviews (from 1st 100 CreatedPullRequestReviewContribution)

How does it look?

Home Page (Light theme):

Home Page (Light theme)

Home Page (Dark theme):

Home Page (Dark theme):

#2020Coded Page (Light theme):

Alt Text

#2020Coded Page (Dark theme):

Alt Text

About Page (Light theme):

Alt Text

About Page (Dark theme):

Alt Text

Share Repository Dialog (Light theme):

Alt Text

Share Pull Requests Dialog (Dark theme):

Alt Text

User info popover:

Alt Text

Export

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

Twitter Handle

I have also created a bot on twitter @gitalytics_app. It's job is to retweet #2020Coded.

twitter profile


Development

I created an NX workspace with angular-nest preset. There are 3 apps in this workspace:

  1. API (NestJS)
  2. Client (Angular)
  3. Twitter Bot (NodeJS)

Few things about codebase:

  1. I have used GitHub GraphQL APIs to fetch the data
  2. To fetch the data, I have created a simple NestJS app, which forwards requests
  3. CORS is enabled
  4. GraphQL Code Generator is used to generate typescript and services in Angular
  5. I followed Custom Theme For Angular Material Components series to create themes app

For more info about code, visit: this and this article.

Workspace is available on GitHub:


Conclusion

I created this app as a part of DigitalOcean App Platform Hackathon on DEV. This is my first full-stack web app. I am planning to make more such apps in future.

Thanks for reading.

Happy Coding

🌲 ğŸŒž 😊

Interested in reading more such articles from Dharmen Shah?

Support the author by donating an amount of your choice.

 
Share this