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