How I Built a No-Code Upvoting App to Rank Startup-Themed Coffee Name Ideas

I have to admit, it was easier than I expected it to be to set up a simple upvoting/polling/ranking/crowd-sourcing app.

I spent three long evenings and a full Saturday (less than 20 hours in total) making an app to let startup friends help me pick names for my new startup-themed coffees.

Less than a weekend of work. For a working app. Amazing.

The naming/upvoting app uses these four tools:

1. Airtable
2. Softr
3. Bannerbear
4. Zapier

After a Twitter follower pointed me in the right direction (omg THANKS FRANCK), I started my app with Softr's generic upvoting app template.

Their app has user signup, login, forgot pwd, voting, item lists, and item details — all using basic Softr components. All the membership components I needed without looping in anything else. Excellent.

Next step: I wanted to create a custom product mockup every time a new product idea is added.

I used Bannerbear for this, so each item submitted can have its own set of images customized to that item. Bannerbear creates a social share image, and two different product images (one with white bg, the other transparent bg).

Here's what those look like:

Bannerbear makes these as a result of a Zapier zap that fires when a new Airtable entry is added. I save the urls to these images in Airtable. I populated the initial set using Bannerbear's built-in import feature.

Softr allows apps to have columns in my Airtable telling it what social share image it should use for every item (click link for docs) in the database table (as well as all of the other relevant SEO and social/open graph data fields).

Lastly, after some Airtable formula gymnastics I added a sharable Twitter link in each product description:


After spending maybe too much time tinkering with colors and stock photos, it was ready to go!

Here’s a link to my finished voting app:
https://names.startupcoffee.co

Aside: You may notice that my social share images have a shorter link in them (coffeeforfounders dot com) that is a simple redirect to the longer URL above. That's just easier to type, easier to share. The final store website, in a week or so when these products launch, will live at startupcoffee.co.

PS: I should also mention how/where I got the art for the product mockup images...

The bag image is this (commercial license, of course):
Kraft Coffee Bag PSD Mockup on Creative Market

I edited the bag mockup with Pixelmator to hide the circular bag valve and add a white label. I prefer to use Pixelmator over Adobe Photoshop as often as possible because Photoshop makes my laptop wheeze and get unusably slow.