This tutorial covers how to build a revenue-generating app on Bubble.io from scratch. Most Bubble tutorials show you how to make something that works. This one focuses on what actually makes an app profitable: the design principles, the database structure, and the mobile-first thinking that separate apps that generate income from apps that get abandoned.
By the end, you will have built a working mobile music streaming app with search functionality, a connected database, and a clean UI ready for real users. The same principles apply whether you are building a SaaS product, a marketplace, or any other app on the platform.
Getting started with Bubble.io
Go to Bubble.io and sign up for a free account. You can build and test your entire app on the free development tier before paying for anything. When you are ready to launch, Bubble offers paid plans at different levels, but there is no reason to upgrade until your app is functional and tested.
Once your account is created, install the Canvas by Air Dev Chrome extension. It has a library of pre-built UI blocks with over 6,000 users and significantly accelerates the build process. Rather than designing from scratch, you pull in professionally styled components and customize them for your use case.
Setting up your first page
With the Canvas extension installed, search for "mobile menu" in the extension library and add a new page. When you hit the preview button, Bubble opens a live preview of the app. On first load, you may not see the mobile navigation because the debugger panel at the bottom is covering it. Remove the debug mode from the URL temporarily to see the full layout.
Since this is a mobile-first app, right-click and open Chrome DevTools to inspect the page in mobile view. This is how you will build and test throughout the tutorial. Switch between device sizes to make sure your layout holds across screen widths before moving on to the next section.
Using the Bubble debugger
The debugger is one of the most useful tools in Bubble and one of the most overlooked by beginners. Re-add the debug mode to your preview URL to enable it. The debugger gives you two things: a dropdown of every element currently on the page, and a step-by-step view of the workflow that runs when a user interacts with anything.
Click on any element in the preview with the debugger active and step through its workflow. You will see exactly which conditions evaluated to true or false and which actions fired in sequence. For troubleshooting bugs or understanding inherited behavior from template components, the debugger is faster than reading the editor.
Understanding the elements tree
Every Bubble page is structured as a hierarchy of elements: groups inside groups, with popups, headers, and the page itself sitting at the top level. This is called the elements tree and it works similarly to the layer panel in tools like Webflow or Figma.
Each element in the tree has its own appearance settings (color, border, layout, padding), data settings (type of content, data source), and conditional logic. Conditions in Bubble are powerful: you can say "if the current user is logged in and their account status is active, change this element's text to Welcome." That logic lives on the element itself, not in a separate file, which makes it fast to build but important to organize carefully as your app grows.
Building the search bar
The first feature any music streaming app needs is search. Open the Air Dev extension, click "View Full Library," and find a search page layout that fits your visual direction. A dark background with a filter sidebar works well for a music app. Add the search page as a new page in Bubble.
Once the layout is added, customize the page title and background color. For a clean, modern look, change the entire background to black and the text to white. Remove any default borders that look out of place by selecting the group, going to style settings, and setting borders to none. You can change all border sides at once or individually depending on what you need to remove.
Setting up the database
Bubble has three primary views: Design, Workflow, and Data. Switch to the Data view to set up your database. For a music app, you need two data types: Song and Artist. Create both, then set up the relationships between them.
On the Song data type, add a field for the artist (referencing the Artist data type) and a field for the title (text). On the Artist data type, add a songs field as a list, since one artist can have many songs. This referential structure is what allows you to display an artist's name when showing a song, and to show all songs by an artist when viewing a profile.
To populate the database quickly, use ChatGPT to generate a list of fictional artist names and song titles, then export them to a CSV file. In Bubble's Data view, use the CSV upload tool under the Song data type, map the columns to the correct fields (artist to artist, song title to title), validate the data, and upload. Your database now has real content to work with.
Displaying data with repeating groups
Repeating groups are the core building block for any list in Bubble. They display a collection of data objects using a single cell template that repeats. Think of it as a for-each loop rendered visually.
Add a list component from the Air Dev library and place it in your main content group. Set the repeating group's data type to Song and remove any default filters so it shows all songs. Then drill into the elements tree until you reach the text element inside the repeating group cell, and set its content to the current cell's song title using Bubble's dynamic data selector.
The most common mistake beginners make here is setting the data type on the repeating group but forgetting to match the data type on every group that wraps the text element. Every group in the hierarchy between the repeating group and the text element needs to have its type of content set to Song. Once that is correct, the dynamic data options will populate correctly and the list will display your song titles.
To also display the artist name, navigate to the same text element, use the dynamic data selector, and choose "parent group's Song's artist." This pulls the artist name from the related Artist record without any additional database queries.
Wiring up the search workflow
With the list displaying all songs, the next step is making the search bar actually filter results. Go into the repeating group and add a conditional: when the search input's value is not empty, change the data source to a filtered search where the song title equals the input's value.
This pattern, filtering a repeating group based on an input value using a conditional data source, is one of the most frequently used patterns in Bubble. Once you understand how it works, you can extend it to filter by multiple fields, apply partial text matching, or layer additional conditions like genre or release date.
Optimizing for mobile
Before considering your app ready, test it thoroughly on mobile. Go to your preview page, right-click, and inspect. Switch to device emulation mode in Chrome DevTools and test across multiple device sizes: Pixel 5, Samsung Galaxy S8, and a tablet view at minimum.
Common issues to check: text that is too close to the edges (fix with padding), elements that overflow their containers on smaller screens, and load speed on simulated low-end mobile connections. Chrome DevTools lets you throttle the connection speed to simulate slow networks, which is useful for identifying any elements that are slow to render on real devices.
Adjust padding, margins, and font sizes until the layout looks clean at every screen size. A mobile-first app that looks good on small screens will almost always look fine on desktop. The reverse is rarely true.
What makes a Bubble app profitable
The design decisions that drive revenue in a no-code app are not different from those in a traditionally coded one. Clean UI that guides users toward a clear action. Fast load times, especially on mobile. A database structure that supports the features you need to monetize, whether that is subscriptions, pay-per-use, or marketplace transactions.
Where most Bubble apps fail is not in the technical execution but in the product thinking. Builders spend months on features that users do not care about and skip the work of understanding what users will actually pay for. Build the simplest version that solves the core problem, get it in front of real users, and let revenue data drive what you build next.
Bubble's no-code platform has allowed teams to go from idea to $30K per month in recurring revenue without a single line of traditional code. The platform is capable. The question is always whether the product solves a problem people will pay to have solved.
Newsletter
Stay in the loop.
Practical guides on modernizing and growing your business — delivered monthly.