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:

Link to Source Code

Code is available at GitHub:

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.

Basic Structure Done with Nx and Deployed on DigitalOcean App Platform

Dharmen Shah ・ Dec 18 '20

#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

🌲 🌞 😊

Comments

[Lakshya Thakur]

This is a cool submission 😁.
Few obs :-
1) Mobile view can be more responsive. I am trying out in iPhone 7 and content has a right margin or padding.
2) trim the white space in the search field.

Check out mine :-

Article No Longer Available

[Dharmen Shah]

Thanks for the feedback, I will check.

[Rahul]

This is good work but. This is just so common and it can be achieved using simple coding. I only found that pic thing fascinating but it can be improved by providing many editing options.

[Dharmen Shah]

Thanks for the feedback... 👍🏼

[Rahul]

Will suggest you to make it more cool and attractive

[raddevus]

Congrats on finishing up your entry. I tried it out and it looks really great. That's a very nice UI and very interesting summary of GitHub data. Great work!

[Dharmen Shah]

Thanks a lot!