Building a Github contributor leaderboard using ToolJet in 5 minutes

In this tutorial, we will learn how to build a contributor leaderboard using ToolJet and Github API.

The app is available here: demo

Login to your ToolJet installation or ToolJet cloud and create a new application. If you do not have a ToolJet cloud account, you can create one from here. If you want to deploy ToolJet on your private cloud or local machine, check out our setup guide.

Create query to fetch data from Github API

Next, we need to create a REST API query to fetch the paginated list of contributors from Github. Let's use the api endpoint for Ruby on Rails repository: https://api.github.com/repos/rails/rails/contributors. Also, let's name this query 'fetchContributors'. Click on the 'advanced' option from the query editor pane and enable 'Run this query on page-load'. This is to run the query automatically after the app is loaded.

Once the query is created, you can click on 'Run' button to run the query. The query result can be inspected using the state inspector on the left-sidebar of the editor. We can see that the Github responds with the top 30 contributors.

Add table component to the canvas

Drag and drop the 'Table' component from the components pane on the right-sidebar of the editor .Change the name of first column to username and key to login. Key is used to access the value to be displayed in the cell. Change the name of second column to contributions. We do not need to set the key for this column as the name of the column is same as the accessor. Remove additional columns if there is any.

Click on the table component to open inspector on right-sidebar. Edit the Table data attribute, start typing within the double brackets and select queries.fetchContributors.data from the suggestions. Here we are setting the data object of the query result of fetchContributors as the data to be displayed on the table.

Now you can see that the data is displayed on the table. If not, please run the query again.

Deploy the app by clicking the deploy button on the top-right corner of the editor. Once deployed, click on 'launch' to launch the application on a new tab.

Paginating the data

We can see that the app displays the first 30 results in the table but the Github API allows up to 100 results per request and more results can be requested using page url parameter.

Click on the table to open inspector and enable server-side pagination option. Set fetchContributors query as the action for onPageChanged event of the table. onPageChanged event is fired when the user click on next/previous page button of the table.

Click on the fetchContributors query to edit the query. Create a new url parameter page_size with value 100 . Add another url parameter page the value should be pageIndex attribute of the table component ( {{components.table1.pageIndex. pageIndex is the attribute of table component to hold the index of current page, the value is automatically updated when next/previous page buttons are clicked.

Let's also add an action button to the table so that we can click on it to view the Github profile of the contributor in a new tab. Click the table and open inspector, click on + action button to add a new action button to the table. Set open web page as the action for the button and set the url as {{components.table1.selectedRow.html_url}}. You can also change the background color and text color of he button.

Deploy the app to see the changes in action.

Displaying profile details

Let's show the details of a Github user when a table row is clicked. First, create a new query to fetch profile details from Github. Name the query fetchProfile. The URL should be https://api.github.com/users/{{components.table1.selectedRow.login}} . The selectedRow property of the table stores the data of the row that was clicked.

Click on the table to open the inspector and set run query action for onRowClicked event of the table. Select fetchProfile as the query.

Drag and drop an image component and text component to the canvas from components pane. These components will be used to display the avatar image and bio of the Github user.

Set {{queries.fetchProfile.data.avatar_url}} as the source property of the image component and set {{queries.fetchProfile.data.bio}} as the text property of the text component.

Save changes, deploy and launch the application. You can see that the application loads first 100 Github contributors of the Rails repository on page load and when a row is clicked, the image & bio of the contributor is displayed.

You can view the live application here: demo.

Feel free to write to navaneeth@tooljet.io if you need any help.

Post cover photo credits: Photo by Luke Chesser on Unsplash