How I built SetProgress - Part 1 Waitlist

dineshs91

Dinesh S

Posted on December 8, 2021

How I built SetProgress - Part 1 Waitlist

This is going to be a multi part series. In this post, I am going to explain how I created a waitlist page for my app SetProgress.

For a simple waitlist, you require only 2 things, a landing page and a way to collect & store emails or phone numbers.

Waitlist Architecture

Landing page

For the landing page, I used Unicorn platform. I chose an existing template and made some minor tweaks to it. I did not want to spend time building a page myself since waitlist is a temporary thing and I could spend that time on building the app itself.

I took their Maker pricing plan, so that I can export the code and host it myself. I did not want to depend on another platform for hosting and keep paying them just for that.

Collecting emails

I wrote a few lines of JavaScript code which will make a call to an API which will have the email the user entered in the waitlist input box. On success, I show the user an alert message with the text Added to waitlist successfully. I just used javascript alert(success) for it, no fancy pop up's.

Storing waitlist emails

I decided to store the emails in Airtable. I created an automation in Integromat which will receive the emails through a webhook and write them to Airtable. The automation is a Webhook to Airtable integration. The ajax call from the waitlist form is made to the Webhook API url provided by Integromat.

Integromat integration

Creating the logo

I created a simple logo from Figma.

App logo

I created it using emoji's 😄

Tools used for the waitlist

  • Unicorn platform, for building the landing page.
  • Figma, for creating the logo.
  • Storyset, for illustration. I used Fast-loading illustration.
  • Airtable, to store the emails
  • Integromat, to create a webhook and write data to Airtable
  • Vercel to deploy the waitlist.

I used the free tier of all the above tools, except Unicorn platform for which I did one time payment of 8$ for a month, just to export the code.

Summary

As you can see, a waitlist doesn't have to be complicated. It can be done in a few simple steps. I don't recommend anyone to spend a lot of time on the waitlist. Focus your time & energy on the actual app itself.

Here's how the waitlist page looks.

💖 💪 🙅 🚩
dineshs91
Dinesh S

Posted on December 8, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related