# How to Build a Gamification System in Bubble

- Tool: Bubble
- Difficulty: Beginner
- Time required: 25-30 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

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.

## Before you start

- 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

### 1. 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.

### 2. 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.

### 3. 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.

### 4. 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.

### 5. 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.

### 6. 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 code example

File: `Workflow summary`

```text
GAMIFICATION SYSTEM — WORKFLOW SUMMARY
========================================

DATA TYPES:
  User (additional fields):
    total_points (number, default 0)
    current_level (number, default 1)
    streak_count (number, default 0)
    last_activity_date (date)

  Badge:
    name (text), description (text)
    icon (image), points_required (number)

  UserBadge:
    user (User), badge (Badge), earned_date (date)

AWARD POINTS WORKFLOW:
  Trigger: User completes action
  Step 1: Make changes to Current User
    total_points = total_points + [value]
    last_activity_date = Current date/time
  Step 2: Check level thresholds
    If points >= 100 and level < 2 → level = 2
    If points >= 250 and level < 3 → level = 3
  Step 3: Check badges
    Search Badges where points_required <= total_points
    Minus already earned → create UserBadge for new ones
  Step 4: Check streak
    If last_activity = yesterday → streak + 1
    If last_activity > 1 day ago → streak = 1

LEADERBOARD:
  Repeating Group:
    Source: Search Users, sort by total_points desc
    Display: rank, name, points, level

PROGRESS BAR:
  Width = (points - level_min) / (level_max - level_min) * 100%
```

## Common mistakes

- **Running badge checks synchronously in the main workflow** — Searching for badges and comparing lists slows down the user's primary action, making the app feel sluggish Fix: Schedule badge checks as a backend API workflow that runs immediately after the action completes
- **Awarding duplicate points for the same action** — Without deduplication, users can earn points multiple times by repeating or refreshing the action trigger Fix: Track completed actions in a separate Data Type or use a 'has completed' field to prevent duplicate awards
- **Not using ':rounded down to day' for streak date comparisons** — Comparing full date/time values means an action at 11:59 PM and 12:01 AM would count as consecutive days only if the exact timestamps align Fix: 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

## 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.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/create-a-gamification-system-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/create-a-gamification-system-in-bubble