How I built SetProgress - Part 2 Progress bar

This is the 2nd post in the series "How I built SetProgress".

Before we dive in, let me explain the features of SetProgress.
SetProgress allows you to display your progress to your Twitter Audience. If you are an active user on Twitter you might have noticed accounts with a progress bar in their profile. The most common one's are MRR (Monthly recurring revenue), #100DaysOfCode and many more.

Progress bar examples

Before I built this app, I saw a lot of people on Twitter sharing their progress using progress bars in their bio. I asked a few of them how they were doing it and they said, they were creating those blocks manually. That works fine if your progress doesn't change frequently. But if you are doing #100DaysOfCode or something similar, progress changes quite frequently. It would also be cumbersome for a user to calculate the number of bars in the progress bar.

Let's say you are doing 100DaysOfCode and your have completed 56 days, what would the progress bar look like? How many blocks do you want to have in the bar and how do you fill them with full/partial blocks? There is a bit of mathematic calculation here. In 2021, nobody should be doing this sort of thing manually.

I decided to build an app to automate this. There are 2 things to be solved here.

1. Create the progress bar based on the current progress, target progress and the number of bars in the progress bar. (As configured by the user in the app)
2. Push the progress bar to Twitter.

SetProgress Architecture

To use the app, user has to login using Twitter. User profile information is fetched from Twitter and displayed in the app. Signing in with Twitter also enables the app to push the progress bar to Twitter.

Progress bar design

The first step in designing a progress bar is to configure it. It is made of blocks which display the progress. There are 3 types of blocks

1. Empty
2. Partial
3. Full

The blocks can be made of any emoji. For convenience, I have collected commonly used one's into a dropdown, which can be selected while configuring.

The bar is calculated based on the current and the target progress. Just a bare progress bar doesn't convey much meaning. So you also configure what should be displayed to its left and right.

Save to DB

Users can configure the progress and save it to the database. By doing this, they don't have to configure the progress every time they come to the app. If you think about it, once you do the initial configuration, you would just update the current progress, everything else remains the same.

Push to Twitter

Once the user Sign's In with Twitter, the app receives the user's access token which is required for updating the user profile Twitter doc. Progress bar is nothing but a plain string. When user clicks on Push to Twitter, an API call is made to Twitter to update their profile.

Tech stack

I am using Next.js for backend along with FaunaDB as the datastore.

I am using ReactJS and Tailwindcss for frontend.

The app is hosted on Vercel. It has a mix of Server Side rendered pages and API's. You don't want to expose API keys and database secrets in the client. So I proxy the requests through API's that require Twitter tokens (For pushing bar to Twitter) and database credentials (For storing the progress bar configuration).