Learn Bubble - 10 Code Examples & CST Typing Practice Test
Bubble is a no-code web development platform that allows users to build fully functional web applications, including marketplaces, SaaS products, and internal tools, using a visual drag-and-drop interface without writing code.
Learn BUBBLE with Real Code Examples
Updated Nov 23, 2025
Code Sample Descriptions
Bubble Simple Todo App
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.
Bubble Counter App
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.
Bubble Login Form
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.
Bubble Notes App
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.
Bubble Calculator App
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.
Bubble Weather App
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.
Bubble Image Gallery
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.
Bubble Theme Toggle App
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.
Bubble QR Scanner App
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.
Bubble Event Booking App
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.
Frequently Asked Questions about Bubble
What is Bubble?
Bubble is a no-code web development platform that allows users to build fully functional web applications, including marketplaces, SaaS products, and internal tools, using a visual drag-and-drop interface without writing code.
What are the primary use cases for Bubble?
MVPs and prototypes for startups. Marketplaces and SaaS platforms. Internal business tools and dashboards. Customer portals and CRM apps. Web apps with database and workflow logic
What are the strengths of Bubble?
Full-featured web app creation without coding. Highly flexible workflows and database logic. Extensive plugin ecosystem. Ability to create complex SaaS and marketplace apps. Community templates and learning resources
What are the limitations of Bubble?
Web app only; mobile requires responsive PWA or wrappers. Steep learning curve for advanced workflows. Performance can degrade with very complex apps. Limited control over custom code compared to traditional frameworks. Paid plans required for production-scale apps
How can I practice Bubble typing speed?
CodeSpeedTest offers 10+ real Bubble code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.