How ToDoBot was built in three days
Spinning up a Slack app with Block Kit, home tab, and more
Day 1
Idea
Slack recently released the app home tab — a new app surface in Slack where you can create advanced UI using Block Kit. We decided to use it as an admin dashboard for OneBar.
A few days before I told Andrew, my co-founder, I like how Apple products seamlessly integrate together. It’s magical to be able to draw a note on the iPad and then see it immediately on my Mac — I wish I could see those notes on every platform.
One app that works consistently across all my devices is Slack, so I often find myself using it as a simple notes app often. When in a rush, I DM myself notes I want to access elsewhere and then move them to a more appropriate app later. My DM also serves as a mini-ToDo list. But what if it was more convenient? What if I could mix it up with the home tab?
Block Kit Builder
Slack has a beautiful tool for prototyping interfaces called the Block Kit Builder. After twenty minutes of tinkering, we had an idea of how the ToDo app would look in the home tab in Slack.
A classic app like this would have checkboxes to the left of the ToDo items. (After submitting this article, Slack released checkboxes!) Unfortunately, we couldn’t implement them in ToDoBot right away due to a few limitations. Specifically, you can’t combine more than two elements in a row, and if you have checkboxes, you can’t have any extra buttons next to an item. Our ToDos have multiple actions associated with them (i.e. edit, share, set reminders, etc.) and we couldn’t find a better place for them to live (for now). We found some great use for emojis, though, and now they actually mean something!
👉🏻 is a “regular” ToDo
⏱ for ToDos with a reminder
🔥 means that a ToDo has expired
✅ for completed items
Choosing a name
This is arguably the hardest part of building anything.
Todoist? Nope, already exists. Checker? Chckr? Todo-ninja? Todo-panda? Todofu? Todobot!? Todobot sounds pretty good! Let’s see if there are any domain names available! Ughh… all .coms are taken, there’s something ugly in .org and .net, there’s also an odd todOObot.com… It seems like we have to go with a prefix…
thetodobot.com or gettodobot.com? Let’s get both of them!
Infrastructure
It’s not worth setting up Kubernetes for a small project like this, but we already run OneBar on it. Also, Bolt (a first-party tool for coding Slack apps in JavaScript) was meant for apps like ToDoBot, but we already use Django — no time to learn NodeJS! The stack was set.
The rest of our first day building was spent setting up webhooks, configuring SSL, defining database schema, and putting together the rest of our Slack app’s plumbing.
Day 2
Coding
We spent all of day two coding the bot logic. We’re going through an acceleration program with OneBar right now, and it’s pretty intense. ToDoBot was an experimental side-project, so we worked on it in-between meetings, customer calls, while commuting, and late in the evening.
Here’s a brief mention of a few Slack API features that we used:
- app_home_opened — Slack sends this event every time someone opens the ToDoBot’s app home. We react to it by sending back a bunch of JSON that represents the current state of a person’s todo list.
- views.update — This is how you actually update the app home. We do it reactively when someone opens the home tab or proactively when we know on the backend that the state has changed for a given user.
- messages.im — We receive this event every time someone sends a DM message to the ToDoBot. Then, we then simply add every message to the list and acknowledge it with an emoji.
- reactions.add — This is how you react with an emoji.
We’ve also registered a /todo slash command, “Add to my ToDo” message action, and implemented a few simple modals for adding and editing items.
On the second day, came the idea of shared ToDos. We tagged each other in messages all the time, hoping the other person didn’t forget to do what we asked them. This naturally translated into tagging people in ToDos. A shared ToDo could appear in each person’s app home tab, and anyone mentioned would be able to close it. We started using shared ToDos for our own needs, way before ToDoBot was completed. We were hooked!
Day 3
Debugging
By the third day, most app mechanics were complete, though there were still a few issues. I spent several hours debugging this one. Even though ToDoBot is super light-weight and there was no load on the server, our gunicorn workers were dying left and right, and the app was behaving unpredictably. Turns out, the AWS ELB we had in front of the app tried to maintain and reuse the same connection when possible. This didn’t play well with the sync workers that we used by default. It took time to untangle, but simply tweaking the timeouts helped.
An interesting observation while debugging the gunicorn issue — our servers received quite a bit of traffic already, though the domain was brand new and nobody knew about us yet. Our ELB happened to get an IP address that’s constantly poked by security scanners somewhere in Russia. Check this out…
Website
We wanted to submit our app to the Slack App Directory, so we needed a landing page. Our designer created a few images and crafted us a standard single-page layout. Andrew then implemented everything in Webflow.
Day 4
App Directory review
There was some back-and-forth with the review team.
First, they pointed out that we requested the commands OAuth scope, but didn’t actually use it. I had forgotten to include it in the OAuth link.
Next, they asked us to add a reaction to /todo help since it’s the default way people learn about slash commands.
We tried to react to comments as soon as they came back. By lunchtime, ToDoBot was live in the App Directory.
Final touches
Before launching publicly, we shared our Slack app with some of our friends, and of course, they immediately found bugs and inconsistencies.
For example, Joe from Unmeeting pointed out that the app said “home tab,” or “Something has been added to your home tab,” yet he didn’t know about the “home tab.” So we added a short welcome message for users on their first interaction with the app.
Product Hunt launch
By late evening, everything was ready for a public launch. We tested with our friend (Michael), scheduled the launch, and waited patiently. As soon as our app hit the front page, we started seeing consistent traffic. We finished 6th, which was ideal considering our low effort and small product.
Today, we’re averaging at one signup per hour. I think it’s a success!
Finale
We have 200+ signups and ~3,000 ToDos created. At least one team is using it actively — OneBar team! Of course, we’re biased as makers, but we found that ToDoBot naturally fits into our work.
We’re already considering a codebase makeover and eventually open-sourcing the ToDoBot. Would you be interested in contributing?
It was refreshing to build something so quickly, especially after being bogged down by never-ending bugs and features of a bigger product. So, if you’re feeling burnt out, you should definitely consider completing a small project like this.
Slack is hosting an online hackathon in March, and I highly recommend everyone apply!
