DEV Community

Dinesh S
Dinesh S

Posted on

2

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.

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs