Did you know that Appsmith is a fully remote distributed organization? We have colleagues in 5 countries! This makes total sense for us as an open-source platform with contributors from over 100 countries (take a look at our activity on Github). It’s also why we think of ourselves as learners; we read, talk to people, and love feedback. And in that spirit, every new team member makes an app on Appsmith in their first week upon joining us! And there is only one rule, that there are no rules! These apps range from functional to fun to downright silly!
This week, we’re featuring our colleague, Favour Ohanekwu’s app. Favour is a front-end engineer from Ibadan in Nigeria. Over the years, he has been actively involved in building web applications across several industries ranging from health, agriculture, and IoT. You can follow his work here.
Favour toyed around with a few ideas before landing on a final app idea. Some of these app ideas were:
Favour chose to work on the third idea to build a Github Dashboard to view and track several projects, using Github’s REST API.
We’ll outline the steps involved in making this app, and you’ll see how easy it is to build this application in few simple steps using Appsmith!
This short tutorial uses the cloud version of Appsmith. However, you can always export and import Appsmith apps to different environments (cloud, self-hosted, local). The recommended way to use Appsmith is to use Docker; follow the documentation here for detailed instructions if you want to build locally.
Now you can build a simple UI with Appsmith widgets to build the dashboard and display all metrics crucial to your project!
Now that you’ve configured the app, you will need to configure a data source that will fetch all the repos from a Github organization. To do this, follow the steps below:
Additionally, you can drag text widgets and add some context regarding the same for the dashboard. Here’s how it looks:
Displaying Core Metrics
Now that the repositories are listed on the application, you can fetch the data of a single repository and display all the crucial information such as network count, forks, subscribers, and a few more.
Additionally, you can add more text widgets and a container widget to organize this more beautifully.
Here’s how Favour did it:
Displaying Repository Events
In this section, you can display a table widget to show all the events for a repository. In this way, you can monitor who is creating pull requests, pushing new changes, etc.
Follow the steps below to do this:
With this code snippet, you can display all the data from the get_repo_events API and bind it on the table widget. Following is how the output looks like:
Last, you can add a couple of charts that will help you visualize the number of repository forks and the number of watchers for the repository by following the below steps:
Following is a screenshot:
Now, wasn’t that easy to do with Appsmith?
Have you made something using Appsmith? Write to me (email@example.com), and I would love to feature you on our blog!
If you’re interested in building an app on Appsmith, sign up today. We have docs, and tutorials and live help, and a vibrant discord community to help you along the way. So go ahead, put your ideas out there!
Do you want to join Appsmith? We’ve got a bunch of openings; take a look here and apply!
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
The rich text element allows you to create and format
sadadasdasdas dsada sadas asd ad
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.