• Introduction
• Architecture using URL parameters
• Style system
• Data structure
• Uploaded_Image
• User
• Conversation
• Messages
• Notification
• Pages
• Index (main app page)
• Elements
• Conditional Workflows
• Custom Workflows
• videofeed (TikTok-like video feed)
• Converting your bubble app to a hybrid iOS or Android app and submitting it to the app stores
• Contact

Introduction

• Welcome screen, signup / login
• App navigation bar
• Onboarding flow
• Various UI/UX elements like notification banners, alerts, etc.
• Predefined styles
• Chat/messaging function
• Settings page
• and much more

Architecture using URL parameters

• The template is organized in ‘views’. Each view consists of a floating group.
• By default, all views except the splash screen are NOT visible on page load. Use the 'Elements tree' in the Bubble editor to access groups and elements(make sure the ‘Only show hideable’ is unchecked):


From there, you can select an element and then check the ‘Conditional’ tab to see when an element is visible:

Style system

Avoid setting the layout of individual elements when ever possible and use predefined styles instead. This makes adjusting an app much easier once it gets complex. You can either

• Use 'Edit style' and edit the style for all elements that use it:

• The template also uses BBCode to overwrite the predefined styles in some cases instead of creating multiple very similar stlye, e.g.: changing the text color to white. This allows us to keep the stlye library as minimal as possible. Learn more.

• alternatively, you can also apply conditions on the respective element (i.e. use a condition that is always true, e.g. when index is visible, then text alignment is center):

• Most groups use padding and gap spacing
• Padding left, right, top: 24px
• Gap spacing is dependent on group.

Data structure

Uploaded_Image

User

• favorite images (List of Uploaded_Images): An image is added to the list if the user selects it as a favorite by clicking the heart icon on an image in the image gallery.
• user name: this is automatically set on signup based on the email address

• profile pic: a users profile image

Conversation

• the users associated with a chat conversation
• last modified: when the conversation was last changed. this is used for sorting in the messages overview, and set manually in a workflow when a user creates a new message.

• Search string: holds the user names of all conversation participants as text. this is used for searching for conversation in the messaging feature. The value is set using a backend workflow, every time a new conversation is created

Messages

• the conversation the message belongs to
• the message itself
• a file, if a file was sent instead of a text
• unread by (user): list of users that have not yet read the message. is used to show the notification indicators

Notification

• notification text: the notification text
• unread by (user): add users here when you want to show them the 'new notification' indicator (small red dot)
• related user: Add if the notification relates to an other user

Pages

1. index: This is the main page of the app that hosts all the building blocks.
2. videofeed: a template for a TikTok-like video feed.

Index (main app page)

Elements

• View: Landing / Signup: What the users sees when not logged in. This group has elements and workflows for user signup and login
• View: Home: Once the page is loaded (and the user is logged in), this view is visible.
• View: UI / UX Components: Contains a list of various UX elements and workflows to show them
• View: Messaging: A fully functional messaging / chat feature
• View: Photos: This view provides two options for a picture gallery, incl. workflows for view an image in full size, adding and removing an image to the user's favorites and deleting an image.
• View: Settings: An example settings page

• View: Splash screen: can be shown during page load to present your logo
• View :Onboarding: This is a 3-step onboarding flow you can use to onboard your users
• View: Notifications: Used to show notifications to the users
• View: Image Detail: Used to show an image full screen when clicked on in image gallery.
• FloatingGroup Mobile preview: is used only to preview the template on desktops. you can safely delete this.

• FloatingGroup add to homescreen: this can be used to prompt the user to add the app to their homescreen to behave like a PWA (progressive web app)
• Loading Screen: Can be used while the application is loading (e.g. include workflow steps to show the popup in the beginning of a workflow and hide it at the end of a workflow. In case of a workflow error, the Loading Screen is hidden automatically)
• Group Plugins and HTML
• HTML body background color: dynamically set the body color of the website. This is useful if the app is added to the users home screen as a PWA on iOS with a transparent status bar (see status bar settings below). The element uses condition to change its HTML value if certain views are visible.

• HTML glass effect: CSS code for glass (blurr) effects applied to the loading screen, the nav bar, and the settings screen (top)
• DeviceDetector A (plugin): publishes a state ‘device’ that is either “mobile” or “desktop”, depending on the users device.

• RG|Reverse A (plugin): used to reverse the messages repeating group

Conditional Workflows

Custom Workflows

• The set body background color is mainly used to set the status bar color for PWAs on iOS.

videofeed (TikTok-like video feed)

1. Element: RepeatingGroup video: Data source → search for your video data type


2. Element: HTML video: source src —> needs to point the the URL property of your saved video file (unless you know what you are doing, don’t touch the rest of the code).


3. Workflow: RepeatingGroupVisibilityDetector A Item Became Visible, Step 1 —> needs to point the the URL property of your saved video file (unless you know what you are doing, don’t touch the rest of the code).

Converting your bubble app to a hybrid iOS or Android app and submitting it to the app stores

• As of today, Bubble does not offer a direct way to do this. There are a few workarounds, however. See more infos here: https://forum.bubble.io/t/top-10-options-convert-bubble-io-to-native-app/206330 or my Bubble Mobile Crash Course https://bubblehacks.podia.com/bubble-mobile-crash-course.

Contact