Gitalytics

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

---

Table of Contents

• About
  • What is this?
  • What does it show?
  • How does it look?
  • Export
  • Twitter Handle
• Development
• Conclusion

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 (Dark theme):

#2020Coded Page (Light theme):

#2020Coded Page (Dark theme):

About Page (Light theme):

About Page (Dark theme):

Share Repository Dialog (Light theme):

Share Pull Requests Dialog (Dark theme):

User info popover:

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.

---

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

🌲 🌞 😊