968 reads

I Built An Online Subscription Tracker App in Coda—Here's The Template

by Zoe ChewFebruary 20th, 2020

Too Long; Didn't Read

SubsTrack.it is a simple app to manage your online subscriptions in one place. Users can add a new service, keep track of billing, expiration date & receive a renewal reminder. Built 11 MVP, no funding, built 11 MVP apps on Product Hunt #1 & Lifehacker.com #1. Coda can easily transform a document into a mobile app, such as math formula, embeds, automation, alerts, and app integration. It’s almost Zapier-like and Notion-ish.

Company Mentioned

featured image - I Built An Online Subscription Tracker App in Coda—Here's The Template

Simple app to manage your online subscriptions in one place.

Note: This article is part of my toolkit newsletters↗️ where I share resources about building things. Join me :)

As a product builder↗️, I built a lot of micro tools to solve my own problems. Some of these tools are article tool, portfolio tracker, habit tracker, and personal finance tracker.

I subscribed to several online tools which I have no idea when they’re expiring. I wanted to be able to track these subscriptions, even better — to receive mobile notifications when they’re approaching the renewal date.

Today, I will share how I build this subscription tracker in Coda. I’ll also include a template so you can duplicate a copy & live test the app.

1. Ideation stage 💡

Let’s name this app — SubsTrack.it. A subscription tracking app that keeps track of all your monthly subscription purchases.

Users can add a new service, keep track of billing, expiration date & receive a renewal reminder. Users can also access this tracker from both web and mobile platforms.

✅ To begin, I list down the parts I want to build

Add a new service every time I bought a subscription plan
Specify the billing term, pricing and expiration date
Automatically count down # days left till renewal
Review billing history and the total amount I’ve paid
Send a renewal reminder in mobile notifications

2. Set up Coda ⚒️

Go to Coda and sign up for a free account.

Coda can easily transform a document into a mobile app. You can also add components into a doc, such as math formula, embeds, automation, alerts, and app integration. It’s almost Zapier-like and Notion-ish.

✅ Getting started

Add a “New Doc” in Coda
Insert a “New Table”
Name the first table as “Subscription tracking”

✅ Create new sections

We’re going to create separate pages for bills tracking, review billing history, a summary of purchases and a Help page to guide the new users.

On the left panel, click on “+New” > select “Section”
Add 4 new Sections: “Track”, “History”, “Summary”, “Help”
Add icon to customize your Section name

👉Access this Coda template here

3. Create a tracking table 📈

Let’s work on the table in the “Track” section. I wanted to build a “Master” list to track all my online subscriptions. This list should contain details about the services I purchased.

✅ Set up tracking table

In an empty Table, add new columns horizontally to create your tracking parameters such as:

Service Name (Airtable, Coda, Carrd…)
Logo (to attach images of service provider)
Plan Details (i.e. Free, Beginner, Pro, Enterprise)
Billing Term (monthly, yearly…)
Pricing ($)
End Date (expiration date of the service)
Days Till Renewal (number of days till service expiration)
Reminder (status of reminder trigger)
Paid (to mark services that have been paid)

✅ Format for visual-rich input

By default, each column is set to “Text” format, which means you can only input text details. Since we need to attach images, specify date information, etc., we’re going to format each column with settings below:

Service Name (Text)
Logo (Image > Image URL)
Plan Details (Text)
Billing Term (Select list)
Pricing (Currency)
End Date (Date)
Days Till Renewal (Date > Duration)
Reminder (Button)
Paid (Checkbox)

✅ To format each column:

Right-click on each column, i.e. “Logo”
Select “Format column” as shown in the previous image
Click to expand a list of available formats, select to set

👉Access this Coda template here

4. Count renewal date 📅

I tend to miss out on service expiration emails. They don’t look “urgent” to me probably because the email subject lines are usually in plain text.

I decided to solve this problem by creating a red highlighter when a service is expiring in less than 30 days. It looks like this:

✅ To create an automatic “day counter” in Coda

Right-click on the column “Days till Renewal”
Scroll down and click “Add formula”
Copy and paste the formula below in “Add column formula”

[End Date]- Today()

✅ Create red highlighter

Right-click on the column “Days till Renewal”
Select “Conditional format”
SET FORMAT (Bold) (Red color)
APPLY TO (Days till Renewal) only
Copy and paste the formula below to trigger red highlighter

[Days till Renewal] &gt;= Duration(1) AND thisRow.[Days till Renewal] &lt;= Duration(30)

5. Send alerts to mobile 📱

Now you’ve created a visual alert (red highlighter) in Step 4. It would be cool to receive mobile alerts when these services are expiring in less than 7 days. The end result looks like this (Alert Sent):

✅ Create ‘Alert Sent’ button

Right-click on the column “Reminder”
Select “Format column”, set to “Button” (done in Step 3)
Customize your alerts with details below

✅ Disable mobile notifications

You probably don’t need alerts when a subscription still has 200 days till renewal. Therefore, you will need to set up a formula to restrict alerts during certain timeframe:

Continue the above instructions in Step 5
Scroll down to the area “DISABLE IF”
Copy and paste the formula below in the “Add conditions to disable button”

[Days till Renewal]&gt;7

✅ Test alerts on mobile

Download Coda mobile app via App Store
In ‘Track’ table, change the “End Date” closer to 7 days to see changes
Push the “Alert Sent” button on the “Reminder” column. This is for testing. Usually, the notification will be sent without any force action

You should be able to see a notification on your mobile with the customized messages:

👉Access this Coda template here

6. Check off paid services 💳

Let’s “de-visible” the subscription you’ve paid. This will create visual feedback and remove distractions on the subscription tracking table:

✅ Create “Paid” checkbox

Right-click on the column “Paid”
Select “Format column”, set to “Checkbox”

✅ “De-visible” a row of data when “paid” is checked

Right-click on the column “Paid”
Select “Conditional format”
SET FORMAT (*any* light color)
APPLY TO (all available boxes, except Paid)

7. Billing history 💳

Let’s work on a separate “History” section (created in Step 2). This section shows your payment history. Instead of building this report from scratch, we’re going to pull data from our “Track” section.

✅ Insert & filter an existing table

Go to “History” section, insert a “Table”, select an existing table “Subscription tracking”

Go to Filter icon > Show only “Paid” services that have been “Checked”

Name this table “Billing history (paid)”

✅ To count and display total of $ paid

Add a heading above the “Billing history (paid)” table

Insert “Formula” > “New Formula” (from red “+” button on the top panel)

Copy and paste the formula below in “Add formula”

sum([Billing history (paid)].Pricing)

👉Access this Coda template here

8. Summary reports 📝

Let’s work on the “Summary” section. This section summarizes your subscription spending overview. We're going to pull data from the same “Subscription tracking” table.

✅ Filter & display in Chart view