Use Cases
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.
February 24, 2022
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.
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.
These are the key tools that make up the end product. Below I’ll walk through how they all piece together.
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."
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.
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.
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! 💥
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.
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.
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.”
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.
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.
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.
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.
Once set-up, you’ll have an uptime dashboard like the one below.
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.
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.
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.
Matthew is the co-founder of Whalesync and author of the book Game Changer.
Stay up to date with the latest no-code data news, strategies, and insights sent straight to your inbox!
We keep your data in sync, so you can focus on your product.
Simple setup
Two-way sync
No-code required
.png)
.svg){kind=icon}