DEV Community

loading...
Cover image for Final Submission: Gitalytics - A simple overview of Github activities

Final Submission: Gitalytics - A simple overview of Github activities

shhdharmen profile image Dharmen Shah ・Updated on ・3 min read

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

🌲 🌞 😊

Discussion (7)

pic
Editor guide
Collapse
lapstjup profile image
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 :-

Collapse
shhdharmen profile image
Dharmen Shah Author

Thanks for the feedback, I will check.

Collapse
rahxuls profile image
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.

Collapse
shhdharmen profile image
Dharmen Shah Author

Thanks for the feedback... πŸ‘πŸΌ

Collapse
rahxuls profile image
Rahul

Will suggest you to make it more cool and attractive

Collapse
raddevus profile image
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!

Collapse
shhdharmen profile image
Dharmen Shah Author

Thanks a lot!