Final Submission: Gitalytics - A simple overview of Github activities

Dharmen Shah - Jan 1 '21 - - Dev Community

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)

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

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)
  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)

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

Link to Source Code

Code is available at GitHub:

GitHub logo shhdharmen / gitalytics

🐙 🐱 📊 Gitalytics - A simple overview of your Github activities

Permissive License

Code is licensed MIT

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.

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
  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

🌲 🌞 😊

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .