How to Build a Simple Todo App in Under 2 Hours Using Bubble

If you're a solo founder or indie hacker looking to create a simple Todo app, you might think it requires a lot of coding knowledge. But here's the good news: you can build a fully functional Todo app in under 2 hours using Bubble, a no-code platform that allows you to create web applications without writing a single line of code. In this guide, I'll walk you through the process step-by-step, sharing my own experience and the limitations I've encountered along the way.

Prerequisites

Before we dive in, here’s what you need to get started:

• Bubble account: Sign up for free at Bubble.io.
• Basic design sense: To make your app look decent, familiarity with UI/UX principles can help.
• A plan: Know what features you want in your Todo app (e.g., adding, deleting, and marking tasks as complete).

Step 1: Setting Up Your Bubble App

1. Create a New Project: Once logged in, click on "New App" and choose a name for your Todo app.
2. Select a Template: For beginners, I recommend starting with a blank template to keep things simple.
3. Set Up Your Database: Go to the "Data" tab and create a new type called "Task" with the following fields:
   • Title (text)
   • Completed (yes/no)

Expected output: You should have a basic database structure ready to hold your tasks.

Step 2: Designing the User Interface

1. Add Input Fields: Drag an input element onto the page for users to enter their Todo tasks. Label it "New Task".
2. Create a Button: Add a button that says "Add Task". This will trigger the action to save the task.
3. Display Tasks: Use a repeating group to list all the tasks. Set the data source to the "Task" type you created earlier.

Expected output: You should see an input field and a button on your app.

Step 3: Setting Up Workflows

1. Add Task Workflow: Click on the "Add Task" button and create a new workflow that:

   • Takes the input from the "New Task" field.
   • Creates a new entry in the "Task" database with the title from the input and sets "Completed" to false.

2. Delete Task Workflow: For each task in the repeating group, add a delete button that triggers a workflow to delete the corresponding task from the database.

Expected output: Users can now add and remove tasks from the list.

Step 4: Completing Tasks

1. Toggle Completed Status: For each task in the repeating group, add a checkbox. Set it to toggle the "Completed" field when checked/unchecked.
2. Filter Display: You may want to filter the repeating group to show only active tasks or completed tasks based on user preference.

Expected output: Users can now mark tasks as complete.

Step 5: Testing Your App

1. Preview the App: Use the preview mode in Bubble to test the functionality. Ensure tasks can be added, deleted, and marked as completed.
2. Fix Issues: Take note of any bugs or usability issues and address them.

Expected output: A functioning Todo app that you can interact with.

Troubleshooting

• Problem: Tasks don’t appear after adding.

  • Solution: Check your workflow to ensure it correctly saves the task to the database.

• Problem: The checkbox doesn’t toggle the completed status.

  • Solution: Ensure the workflow for the checkbox is properly configured to update the database.

What's Next?

Once you’ve built your Todo app, consider adding more features like user authentication, deadlines for tasks, or even integration with a calendar. You can also explore more advanced features in Bubble to enhance your app further.

Conclusion

Building a simple Todo app using Bubble is not only feasible but also a great way to dip your toes into no-code development. Start by following the steps above, and you'll have a working Todo app in under 2 hours.

If you’re looking for more no-code tips and tools, check out our podcast, Built This Week, where we share our journey of building products and tools that we actually use.