Complete Bubble Developer Course: Build Apps Without Coding

Explore visual elements in bubble, including text, button, icons, links, shapes, alerts, video, html, map, and built-in bubble input, plus plugins and charts, with practical examples.

Explore five bubble containers—group, repeating group, pop up, floating group, and group focus—and learn how to display data, build lists, show overlays, and create tooltips.

Explore input forms including text, email, password, integers, address, phone, date, and more, plus multi-line input, check box, dropdowns, search, radio, sliders, date picker, and file uploads with use-case examples.

Utilize reusable elements like headers, footers, and signup popups to speed up pages and maintain a consistent user interface. Edit and align components, customize logo and colors, and test responsiveness.

Set up workflows to drive app logic and trigger actions such as sign up, login, navigation, and show a popup when the page loads.

Learn to streamline signup flows by reducing inputs, implement show and hide password, and build a reusable new sign up element with remember me and booleans, using Bubble workflows.

Learn to hide and show a password using Bubble workflows and the Reveal plugin, including setting an input ID, dragging the reveal element, and toggling visibility with conditional text.

Explore the data tab as your app's database, creating data types and fields. Manage app data, privacy roles, and files with the file uploader and file manager.

Learn to use styles, reusable visual properties for elements like buttons to keep color, font, size, and borders consistent. Create a rounded button style to be a productive tool.

Install and manage third-party plugins in bubble, choosing free or paid options, filtering by category and type, and using plugins like ionic elements and payment integrations with Stripe or PayPal.

Explore Bubble settings from plan options and the pay-as-you-grow capacity boosts. Configure two factor authentication, password policies, appearance options, domain setup, and SSL for secure apps.

Configure language options, tailor app text, and set SEO meta tags with thumbnails; manage API access, third-party OAuth login, collaboration, and version upgrades in Bubble.

Explore the logs tab to monitor capacity, cpu time, workflow runs, page views, and server logs, and learn how to boost capacity or optimize workflows when maximum capacity is reached.

Build a dating app inspired by Tinder using a provided template or from scratch, and explore variations like campus study buddies, sports fan communities, or travel apps with swipe mechanics.

Build a tinder-like clone called match with sign-in with Facebook, swiping, matches and messaging, plus a mobile profile editor with photos, birth date, and settings for distance, gender, and age.

Start a new Bubble app with a unique name on a blank page, set 980 px width with unticked fixed width, and add an orange gradient header with a logo.

Add a video input, choose YouTube or Vimeo, and plan YouTube embedding. Style text with quicksand, center elements, add Get started and sign in with Facebook, with rounded corners.

Embed a YouTube video in your app by extracting and pasting the video ID, preview playback, and enable auto play, with unlisted videos for restricted access.

learn to add a sign up popup in bubble, create a separate login page, use reusable sign up/login popup, and configure workflow to navigate after sign up.

Set up Facebook login in Bubble by adding the Facebook plugin. Configure the app ID, app secret, and OAuth settings to enable sign-in.

Build a custom app header from scratch with three icons (profile, heart, envelope), arrange them in a fixed-width, centered group, and add a bottom shadow to mirror navigation between pages.

build a single page app by showing and hiding groups to simulate pages, use header icons to navigate index, profile, and message, and color the active icon orange.

Learn to define bubble data types and fields such as first name, birth date, gender, cover photo, photos, and location, then build the profile front end and connect to database.

Design the profile front end with a round cover image, edit info and settings buttons, and form fields for photos, first name, last name, birth date, gender, and about you.

build edit info input fields using a group container, implement a dynamic current user cover image with image uploaders, and create name inputs plus a gender radio option.

Explore building a birth date input using a date selector, switching to a date time picker or date time dropper plugin, and styling editable info group with a done button.

Adjust responsive settings by centering groups, fixing widths, and updating hover to orange to fit a mobile screen, while exploring save options—manual done button or auto-save for profile changes.

Learn how to save user inputs to the database in bubble, using a done button or auto binding, mapping inputs to user fields and handling photos.

Finish the user profile by managing image upload and delete with conditional visibility, then calculate a user's age from birth date using the current date and 365.25 days, rounded down.

Learn to add a success alert triggered by the done button, customize the message, and bind initial content from the current user for profile fields and images.

Learn how to set up auto binding in bubble, including privacy rules and data sources, so user fields like first name and last name update automatically without a done button.

Use custom states on a header to show or hide groups between reusable elements. Pair with conditionals to display edit profile panel and back button, avoid hide and show workflows.

Set up a settings page with max distance and age range using sliders, add a save button and log out, customize colors, and rename groups for clear data binding.

Create a functional settings panel by adding a save button that updates the current user, plus a logout button with hover states and navigation to the login page.

Create a tinder-like swipe deck in bubble using the tinder pile plugin, configure constraints on age, gender, and distance, and filter out the current user.

The Tinder pile plugin limits viewing the current card. Build a custom Bubble solution with a one row by one column repeating group, yes/no controls, and optional swipe plugins.

Add test users, edit profiles, and save changes with alerts, while configuring default max distance, data types, and data entry options, and noting import limits on the free plan.

Learn to implement swipe-based matching by adding likes and matches fields to user data, updating on swipe left or right, and triggering a two-way match when users like each other.

Learn how to create a Tinder-like match popup in Bubble, featuring blurred background, dynamic profile images from the database, and hover-enabled send message and keep playing buttons.

Learn to configure a conditional workflow that shows the match popup only when the current user is in the other user's matches list, then test and adjust data display.

Troubleshoot workflow actions by adding a keep playing button flow to hide the pop up and ensure matches update correctly.

Demonstrates displaying current user matches in a repeating group, setting data source and constraints, and shaping each cell with the match’s name and photo on the messages page.

Explore repeating group layout styles: vertical scrolling, full list, nxt vertical scrolling, fixed number of cells with pagination, and horizontal scrolling. See when to use each in tight spaces.

Select an xt vertical scrolling group for efficient data loading, then group image and text, and add a hover condition to reveal a gray background and center the content.

Create two new data types, message and chat, to enable unique conversations in a dating app; link messages to chats by IDs and build a room page.

Create a new chat when a user taps a cell, using workflows to check for existing chats by sender and recipient unique IDs, and navigate to the room page.

Use url parameters to pass chat id between pages for simple, clean navigation and to filter messages by the current chat's unique id.

Learn to build a tinder-like chat interface in bubble by using the page url chat id to load messages, and add a send input with an icon button.

Learn to build a bubble chat: connect the messages data source to the current chat, create messages with the chat ID, and enable vertical scrolling with scroll to entry.

Test the messenger by auto-scrolling to the latest message on load and after new messages, using workflows and two users to verify chat updates.

Learn to design a messenger interface in bubble by applying background colors with group containers, aligning messages, removing layout gaps, and preparing to add the recipient’s profile picture.

Learn to access user data via URL parameters to display profile pictures in a chat interface, using dynamic search by unique user IDs, with conditional visibility and layout adjustments.

Compare input and multi-line input in Bubble: single-line inputs enforce formats like email or date, while multi-line inputs accept plain text and support line breaks, with different send behaviors.

Set up a notifications workflow to mark messages as read by updating the read field from false to true for messages not created by the current user.

Show a blue 15x15 notification shape only when there is an unread message in a chat by querying messages not created by you and with read set to no.

Test the messaging feature by simulating user conversations between John and Diane, validating notifications, read receipts, and message delivery. Plan to add an unread indicator on the chat icon.

Add a header notification dot by using a conditional that counts unread messages in chats involving the current user, showing the blue dot when unread messages exist.

Implement a send message button in a Bubble app by creating or opening a chat and navigating to the chat room. Hide the popup and pass chat ID and user data.

Test the send message button by matching users. Explore matches and message delivery in chat, with future tweaks like profile pictures and back buttons.

Display the recipient's name and profile picture in the header by fetching the user from the URL via unique id, rendering a circular avatar, and enabling back navigation to messages.

Improve user experience for location prompts by presenting a custom, non-dismissible signup prompt that requires users to click continue to allow location to discover amazing people near you.

Deploy your bubble app from development to live using deployment and version control, manage versions, revert changes, and set a live URL with a unique domain.

Expand your bubble skills by learning about APIs, connecting bubble to third party apps to get or send data, unlocking new possibilities in your development workflow.

Learn to connect external APIs to Bubble with the api connector plugin, configure headers, parameters, and a Json body, and distinguish between data and actions.

Learn what each input in Bubble's api connector means, including call name, authentication options, http methods, headers, body types, parameters, and the importance of initializing calls.

Use the API connector with math.js to convert degrees to radians via a restful API, then read the API documentation to choose get or post.

Switch the api call from get to post, name the api call calculation, and note that no authentication is required while api.math.org identifies the math api subdomain.

Construct and test a JSON object for an API request by defining expr and precision, using strings and numbers correctly, and evaluating results and errors from the external API.

Create a two-way degrees-to-radians and radians-to-degrees converter in Bubble, using input fields, pi-based formulas (pi/180 and 180/pi), a swap button, and interactive UI.

Learn to use API calls in Bubble workflows to convert degrees and radians, switch between data type and action calls, display results, and trigger calculations with button clicks.

Learn to monetize a bubble app with Google AdSense by signing up, pasting the ad code via an html visual element, and placing ads to earn from clicks.