A simple leaderboard app built with Next.js and Tailwind CSS to list the top contributors of a GitHub organization.
![image](https://private-user-images.githubusercontent.com/25143503/313596171-6352a4cf-4b8b-4f80-b45c-6af323ee502e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjEzNTIyODgsIm5iZiI6MTcyMTM1MTk4OCwicGF0aCI6Ii8yNTE0MzUwMy8zMTM1OTYxNzEtNjM1MmE0Y2YtNGI4Yi00ZjgwLWI0NWMtNmFmMzIzZWU1MDJlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA3MTklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNzE5VDAxMTk0OFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWFhZDgyZjE5MzQ1Njc2NDg0MWVjNWZiN2FiZGZhZjQ3MTQ0MTU2YzQxYjljZTdhYjIyYTFhNWMzYTIxMzk1MjMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.wg3ueqmXYqac_ecDf1fM6JNQj1yZfgBd3tWN6e53G3I)
Ensure that pnpm
is installed on your device. You can check the steps for installation here. Docs Link
Install dependencies:
pnpm install
Now run the development server:
pnpm dev
Open http://localhost:3000 with your browser to see the result.
If you encounter any issues during setup, refer to the following troubleshooting tips:
-
Error: GITHUB_PAT is not configured in the environment. Request quota exhausted for request POST /graphql
-
If you're facing this error for new contributors, follow these steps:
-
Instead of running
pnpm dev
, create your own GitHub access token. Read Steps here. -
Run the following command instead:
GITHUB_PAT=<YOUR_KEY> pnpm dev
-
-
Alternatively, if you have the
gh cli
installed and configured on your device, you can run the following command without creating an access token:GITHUB_PAT=$(gh auth token) pnpm dev
-
To install new packages, run the following command:
pnpm add <package_name>
You can get more info about
pnpm
through their official docs pnpm docs
Create a new markdown file with the GitHub user name in the contributors
folder. For example, if you want to
add john-doe
as a contributor, and create a file named john-doe.md
in the contributors
folder.
The file should contain the following content:
---
name: John Doe
title: Full Stack Developer
github: john-doe
twitter: john-doe
linkedin: john-doe
slack: U02TDGQQPMJ
joining_date: "09/05/2022"
role: contributor
---
** A Bio about John Doe **
_Passionate about creating scalable and distributed systems for the power grid and interested in contributing to open
source digital public goods._ (supports markdown)
All members marked with role: core
and role: operations
will be hidden from the leaderboard section by default. You can toggle their visibility by changing filters.
You will be able to see the user's profile page at http://localhost:3000/contributors/john-doe
.
-
To add or remove a badge, edit the
config/GraduateAttributes.ts
file. -
To Setup the repo for a new org, update the scraper config and update the
DATA_SOURCE
variable in the.env
file to match the repo containing your organization data. -
To change the colors, fonts, or plugins edit the
tailwind.config.js
file.
Variable | Description | Default | Optional? |
---|---|---|---|
NEXT_PUBLIC_ORG_NAME | Will be displayed in the navbar | ohc.network | No |
NEXT_PUBLIC_ORG_INFO | Will be displayed in the "What do we do?" section. | Open Healthcare Network is a free and open-source disaster management system that is used by National Health Mission, Government of India and various state governments for reimaging digital war rooms. The solution that students got an opportunity to intern with has supported 3.34Lac patient management and 1.29 Lac ambulance shiftings and is approved by the United Nations as a Digital Public Good. | Yes |
NEXT_PUBLIC_ORG_LOGO | Will be displayed in the footer. | /logo.webp | No |
NEXT_PUBLIC_META_TITLE | Metadata title | Open Healthcare Network | No |
NEXT_PUBLIC_META_IMG | Metadata img | /logo.webp | No |
NEXT_PUBLIC_META_DESCRIPTION | Metadata description | OHC Network Leaderboard tracks the weekly progress of all coronasafe contributors. | No |
NEXT_PUBLIC_META_URL | Metadata url | https://leaderboard.ohc.network | No |
NEXT_PUBLIC_PAGE_TITLE | Will be displayed in page title. | OHC Network Contributors | No |
NEXT_PUBLIC_CONTRIBUTORS_INFO | Will be displayed next to "Our Contributors" section. You can use it to display a note about your contributors. | Yes | |
DATA_SOURCE | Url for data repository | https://github.com/coronasafe/leaderboard-data.git | Yes |
NEXT_PUBLIC_FEATURES | These features will be displayed | Leaderboard,Contributors,Feed,Releases, | Yes |