Bubble Docs

Building Your First App

Learn basic principles for building on Bubble and get ready to put things into practice with this step-by-step tutorial for building your first application.
Our Academy course on how to build your first application

Building your app

Establish the visual structure

While each user will have their own habits when building on Bubble, the general approach is to start by establishing the application's visual structure, and then define the workflows that program it. The visual structure is going to be the set of pages and core elements you need your users to interact with, such as inputs, buttons, etc, while workflows are events that trigger a series of actions. For instance, a click on a button is an event. It's easier to think about these events and their actions once you already know which buttons and inputs are needed on the page.

Draft the visual structure on paper

It is usually a good idea to start drafting what your application will look like and what it will do on paper. Our experience shows it is worth the time to draw the few key screens on paper, with the necessary elements on each of them, and then draft the workflows, action by action. Once you have this, designing the actual application will be much faster and more natural.

Define a basic data structure

The next dimension of building on Bubble is the data structure. In order for your app to run, you and your users will rely on a data structure that lets them create, read, update, and delete data. If you were building a basic version of Instagram, you would have Users and Posts. Your users might have a name, a description, and a location, while your posts might have a title, a description, and a photo.

Think about what else you need

Lastly, it is very likely your app will rely on external services to function, such as payment solutions, data providers, etc. This is done through plugins or your app's API. You should worry about these after your initial visual and data structure is clear. With that being said, here is a list of things you should ask yourself as you're building:
  • How many pages your app needs. For instance, Facebook has a home-feed page, a home page when logged out, a profile page, a settings page (at least in an earlier version of Facebook...).
  • How users navigate between pages, and under which circumstances.
  • What kind of data your app will store. If it's a rental market place, you'll have, in addition to users, apartments, reviews, etc. An apartment will have an address, some pictures, etc.

Iterate as you go

Note that building an application is an iterative process. Most users start by designing a wireframe of the page with the first elements and a simple layout, move to the workflow part to set basic behavior, and then move back to the design part as they have a better sense of the elements they need. As your app grows and you refine the product, add features, etc., you will also be modifying the design, the workflows and the data structure.
Because Bubble is very open-ended, you will very likely make some mistakes as you are building your application, as you would sometimes make mistakes in an Excel formula. This is part of the programming process. Bubble offers a few tools to help you debug and fix your application.

Running your app

Building is only one facet of Bubble's power. Once you have built the first version, you will run it with real users and real data. When your app is in production, i.e. used by actual users, you will be able to monitor it to make sure everything is working as expected. Again, Bubble has a few monitoring tools and logs to help you with that. When an app is running, we call that Run-mode.

Using paid features

Some features may only be accessible on paid plans. You can review the plans differences here. All features are accessible in the Editor, but will not work in Run-mode if your plan does not allow the feature. A warning is usually displayed next to the feature if your current subscription does not cover it.