Back to home
How to Build a Slack App with Low-Code (and get $20K)
Guides

How to Build a Slack App with Low-Code (and get $20K)

I received a $20K investment for a product built entirely using low-code tools. Here a step-by-step guide of how I built it.

Matthew Busel
December 17, 2021
IN THIS GUIDE

The Stack

Glitch

Slack API

Block Kit Builder

Airtable

Uptime Robot

Zapier

Summary

I’m the co-founder of Whalesync - a no-code data syncing tool. Before Whalesync, I started a company called Referralboard. Referralboard is a Slack app that incentivizes employee referrals. The app is pretty simple - employees move up a leaderboard by submitting referrals thru Slack. The most prolific referrers win a prize at the end of the month.

In early 2019, I submitted Referralboard to Daniel Gross’ Pioneer competition. I competed in Pioneer for three months, improved the app, and eventually won! Winning Pioneer meant access to Pioneer’s accelerator program, a $20K investment, and a round-trip ticket to SF. But more importantly, it opened my eyes to the power of no-code / low-code tools. With barely any programming experience, I built a real product that attracted venture capital investment from a top VC. It also inspired me to look for other problems no-code tools could solve and ultimately found Whalesync.

Rather than opine about the merits of building side projects, I thought a more helpful way to share would be a tactical guide on how I actually built the app. Below is a step-by-step guide to create a Slack app using only no-code / low-code tools. If you’re thinking about building something but don’t know where to start, I hope this will illuminate just how achievable it is with low-code.

The Slack app
The Slack app

The Stack

These are the key tools that make up the end product. Below I’ll walk through how they all piece together.

The Low-Code Stack
The Low-Code Stack

⚒️ Building the Product

The Stack

Glitch

Let’s assume you have an idea already for a Slack app you want to build. Maybe a bot that lets employees submit help requests.

Regardless of the idea, Glitch is a great place to start. Glitch is an online code editor that acts as a Node.js Proxy/Auth Backend and lets you deploy code immediately. If that last sentence was a bit scary, don’t worry, all it means is that Glitch enables you to write code in your browser, and it handles the rest. With Glitch, you can literally have a full-stack web app live in minutes.

Glitch is especially great for our purposes because they’ve partnered with Slack’s developer relations team to create app “blueprints,” which can be copied and used as starting points for your app. For someone like me who was very new to writing code, this allowed me to focus on the new features in my app instead of writing boilerplate code.

For the “help bot” idea mentioned above, you could start with Slack’s help-bot-workshop starter kit. I personally started with the slack-slash-command-and-dialog blueprint. To copy a project in Glitch, you simply need to click the project's name in the top left-hand corner and select “Remix Project."

Remix project in Glitch
Remix project in Glitch

You can also check out the other platforms Glitch has created starter kits with here, including Trello and Spotify. These blueprints provide a jumping-off point to get a basic Slack app live quickly.

Slack API

A huge benefit of Glitch’s Slack blueprints is they come with a README that explains how to set up your app in Slack using https://api.slack.com/apps.

README for Slack Blueprint in Glitch
README for Slack Blueprint in Glitch

I won’t go into too much detail here because the README setup guide is pretty thorough, but I essentially just followed the steps they laid out.

By following the steps above, you can create a live app. You’ll then want to select “install your app to your workspace.” Once you’ve done that, their blueprint app should be working in your Slack workspace. You now have a Slack app deployed and usable! 💥

Slack API’s “my app” page
Slack API’s “my app” page

Now that the basics are working, you can start to customize your code in Glitch and build out your app’s features. This is the main “code” part of this “low-code” app. For Referralboard, I added key features such as the ability to submit referrals directly in Slack and confirmation messages whenever an employee earns points.

Slack’s API documentation is definitely helpful here. Still, I’d recommend checking out a few more of the Glitch blueprints to quickly get a feel for how Slack recommends writing certain features.

Block Kit Builder

Eventually, you’ll want to design the look and feel of the messages that your Slack app sends. For example, with Referralboard, I wanted the weekly “leaderboard” post to cleanly display which user had earned the most points.

Weekly Leaderboard message in Slack
Weekly Leaderboard message in Slack

Although there’s lots of information displayed in the above message, Slack makes it really easy to experiment with different configurations using a visual editor called “Block Kit Builder.

Eg. “block” of Slack message code
Eg. “block” of Slack message code

All Slack messages consist of “blocks” of code of different types. For example, a “section” might have “text” and an “image” separated by a “divider.”

Using Block Kit Builder, you can drag and drop different elements to your liking, and the code will automatically generate. For Referralboard, I designed my messages in Block Kit Builder and then copy-pasted the code into Glitch.

Slack’s Block Kit Builder
Slack’s Block Kit Builder

Airtable

Once the app's basic features were working and the messages were designed, I needed a database to save the actual data generated by my future users. Airtable is a great way to quickly get a DB up and running for an MVP.

If you’re unfamiliar with Airtable, it’s essentially an online spreadsheet with an API. Using the graphical interface, you can create and configure a schema. Below is a snapshot of the DB used for the Referralboard MVP. The table includes employees, their company, total submitted referrals, and who they referred.

The “Employees” table of the DB in Airtable
The “Employees” table of the DB in Airtable

Once you’ve configured your schema, Airtable has a nifty feature where your Airtable base provides its own API to create, read, update, and delete records. For each of those actions, it generates code which you can also copy and paste into Glitch and then customize to your needs.

Airtable Standard API
Airtable Standard API

Uptime Robot

One small, helpful additional tool I’d recommend is Uptime Robot. It’s completely free, easy to set up, and will email you immediately if your app ever goes down.

Once you make an account, all you need to do to get started is select “Add New Monitor”, then choose “HTTP(s)” as the Monitor Type and include the URL of your Glitch project as the URL.

Setting up an UptimeRobot monitor
Setting up an UptimeRobot monitor

  • Note — make sure you’re grabbing the Live App URL in Glitch as opposed to your project page. To find that URL, click the “Share” dropdown in Glitch and toggle “Live App”.
Getting the link to your Live App in Glitch
Getting the link to your Live App in Glitch

Once set-up, you’ll have an uptime dashboard like the one below.

UptimeRobot dashboard
UptimeRobot dashboard

Zapier

One more tool I utilized for Referralboard that may be useful for you (depending on what your app does) is Zapier.

For Referralboard, I wanted the results of the referral leaderboard to be sent automatically as a message in Slack each week. To accomplish this, I set up a pretty simple Zap.

Every Wednesday, Zapier sends a POST request to my app, which kicks off a message to every team that is signed up for Referralboard.

Setting up a Webhooks by Zapier Zap
Setting up a Webhooks by Zapier Zap

If you have familiarity with webhooks, the “Webhooks by Zapier” app and “POST” action event are pretty straightforward. Although this app is a “premium” zap, you can test it out for free in Zapier before paying for it.

Summary

There are dozens of other tools and setups you can use to accomplish a similar goal. Still, hopefully, this illuminated one path to develop, design, deploy and monitor your own Slack app. Obviously, time and effort are required to take the above tools and turn them into a great product, but I hope the infrastructure piece is a bit easier with this guide.

ABOUT THE AUTHOR
Matthew Busel

Matthew is the co-founder of Whalesync. He's been a no-coder since the ancient days of Wordpress and thinks a lot about product.

Want more?

Stay up to date with the latest no-code data news, strategies, and insights sent straight to your inbox!

Awesome! Excited to share our best tips and thoughts.
Oops! Something went wrong while submitting the form.