Code Monkey home page Code Monkey logo

leaderboard's Introduction

A simple leaderboard app built with Next.js and Tailwind CSS to list the top contributors of a GitHub organization.

image

Getting Started

Prerequisites

Ensure that pnpm is installed on your device. You can check the steps for installation here. Docs Link

Starting the development server

Install dependencies:

pnpm install

Now run the development server:

pnpm dev

Open http://localhost:3000 with your browser to see the result.

Troubleshooting

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:

      1. Instead of running pnpm dev, create your own GitHub access token. Read Steps here.

      2. 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

Installing packages

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

How to add a new member?

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.

Customizing the app

  1. To add or remove a badge, edit the config/GraduateAttributes.ts file.

  2. 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.

  3. To change the colors, fonts, or plugins edit the tailwind.config.js file.

Environment Variables

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

leaderboard's People

Contributors

ashrafmd-1 avatar ashutosh0602 avatar bodhish avatar corners2wall avatar dependabot[bot] avatar dgparmar14 avatar gigincg avatar gokulramghv avatar itxsoumya avatar khavinshankar avatar kshitijv256 avatar kumar11jr avatar ladityagogoi avatar mathew-alex avatar naman114 avatar pranshu1902 avatar rabilrbl avatar rash-27 avatar re-dei avatar rhithesh avatar ritesh-aggarwal avatar rithviknishad avatar rudra321 avatar sainak avatar samuel-aktar-laskar avatar skks1212 avatar sriharsh05 avatar udaysagar-git avatar vigneshhari avatar vinutv avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

leaderboard's Issues

Preview link image

image

  • When sharing links in messaging apps preview image is not correct/expected,
  • preview images for links can also be added to user pages when sharing their profile links

Add Github authentication

Add github authentication for the following :

  • 1. let users update their details through the app rather than sending a PR
  • 2. let users receive push notifications about what rank they stand.
  • 3. Have badges that a user receives on completion of specific tasks or goals
  • 4. you can think of more features

Capture Autonomy And Responsibility

We should encourage collaborators to find a problem and push fixes to it.

When a PR merge event is encountered, we should identify the issue linked with it.
If the author of the PR and Issue are the same, Create a new event for the author.

Getting this feature live will enable a new badge Autonomy And Responsibility

Critical Bug in search

  • As I type my name, I hold the "1" badge
  • Under all categories in "Top Contributors of the week" my name appear.
    image

Enable reward for collaboration

The GitHub parser should also create events for collaboration.

When a PR merge event is received, fetch the details of the PR and check for the number of collaborators.

If the number of collaborators is more than one, create collaboration events for all the users.

Once this this goes live, a new badge collaboration will show on the personal learning dashboard

Create static links for leaderboard

Currently, the leaderboard page just shows the latest week's stats. We should have an option to see older stats, this way a new user could navigate to older data.

UI Enhancement for Search, Sort and Toggle

The Search, Sort and Toggle could have the following UI improvements:

  • Excess spacing between the search bar and live leaderboard should be reduced

image

  • Search sort and toggle can be placed in a single row in desktop and left justified in mobile view

image

Enable reward for activity in GitHub discussion

We should save events when a user marks an answer as solution for his question.
The one who answered the question will get a new event that says `Resolved a Question in the community'

This will enable a new badge Empathy

Changing cron time to 7:00 PM

For checking the progress of the students for the entire day we can update the data at 7:00 PM just before EOD rather than in the morning.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.