Learn BUBBLE with Real Code Examples

1. Create a new app in Bubble and design the UI with Input field, Add button, and Repeating Group for the list.
2. Set up a database table 'Todo' with a text field for tasks.
3. Configure workflows:
    - Add button -> create a new entry in 'Todo' table.
4. Bind the Repeating Group to display items from the 'Todo' table.
5. Configure optional delete/edit workflows for each item.
6. Preview live and publish as web app or PWA.

Demonstrates a simple Bubble app with a Todo list, adding tasks and displaying them using Bubble's visual editor and workflow automation.

1. Design UI with Text element showing current count and buttons '+', '-', 'Reset'.
2. Create a numeric field 'Count' in the database or as a custom state.
3. Configure workflows:
    - '+' button -> increment 'Count'.
    - '-' button -> decrement 'Count'.
    - 'Reset' button -> set 'Count' = 0.
4. Bind Text element to display 'Count'.
5. Preview live.

Implements a counter using Bubble visual elements and workflows.

1. Design UI with Inputs for email and password, and buttons 'Login' and 'Signup'.
2. Use Bubble's built-in User database.
3. Configure workflows:
    - 'Signup' -> create new User.
    - 'Login' -> authenticate User.
4. Show alerts on success or error.
5. Redirect to dashboard page after login.
6. Preview live.

Implements login and signup forms with Bubble's authentication system.

1. Design UI: Input for new note, Add button, Repeating Group for notes.
2. Create 'Note' table in database with a 'Content' field.
3. Configure 'Add' workflow -> create new 'Note' entry.
4. Bind Repeating Group to display 'Note' entries.
5. Optional delete/edit workflows.
6. Preview live.

Displays and manages notes using Bubble's database and Repeating Group.

1. Design UI with two Inputs for numbers, buttons '+', '-', '*', '/', and Text element for result.
2. Configure workflows:
    - Each button performs corresponding calculation and sets result in Text element.
3. Preview live.

Implements a simple calculator using Bubble inputs and workflows.

1. Design UI: Input for city, Button 'Get Weather', Text elements for temperature and condition.
2. Configure API Connector with weather API.
3. Configure workflow: Button -> call API -> set results in Text elements.
4. Preview live.

Fetches and displays weather info using API Connector and Bubble workflows.

1. Design UI: Repeating Group with Image element.
2. Connect data source: Database table or API with image URLs.
3. Optional 'Add Image' workflow to append images.
4. Preview live.

Displays images from database or API using Bubble Repeating Group.

1. Design UI with Switch element and page background/text elements.
2. Create custom state 'isDark'.
3. Configure Switch workflow -> toggle 'isDark'.
4. Bind colors of elements to 'isDark' state.
5. Preview live.

Switches between light and dark themes using custom states and workflows.

1. Install QR Scanner plugin.
2. Design UI: Button 'Scan QR', Text element for result.
3. Configure workflow: Button -> start scanner -> save scanned data in custom state.
4. Bind Text element to display scanned data.
5. Preview live.

Scans QR codes using device camera and displays results using Bubble plugins.

1. Design UI: Inputs for event details, Button 'Book', Repeating Group for bookings.
2. Create 'Booking' table in database.
3. Configure workflow: Button -> create new 'Booking' entry.
4. Bind Repeating Group to display bookings.
5. Optional delete/edit workflows.
6. Preview live.

Manages event bookings using Bubble database, forms, and workflows.