A Hands On Guide to Building a Low-Code Product (Part 1)

TLDR

I’m the maker of a Slack app called Referralboard (we helps companies save money on hiring by increasing employee referrals).

This is a hands-on look into how I built the MVP using a low-code stack. It covers the tools used for building not only the app, but also the company website which together formed the initial product.

If you’re trying to go from idea → product, my hope is that this guide will be helpful for you.

End result:

Image for post
Image for post
Image for post
Image for post

What Does This Guide Cover?

This is a hands-on guide for building a low-code Slack app. It covers the tools and resources to go from idea to MVP.

  1. ⚒️ Building the Product (Part 1)
  2. 🖥️ Building the Website (Part 2)

The Stack

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

Image for post
Image for post
The Low-Code Stack

⚒️ Building the Product

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. It’s an online code editor that acts as a Node.js Proxy/Auth Backend and let’s you deploy code immediately. You can literally write code in your browser and have a full-stack Node web app live in minutes.

What’s especially great about Glitch for our purposes, is that they’ve partnered with Slack’s developer relationship team to create app “blueprints” which can be copied and used as starting points for your app. 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 name of the project in the top left-hand corner and select “Remix Project”.

Image for post
Image for post
Remix project in Glitch

(You can also checkout the other platforms Glitch has created starter kits with here including Trello and Spotify.)

Using Glitch and Slack blueprints, you have a jumping off point to get a basic Slack app live quickly.

Slack API

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

Image for post
Image for post
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.

Once the app is live following the above steps, you’ll want to select to “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! 💥

Image for post
Image for post
Slack API’s “my app” page

Once 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, but 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.

Image for post
Image for post
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”.

Image for post
Image for post
Ex. “block” of Slack message code

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

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

Image for post
Image for post
Slack’s Block Kit Builder

Airtable

Once the basic features of the app 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 get a DB up and running quickly for an MVP.

If you’re not familiar 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. It’s a table of employees, what company they work for, the total number of referrals they’ve submitted, and who they’ve referred.

Image for post
Image for post
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 destroy records. For each of those actions it generates code which you can copy and paste into Glitch and then customize to your needs.

Image for post
Image for post
Airtable Standard API

Uptime Robot

One small, but 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.

Image for post
Image for post
Setting up an UptimeRobot monitor

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

Image for post
Image for post
Getting the link to your Live App in Glitch

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

Image for post
Image for post
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’s signed up for Referralboard.

Image for post
Image for post
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 ever paying for it.

Summary

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

🖥️ Building the Website (Part 2 coming soon…)

Stack →

Written by

Maker of https://www.referralboard.app/ | Author ofGame Changer: How Augmented Reality Will Transform the World of Sports | PM @ MakeSpace

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store