Sometimes the hardest part of learning a new tool, system, or skill is sitting down and starting. Fortunately, we’re here to give you a nudge. Whether you’re a founder trying to build out an MVP or someone exploring and researching what’s even possible on Bubble, you can start to get a feel for how Bubble works and what it’s capable of in just 10 minutes.
In this how-to, Bubble co-founder Josh Haas demonstrates step-by-step how you can build a simple to-do list app in 10 minutes. In less time than it takes to watch an episode of your favorite show, you can set up a database, frontend UI, and custom logic to help you get familiar with the speed and power of Bubble.
Grab your beverage of choice, get settled, and follow along in your own editor.
Step-by-step instructions on building a to-do app on Bubble
It’s OK if you have to pause or slow down the video tutorial as you familiarize yourself with navigating the Bubble editor. To help, we’ve spelled out each instruction, step by step.
1. Set up your data schema (1:02)
When you open your Bubble editor, you’re dropped into the design tab by default. Start by clicking the data tab in the left navigation. This is where you define your Bubble app’s data.
Create a New type called “To-do” to track your pre-defined to-dos. Click Create a new field to add fields to each to-do. In the create a new field popup, add a new Field name called Content. Select text from the field type dropdown. Click Create. Click Create a new field again to add a new Field name called Done? and select yes / no from the field type dropdown. Click Create.
Congrats! You’ve created a simple data schema.
2. Define your pre-populated to-dos (1:54)
Click the app data tab to the right of the data types tab to create a sample list of pre-populated to-dos. Create three sample to-dos called “To-do 1,” “To-do 2,” and “To-do 3.” You can rename these later.
Awesome! Now you have a few example to-dos in your app.
3. Build your frontend (2:17)
Click back to the design tab in the left navigation. It’s time to build your user interface (UI) – this is how users will interact with your app.
Drag and drop a repeating group onto your blank slate. You may need to scroll down or search to find this element.
Now, we’ll specify what gets displayed in this repeating group list. Click Appearance > Type of content > To-do. Then, Data source > Do a search for > Type > To-do > Close. Scroll down in the appearance tab and uncheck Set fixed number of rows. This will make sure you can display lots of data in your repeating group. You can optionally play with height dimensions here, too. (Josh doesn’t do this until 9:49, but it makes sense to configure during this step, if you want.)
Now, we’re going to customize what appears in our repeating group. From the elements tree, drag and drop the text element into your repeating group. Click Appearance > …edit me… > Current cell’s to-do > ‘s Content (3:04).
Next, we’ll add an icon that indicates whether the to-do is outstanding. Drag and drop the Icon element into your repeating group. Click Appearance > Icon > [choose your icon]. You can use the search bar to narrow your options. For example, type “circle” to select an open circle icon. You can also rename your icon to make it easier to identify later and, if you want, customize your icon color.
Now, we’ll want to show a different icon that indicates whether the to-do is complete. Click Conditional > Define another condition > When > Current cell’s to-do > ‘s Done? > is yes > Select a property to change when true > Choose an icon > check > Select a property to change when true > Icon color > green. (3:41)
Click the ON / OFF to preview the icon toggle.
Click the Preview button in the upper right to preview your work so far. Nicely done!
4. Define how your to-do behavior works (4:37)
Return to your editor. It’s time to make your app work!
From your icon property editor, select Appearance > Add workflow to head to the workflow tab. This is where we’ll build our app logic. Select Click here to add an action > Data (Things) > Make changes to a thing > Thing to change > Current cell’s to-do > Change another field > Done? > “yes” (5:03)
To check that your workflow is configured correctly, preview your app again (or refresh your preview tab if it’s still open) and try clicking on your icon.
Great job! You’ve connected a database, logic, and a user interface — all the basic elements of a web app.
5. Create a way for users to add to-dos (5:42)
Now, let’s make a way for users to create their own new to-dos. From the design tab, drag and drop the group element onto the top of your page. Click Appearance > Define each border independently > Border style - bottom > Solid to style a basic header. (5:50) We’ll add our app name and a button to this header.
Drag the text element into your group and edit the text so it says To-do App. Click Style Attribute > Heading 3 to make your app name more visible. Drag the button element into the other side of your group and edit the text to “New To-do.”
We want a popup to appear when a user clicks the New To-do button. To create this, drag and drop the popup element onto your page. (6:53) Then, drag the multiline input element onto your popup. Edit the placeholder text to: “Write the text of the to-do here.” Drag and drop a button element onto your popup and rename it “Add To-do.”
Nice! You’ve made the UI for your app — but now we need to finish the logic.
6. Finish your app logic (7:42)
Click your Add To-Do button and select Add workflow to jump to the workflow tab. When your button is clicked > Click here to add an action > Show an element > Element > Popup A.
Head back to the Design tab and select your popup from the elements tree (8:08). Click your Add To-do button > Add a workflow > Click here to add an action > Data (Things) > Create a new thing > Type > to-do > Set another field > Content > [select your multiline input] > ‘s Value.
Once we’ve created the new to-do, we want to clear the input so we can use the input again, and then hide the popup. Select Click here to add a new action > Reset relevant inputs > Click here to hide a new action > hide an element > Element > Popup A.
Hit Preview or refresh your Preview tab. Try creating a new to-do and adding new to-dos to test your logic.
You did it! You created an end-to-end, functional to-do app. Time to throw yourself a dance party!
Recap: Q&A with Josh
We just covered a lot — not only did you build out the core components of a web app, but you got a pretty full tour of the Bubble editor and its multitude of functions along the way. Here's a summary of the Q&A that followed Josh's live session from our inaugural How to Build Day:
You mentioned “MVP” – what is that?
Josh: “MVP is a term that comes from the startup community. It's building the minimum thing you need in order to start testing your product with real customers and see if you have something that's actually useful to people — that's sort of the core concept of the MVP.
Bubble is a really cool way of building an MVP because in the old days, you would use a prototyping tool, design a prototype, get an engineering team, have the engineering team build out a V1, and then often do painful refactoring to get production ready. In Bubble, it's a seamless process. The process of building the prototype is the same as building the MVP. And because you're building on top of our platform, it's already production ready. So we collapse all those stages and you can just go off to the races and kickstart whatever you're trying to create.”
When do you consider an MVP to be complete, and how do you know when you're ready to move on to the next phase?
Josh: “My experience as a founder is that you want to get things in front of your actual users as soon as possible, which usually means when you're a little bit embarrassed by what you've built. As soon as you have something that's usable at all, something that you could imagine someone completing an end-to-end task with — even if it's rough, even if it's bumpy, even if it's not what you envision — I would declare the MVP phase “done” and enter the feedback and iteration phase with actual people using your software.”
In what situations does it make sense to use a Repeating Group?
Josh: “You can think of a repeating group as a list. So whenever you have a thing in your application where you're trying to display many of the same things with a common template, that's when you go to a repeating group. We also have a table element, which can be used for similar situations, but where you need columns as well as rows.”
Could you share more about Bubble’s API connector?
Josh: “Bubble can connect to pretty much everything out there under the sun. Before you grab the API connector, search for plugins because there's a good chance someone else has already built the API connection you're looking for and you can just click and one-button install it.
But if there isn't a connection to the API you're looking for already, we have a special plugin called the API connector that's a no-code interface for connecting to any API out there, and it'll walk you step-by-step through putting in the URL for the API and configuring the connection to get data into your application.”
Any advice on how you recommend using Bubble documentation for those who are new to Bubble?
Josh: “Different people learn differently — we have a variety of ways to get into Bubble. We have full written documentation for people who like to read the manual. Other people are very video or visually driven. And if you go to bubble.io/academy, you can see an amazing collection of videos that we've built up over time. We also have interactive lessons that let you click through an app step-by-step. If you know how you like to learn, gravitate to the method that matches your personal learning style. And if you're not sure, try a few and see what seems helpful.”
