# How to build a rating system in Bubble

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

## TL;DR

Implement a star rating system in Bubble using clickable icon elements that change state on click, storing ratings on records, calculating averages, and displaying aggregate ratings. This tutorial covers building a 5-star UI, recording individual ratings, preventing duplicate ratings, and showing average scores.

## Overview: Rating Systems in Bubble

A rating system lets users score items (products, services, content) on a 1-5 star scale. This tutorial builds the full rating experience from clickable stars to aggregate display.

## Before you start

- A Bubble account with user authentication
- An item data type to attach ratings to (product, article, etc.)
- Basic understanding of custom states and conditionals

## Step-by-step guide

### 1. Create the Rating data type

Create 'Rating' with fields: user (User), item_id (text — the rated item's unique ID), item_type (text — 'Product', 'Article', etc.), score (number, 1-5). On your item data type (e.g., Product), add: avg_rating (number), rating_count (number, default 0).

**Expected result:** Rating data type and aggregate fields on the item type are ready.

### 2. Build the 5-star rating UI

Add a Group containing 5 Icon elements (star icons). Create a custom state 'hover_score' (number) on the Group. For each star (1-5): Conditional — When hover_score >= this star's number → icon = filled star, color = gold. When hover_score < this star's number → icon = outline star, color = gray. On hover: Set state hover_score = this star's number. On mouse leave: Reset hover_score to the existing rating.

**Expected result:** Stars highlight on hover, showing the potential rating visually.

### 3. Record the rating on click

When a star is clicked: check if a Rating already exists (Search for Rating where user = Current User AND item_id = item's Unique ID). If none: Create Rating → score = clicked star number. Then update the item: avg_rating = Search for Rating (this item) :each item's score :sum / count, rating_count = rating count + 1. If exists: Make changes to existing Rating → score = new score. Recalculate average.

**Expected result:** Clicking a star records or updates the user's rating and recalculates the average.

### 4. Display aggregate ratings

On item cards and detail pages, show: avg_rating as filled/partial stars (use 5 star icons with conditional fill based on avg_rating), the numeric average (e.g., 4.2), and the rating_count (e.g., '127 ratings'). For partial stars, use width-based clipping or opacity.

> Pro tip: Store avg_rating and rating_count directly on the item for instant display without running search calculations on every page load.

**Expected result:** Items show their average star rating and total number of ratings.

### 5. Prevent duplicate ratings

Before creating a new Rating, always search for existing: Rating where user = Current User AND item_id = this item. If found, update instead of create. On the star UI, pre-fill the user's existing rating by setting the initial state to their stored score. This shows them their previous rating when they revisit.

**Expected result:** Users can rate once and update their rating, but cannot create multiple ratings for the same item.

## Complete code example

File: `Workflow summary`

```text
RATING SYSTEM — ARCHITECTURE
==============================

DATA TYPES:
  Rating: user (User), item_id (text), item_type (text), score (1-5)
  Item (modified): + avg_rating (number), + rating_count (number)

STAR UI:
  5 Icon elements in a horizontal Group
  Custom state: hover_score (number)
  Hover: fill stars up to hover position
  Click: record/update rating
  Pre-fill: show user's existing rating

WORKFLOWS:
  Rate (new): Create Rating → update item avg + count
  Rate (update): Make changes to Rating → recalculate avg
  Calculation: avg = sum of scores / count

DISPLAY:
  Filled stars based on avg_rating
  Numeric average: "4.2 (127 ratings)"
```

## Common mistakes

- **Calculating average on every page load instead of storing it** — Running a search and calculation for every item in a Repeating Group is expensive on workload units Fix: Store avg_rating and rating_count on the item record. Update them only when a rating is created or changed.
- **Not checking for existing ratings before creating** — Users can submit multiple ratings, skewing the average Fix: Always search for an existing Rating by user + item before creating a new one
- **Using a Repeating Group for the 5 stars** — Repeating Groups add unnecessary complexity for a fixed 5-element layout Fix: Use 5 individual Icon elements — it is simpler and more performant for a fixed number of items

## Best practices

- Store average and count on the item record for instant display
- Check for existing ratings before creating new ones
- Pre-fill the star UI with the user's existing rating
- Use individual Icon elements for the 5 stars, not a Repeating Group
- Update averages in a backend workflow to prevent frontend timing issues
- Show both the star visualization and a numeric average for clarity

## Frequently asked questions

### Can I use half-stars?

Yes. Allow scores of 0.5 increments and add 10 clickable elements (or use a hover position to calculate half values). Display half-filled stars using partial width.

### Can anonymous users rate items?

Not recommended. Without user authentication, there is no way to prevent duplicate ratings.

### How do I show ratings in a Repeating Group?

Reference the item's stored avg_rating field directly. No additional search is needed since the average is pre-calculated.

### Can I add a written review alongside the rating?

Yes. Add a 'review_text' field to the Rating data type and a Multiline Input alongside the star UI.

### How do I sort items by rating?

Sort the Repeating Group by avg_rating descending. Items with the highest ratings appear first.

### Can RapidDev build a review and rating system?

Yes. RapidDev builds comprehensive review systems with ratings, text reviews, helpfulness voting, and moderation tools.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/implement-rating-system-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/implement-rating-system-in-bubble