Final Submission: Gitalytics - A simple overview of Github activities

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

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:

Dharmen Shah 😎

@shhdharmen

My 2020 GitHub Contributions:

📘 37 repositories,
✅ 331 commits,
⭐~53 stars,
⚠ 5 issues,
⬆ 22 pull requests
👀 reviewed 1 PRs

Find out yours!

gitalytics.shhdharmen.me #2020Coded #gitalytics via @gitalytics_app

14:29 PM - 01 Jan 2021

Link to Source Code

Code is available at GitHub:

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.

Basic Structure Done with Nx and Deployed on DigitalOcean App Platform

Dharmen Shah ・ Dec 18 '20 ・ 3 min read

#dohackathon #gitalytics

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

🌲 🌞 😊