A gamification system in Bubble uses Data Types for points, badges, and levels that update through workflows triggered by user actions. You create a points ledger, define badge thresholds, calculate levels from total points, track streaks using date comparisons, and display everything in leaderboards and progress bars. This drives engagement by rewarding users for completing actions in your app.
Overview: Gamification in Bubble
This tutorial walks you through building a complete gamification system for your Bubble app. You will create data structures for tracking points and badges, set up workflows that award points on user actions, implement badge unlocking logic, build a leaderboard, and display user progress. This is applicable to learning platforms, community apps, fitness trackers, and any app where engagement matters.
Prerequisites
- A Bubble app with user accounts and at least one trackable action
- Understanding of Data Types and workflows in Bubble
- Familiarity with conditional logic and searches
Step-by-step guide
Create the gamification Data Types
Create the gamification Data Types
In the Data tab, add fields to the User type: 'total_points' (number, default 0), 'current_level' (number, default 1), 'streak_count' (number, default 0), 'last_activity_date' (date). Create a new Data Type called 'Badge' with fields: 'name' (text), 'description' (text), 'icon' (image), 'points_required' (number), 'category' (text). Create another type 'UserBadge' with fields: 'user' (User), 'badge' (Badge), 'earned_date' (date). This separates badge definitions from badge earnings for clean querying.
Pro tip: Consider using an Option Set for badge definitions instead of a Data Type if badges are static and admin-defined — Option Sets load faster with zero WU cost.
Expected result: Data Types exist for tracking user points, levels, streaks, badge definitions, and badge earnings.
Build a workflow to award points on user actions
Build a workflow to award points on user actions
Identify the actions worth rewarding — completing a lesson, posting a comment, logging a workout, etc. On each action's existing workflow, add a new step: 'Make changes to Current User' → set total_points to 'Current User's total_points + [points value]'. Also update last_activity_date to Current date/time. For different point values per action, you can use an Option Set called 'PointAction' with attributes for action name and point value, then reference the appropriate option's value in the workflow.
Expected result: Users earn points automatically when they complete designated actions in your app.
Implement level calculation from total points
Implement level calculation from total points
Define level thresholds — for example, Level 1: 0-99 points, Level 2: 100-249, Level 3: 250-499. After awarding points in each workflow, add a step to recalculate the level. Use conditional actions: 'Only when Current User's total_points >= 100 and Current User's current_level < 2' → set current_level to 2. Repeat for each level threshold. To show level-up notifications, add an alert or popup that triggers when the level value changes.
Expected result: Users automatically level up when their total points cross defined thresholds, with optional level-up notifications.
Create badge unlocking logic
Create badge unlocking logic
After each point-awarding action, check if the user qualifies for new badges. Add a workflow step: 'Do a search for Badges' where points_required is less than or equal to Current User's total_points. Then search 'UserBadges' where user is Current User to get already-earned badges. Compare the two lists. If there are badges in the first list not in the second, create a new UserBadge record for each. Display a congratulatory popup showing the newly earned badge icon and name.
Pro tip: Run badge checks in a backend workflow to avoid slowing down the user's action. Schedule it to run immediately after the point-awarding workflow completes.
Expected result: Users automatically earn badges when they reach point thresholds, with a visual notification of each new badge.
Build a streak tracking system
Build a streak tracking system
Streaks reward consecutive daily activity. In your point-awarding workflow, add logic to check the user's last_activity_date. If last_activity_date is yesterday (use ':rounded down to day' for comparison), increment streak_count by 1. If last_activity_date is today, do nothing (already counted). If last_activity_date is more than 1 day ago, reset streak_count to 1. Update last_activity_date to Current date/time. Display the streak count with a flame icon on the user's profile.
Expected result: Users build daily streaks that increment for consecutive days and reset after missing a day.
Display leaderboards and progress bars
Display leaderboards and progress bars
For a leaderboard, add a Repeating Group with data source 'Do a search for Users' sorted by total_points descending, limited to 10-25 items. Display rank (cell index), user name, points, and level. Highlight the current user's row with a conditional background color. For a progress bar, calculate the percentage to the next level: (current points - current level threshold) / (next level threshold - current level threshold) * 100. Use a Group with a nested Group whose width is set to this percentage to create a visual bar.
Expected result: A leaderboard shows top users ranked by points, and a progress bar shows how close the current user is to the next level.
Complete working example
1GAMIFICATION SYSTEM — WORKFLOW SUMMARY2========================================34DATA TYPES:5 User (additional fields):6 total_points (number, default 0)7 current_level (number, default 1)8 streak_count (number, default 0)9 last_activity_date (date)1011 Badge:12 name (text), description (text)13 icon (image), points_required (number)1415 UserBadge:16 user (User), badge (Badge), earned_date (date)1718AWARD POINTS WORKFLOW:19 Trigger: User completes action20 Step 1: Make changes to Current User21 total_points = total_points + [value]22 last_activity_date = Current date/time23 Step 2: Check level thresholds24 If points >= 100 and level < 2 → level = 225 If points >= 250 and level < 3 → level = 326 Step 3: Check badges27 Search Badges where points_required <= total_points28 Minus already earned → create UserBadge for new ones29 Step 4: Check streak30 If last_activity = yesterday → streak + 131 If last_activity > 1 day ago → streak = 13233LEADERBOARD:34 Repeating Group:35 Source: Search Users, sort by total_points desc36 Display: rank, name, points, level3738PROGRESS BAR:39 Width = (points - level_min) / (level_max - level_min) * 100%Common mistakes when building a Gamification System in Bubble
Why it's a problem: Running badge checks synchronously in the main workflow
How to avoid: Schedule badge checks as a backend API workflow that runs immediately after the action completes
Why it's a problem: Awarding duplicate points for the same action
How to avoid: Track completed actions in a separate Data Type or use a 'has completed' field to prevent duplicate awards
Why it's a problem: Not using ':rounded down to day' for streak date comparisons
How to avoid: Always round dates down to day for streak comparison: last_activity_date:rounded down to day
Best practices
- Use Option Sets for static badge definitions to avoid database lookups
- Run badge and level checks in backend workflows to keep the UI responsive
- Store point values in an Option Set so you can adjust them without editing workflows
- Add anti-gaming measures — rate limit point awards and validate action completion
- Display progress feedback immediately after every action to reinforce engagement
- Cache leaderboard data in a scheduled workflow instead of computing it live for every page load
- Start with a simple points + levels system and add badges and streaks incrementally
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm building a learning platform in Bubble.io and want to add gamification — points for completing lessons, badges for milestones, daily streaks, and a leaderboard. What Data Types and workflows do I need?
Add a gamification system to my app. Create data types for points and badges. Award 10 points when a user completes a lesson and 5 points for posting a comment. Add badges at 100, 500, and 1000 points. Show a leaderboard on the dashboard and a progress bar on the user profile.
Frequently asked questions
How many points should I award for each action?
Start small — 5-10 points for minor actions (viewing content, logging in) and 25-100 for significant actions (completing a course, making a purchase). Adjust based on how quickly you want users to level up.
Can I reset points or levels for a new season?
Yes. Create a backend recursive workflow that resets total_points and current_level for all users. Optionally archive previous season data to a separate Data Type before resetting.
How do I prevent users from gaming the point system?
Add rate limits (max points per day), validate action completion before awarding, and use backend workflows for point awards so users cannot manipulate client-side logic.
Should I use a separate PointTransaction Data Type or just increment a counter?
For simple systems, incrementing a counter on the User type works. For audit trails, disputes, or analytics, create a PointTransaction type that logs each award with action, amount, and timestamp.
Can RapidDev help design and build a gamification system in Bubble?
Yes. RapidDev can architect and implement complete gamification systems including points, badges, levels, streaks, challenges, and analytics dashboards in Bubble.
Will gamification increase my app's WU consumption significantly?
Each point award adds one database write (~0.5 WU). Badge checks add searches. For moderate usage (1,000 daily actions), expect 500-2,000 additional WU per day — well within most plan limits.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation