devleonardocommunity / github-stats

Aggregating and displaying YOUR GitHub Stats in meaningful metrics (we learn web development in the meantime)

GitHub Stats

Your GitHub contributions smartly organized and visualized - showcase meaningful metrics on your CV

What's this?

Before stating whether this tool is useful or not (it might be) let's disclose its primary goal: improving our skills.

Why our? Because this tool is open source and everyone is more than welcome to contribute to it!

You can grab an issue at any time, or join the Discord server to discuss the project and its future. Nothing is set in stone, so feel free to share your ideas and suggestions.

Learn more

Here's a video describing the project and its goals (on YouTube)

Technologies involved

The app is currently based on Next.js with TypeScript and Tailwind CSS (actually with DaisyUI, a Tailwind CSS component library).

We manage some data, specifically from the GitHub APIs using the GraphQL endpoint and React Query.

There's a login feature with NextAuth using GitHub as a provider.

Coming soon

The plan is to also add at some point some kind of user profile and settings, stored where? It's up to you to decide! It could be on MongoDB with an ORM like Prisma or something entirely different. A first start could be using localStorage to validate the concept and then decide which database to use.

Testing will also be involved in the process, not sure if Vitest or Jest for component testing and either Cypress or Playwright for E2E testing.

How to contribute?

As mentioned in the beginning, you can grab an issue (write a comment first!) or join the Discord server so we can have a chat about the project.

The goal of this project isn't the outcome itself but rather the process of building it, together! As a result, we'll end up having a nice tool to showcase our GitHub contributions and a project we can use as a reference when we need to implement something similar in other projects.

Instructions on how to run the app locally can be found in CONTRIBUTING.md.

Thanks for reading and happy coding!

Contributors

Leonardo Montini 📆 💻	Anant Choubey 📖 🐛 💻	Priyankar Pal 📖 💻 🤔	Piyush Jha 💻	Dimassi Bassem 🎨 💻	Jakub Fronczyk 💻	Antonio Basile 💻
Agrima Agrawal 🐛	hicham essaidi 💻	Anupam 💻	thititongumpun 💻	Jakub Baran 💻	Sabrina 💻 🐛	Kiet Hoang Gia 💻
Christine Belzie 👀 💻 ️️️️♿️

github-stats's Issues

Change styling of Navbar

Words written on navbar are not visible I can change its styling

Add tooltip to long PR titles

Describe the feature

With #94 we fixed an issue on long titles, would be an additional feature to also have a tooltip when hovering on long/cut titles

It should be implemented because

No response

Additional context

No response

Would you like to work on this issue?

None

Improve docs

Improve documentation on how to run the project (CONTRIBUTING.md)

[a11y]: color contrast is low and missing labels for the for form

Describe your issue

I ran some accessibility tests on the website and here are the results.

Accessibility Insights

• Element has insufficient color contrast of 2.93 (foreground color: #e1e6fe, background color: #3c83f6, font size: 10.5pt (14px), font weight: normal). Contrast ratio: 2.93:1
  

• Expected contrast ratio of 4.5:1 according to WCAG 1.4.3.

WAVE Tester

Steps to reproduce

Not applicable

What was the expected result?

No response

Put here any screenshots or videos (optional)

No response

Would you like to work on this issue?

Yes

toggle dark/light mode

Describe the feature

We can create a button for change theme from dark to light.

It should be implemented because...

the user chooses his favorite theme

Describe alternatives you've considered

Additional context

• I have used the search function to check if an issue already exists
• I'd like to work on this issue

ThemeSelector icon color not changing on dark mode

Describe your issue

When dark mode is selected the icons remain black so they are not clearly visible on the dark background.

Steps to reproduce

Switch to dark theme from header navbar

What was the expected result?

I expect the icons to change their color to white so to be clearly visible

Put here any screenshots or videos (optional)

Would you like to work on this issue?

Yes

bug: profile card should have more width

Describe your issue

To improve the user experience, the profile card should be wider

Steps to reproduce

go to profile page & see the card width

What was the expected result?

No response

Put here any screenshots or videos (optional)

before

After

Would you like to work on this issue?

Yes

Spacing between export buttons is inconsistent

Describe your issue

When I change display mode, I see that the export button for Cards is spaced evenly on top and bottom, but the export buttons for Text and Json have an extra space on top

Steps to reproduce

1. Login
2. Go on the Stats page
3. Change display mode

What was the expected result?

Spacing is the same for all three buttons

Put here any screenshots or videos (optional)

Extra fields

• I have used the search function to check if an issue already exists
• I'd like to work on this issue

Display a text when there are no results

When there are no results on the stats page it is just empty. We should probably add a text informing the user about that.

Define a mode without login

Currently, we need to login with GitHub to get the token used to perform API calls having a much higher limit (5000 calls per hour vs 60 for unauthenticated - docs).

However, a simple usage of this application might stay well below 60 calls per hour so it makes sense to have an unauthenticated mode.

---

Bonus for development, find a way to use a GH_TOKEN from the env when the user is not logged.
Could also be a login mode enabled only in DEV, that's still up to discussion. Suggestions are welcome!

Close dropdown on item click

Describe the feature

The click on a list item should close the dropdown

It should be implemented because

Better UX

Additional context

No response

Would you like to work on this issue?

Yes

Just login and can see all stats

Describe your issue

1. Login
2. Change URL

• Just change username on the URL and I can see all stats
• https://public-github-stats.vercel.app/stats/<username-Github>
• Example: https://public-github-stats.vercel.app/stats/Balastrong

Steps to reproduce

• I have no idea

What was the expected result?

No response

Put here any screenshots or videos (optional)

No response

Would you like to work on this issue?

None

Card view adds horizontal scroll

Describe your issue

There's an horizontal scroll in the card view that shouldn't be there

Steps to reproduce

1. Login
2. Go to the stats page
3. (select the cards view)

What was the expected result?

No horizontal scroll

Put here any screenshots or videos (optional)

No response

Extra fields

• I have used the search function to check if an issue already exists
• I'd like to work on this issue

Bug: Background color is limited to the screen size only

Bug description
Background height is fixed to 100% only, which leads to the background color filling until the screen's size only.

Reproduction steps

1. Go to the home page
2. Scroll down
3. You will see a partition of 2 colors, a black and a grey

[Alternatively]

1. Go to your Stats Page
2. Check your stats in a format where the size of the screen exceeds
3. Scroll down and you will notice the issue

Expected behavior
The background color should be there until the bottom of the page.

Screenshots

• Check the bottom of the Screenshot

Additional context

• I make sure that a similar issue is not opened
• I would like to work on this issue.

mobile phone responsiveness issue in Select Format section

Bug description

When I visit my account and got to select format section and when I click TEXT and JSON part all of the text overflow.
Reproduction steps

Expected behavior
if you click Select format text it should have been in the container not overflowing all over place

Screenshots

Additional context

Feat:Change State Display ( instead of name display GitHub icon for UI performance)

Describe the feature

Change Display of state of Pull request state to github icon (merged,open,close state)

It should be implemented because

No response

Did you think about any alternative?

No response

Additional context

No response

Extra fields

• I have used the search function to check if an issue already exists
• I'd like to work on this issue

Feat : Clipboard Img copy alert

Describe the feature

An alert to be displayed to the user after they have copied the image to the clipboard.

It should be implemented because

It would be good for the User experience .

Did you think about any alternative?

No response

Additional context

Extra fields

• I have used the search function to check if an issue already exists
• I'd like to work on this issue

Export profile card as image

Feature Description
Add a nice export button on the /profile page to get a cool card to share on socials or add on the GitHub profile

Additional context
We're already working on an export feature with #4 and #36, let's wait for those to be completed before working on this one :)

Wrong icon in open Pull Requests

Describe your issue

Here on line 83 we show the GoIssueOpened icon which renders the open issue icon. I think there should be a dedicated icon for open pull requests.

github-stats/src/components/RepositoryContributionsCard.tsx

Lines 78 to 84 in d71c03f

	{state === "MERGED" ? (
	<FaCodeMerge size={18} />
	) : state === "CLOSED" ? (
	<IoIosCloseCircleOutline size={18} />
	) : (
	<GoIssueOpened size={18} />
	)}

Steps to reproduce

1. Login
2. Go to the stats page
3. Have an open PR in your cards

What was the expected result?

No response

Put here any screenshots or videos (optional)

Would you like to work on this issue?

None

Broken responsive layout in stats page

Describe your issue

In some cases, I find the layout breaking when resizing the screen.

Steps to reproduce

Go to page stats and find a card with a long repo title. Resize the screen and, at around 1000px, the totalCount pill starts to overlap the repo title:

The size at which it starts breaking depends on how long the title is.

When resizing, at around 860px, the card overflows its container when more than one card is displayed:

It doesn't happen with only one card displayed.

What was the expected result?

I expect the layout to be correctly responsive and the content to always be clearly visible.

Put here any screenshots or videos (optional)

No response

Would you like to work on this issue?

Yes

PR status indicator takes full height

The PR status indicator takes the full height, we should fix it to have its background only behind the text

Add node version in package.json

We already have a preferred node version on .nvmrc, we should also have it on package.json

@theanantchoubey did you want to work on this? :)

Add text filter

Describe the feature

Add a text input to filter repositories on the stats page

It should be implemented because

The filter allows to easily find a repository

Did you think about any alternative?

No response

Additional context

Should only filter locally, there's no need to call the API again as we expect all repositories to be there already

Extra fields

• I have used the search function to check if an issue already exists
• I'd like to work on this issue

feat: add repository link to the card title

currently we have added only repository url & owner name also, we can insert the repository url there. It will help owners to navigate to the repo.

Also, I have added hover:underline

After changes

2023-08-15_11-49-49.mp4

what do you think @Balastrong ? if you want I will raise the PR

Add Export button

Add an Export button in the stats page to download the data as JSON or Text

Add a favicon

We currently have the default Vercel icon, I'd like to replace it.

Maybe we shouldn't use the GitHub icon as it can be misleading... I'm open to suggestions :D

Skeleton loading for stats

Feature Description
Display some skeleton cards while stats are loading in /stats

It should be implemented because...
Improves the loading experience

Describe alternatives you've considered
A boring spinner

Additional context
Please do not start with the implementation immediately, let's discuss and decide here if we should do it from scratch or use an external library (if so, which one)

Export button in text mode is inside the next container

Bug description

The export button seems to be inside the <pre> tag

Reproduction steps

1. Open the stats page
2. Go on "Text" mode

Expected behavior
The button is before the text, outside the <pre> tag

Screenshots

Additional context

As a https://github.com/Balastrong/github-stats/labels/good%20first%20issue I will be really happy if this is taken by a first time contributor :)

chore: add cursor pointer

Describe your issue

just need to add a cursor pointer to the Export as image button

Steps to reproduce

.

What was the expected result?

.

Put here any screenshots or videos (optional)

Extra fields

• I have used the search function to check if an issue already exists
• I'd like to work on this issue

Broken layout if contribution title is too long

Describe your issue

If PR title is too long the icon is cut

Steps to reproduce

1. Go to page /stats
2. You're able to see the issue if a contribution title is quite long

What was the expected result?

I expect the layout to stay consistent regardless of the content.

Put here any screenshots or videos (optional)

Would you like to work on this issue?

Yes

Add total received stars

On the /profile page we could add the total of stars an user has on all his repositories.

it would be great if we can filter out forks, so only actual repositories of the user are counted.

This should be (hopefully) possible with the GraphQL endpoint, in the query userProfileQuery listed below

https://github.com/Balastrong/github-stats/blob/578967d25ca4f26cf52539e909baf5f78647243f/src/graphql/queries.ts#L32-L43

Refactoring stats page

Describe the feature

Refactor the stats page:
separate the filters from the visualisation
create utils functions to avoid repetitions

It should be implemented because

Making the code cleaner will increase readability and efficiency.
It will also be easier to find and fix bugs or vulnerabilities in the code.

Additional context

To start off I would make a single ReposFilters component that groups all the filters code (without creating a new component for each filter). It cleans up a bit the stats page without being too verbose and leaves room for more refactoring if needed.
@Balastrong how do you see it?

Would you like to work on this issue?

Yes

GraphQL Query Fails with Status Code 200 on the Stats Page While Running Locally.

Issue Description

Description:

I'm encountering an issue when making a GraphQL query to the following endpoint:

Request URL: https://api.github.com/graphql
Request Method: POST
Status Code: 200 OK

However, the response I receive is:

{
    "data": {
        "user": null
    },
    "errors": [
        {
            "type": "INTERNAL",
            "message": "Something went wrong while executing your query. Please include `C50A:6791:B4B973:BCA94B:650F16BA` when reporting this issue."
        }
    ]
}

Steps to Reproduce

• Run the github-stats project locally.
• Navigate to the page stats/(username).
• Open the browser's developer tools and check the network tab for requests.

Expected Result

The expected result is that the query should fetch responses, similar to the hosted site: https://public-github-stats.vercel.app/stats/(username).

Screenshots or Videos (Optional)

You can view the screenshots of the issue:

Additional Information

Please indicate if you've used the search function to check if a similar issue already exists. Additionally, let us know if you'd like to work on resolving this issue.

Protect the stats route

Implement a guard to protect the /stats route and other possible routes for logged users only.

feat: add colors for different states

we have to add different colors for different states. It will help to identify which PR got merged, closed & opened.

• merged : purple
• closed : red
• opened : green

After changes

I want to work on this issue

Homepage restyle

The current homepage is still... empty!

What could we add to make it more good-looking? Suggestions are welcome, then when we agree we can proceed with the implementation.

Add description how to setup development environment

Feature Description

Description how to setup development environment

It should be implemented because...

To clarify how to run app for development, especially part about your GitHub token required to signing

Describe alternatives you've considered

Could be something like https://github.com/facebook/docusaurus but at this moment description in README is enough

Additional context

I spend some extra time to figure out how to singing on development environment

Add custom sorting

Describe the feature

Repositories are now sorted by number of PRs, we can add a dropdown to add some more custom sorting

It should be implemented because

No response

Did you think about any alternative?

No response

Additional context

No response

Extra fields

• I have used the search function to check if an issue already exists
• I'd like to work on this issue

Add Copy button for format Text, JSON

Describe the feature

Have a button next to export button to copy text

It should be implemented because

Increase user experience

Additional context

No response

Would you like to work on this issue?

Yes

Hide own repositories

Describe the feature

Add a checkbox to hide own repositories from the list in /stats/{username}

It should be implemented because

No response

Did you think about any alternative?

No response

Additional context

No response

Extra fields

• I have used the search function to check if an issue already exists
• I'd like to work on this issue

Add Export as image button

Allow users to export as an image the stats page

Feat : line-chart to show the most contributed repos

Describe the feature

A chart to display the contribution history along with the rate of the contributions the user has made .

Chart eg

Page to implement it in

It should be implemented because

This will make the profile page UI more better with more description to show .

Did you think about any alternative?

I am thinking of implementing these features using react-chartjs-2.

Additional context

No response

Extra fields

• I have used the search function to check if an issue already exists
• I'd like to work on this issue

Setup Cypress

Setup Cypress for e2e testing

fix github login on vercel preview deployments

It's probably something I should do but I haven't found a solution so far, so I'm open to get some help :)

When logging in via GitHub App, on the settings I must add a callback URL that will be used to redirect the user after sign in
(see docs: https://docs.github.com/en/apps/creating-github-apps/registering-a-github-app/about-the-user-authorization-callback-url)

This works fine for production and localhost as I specified the two URLs:

But it doesn't work for Vercel's deployment previews as they have different URLs.
I haven't found a way to put wildcards on GitHub or specify a redirect URL that works so... if someone has ideas, let me know! :D

Implement a profile page

Implement a simple /profile page for logged users with data from the GItHub API.