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.
Prerequisites
- 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
Create the Rating data type
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.
Build the 5-star rating UI
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.
Record the rating on click
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.
Display aggregate ratings
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.
Prevent duplicate ratings
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 working example
1RATING SYSTEM — ARCHITECTURE2==============================34DATA TYPES:5 Rating: user (User), item_id (text), item_type (text), score (1-5)6 Item (modified): + avg_rating (number), + rating_count (number)78STAR UI:9 5 Icon elements in a horizontal Group10 Custom state: hover_score (number)11 Hover: fill stars up to hover position12 Click: record/update rating13 Pre-fill: show user's existing rating1415WORKFLOWS:16 Rate (new): Create Rating → update item avg + count17 Rate (update): Make changes to Rating → recalculate avg18 Calculation: avg = sum of scores / count1920DISPLAY:21 Filled stars based on avg_rating22 Numeric average: "4.2 (127 ratings)"Common mistakes when building a rating system in Bubble
Why it's a problem: Calculating average on every page load instead of storing it
How to avoid: Store avg_rating and rating_count on the item record. Update them only when a rating is created or changed.
Why it's a problem: Not checking for existing ratings before creating
How to avoid: Always search for an existing Rating by user + item before creating a new one
Why it's a problem: Using a Repeating Group for the 5 stars
How to avoid: 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
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to add a 5-star rating system to products in my Bubble.io app. I need clickable stars, one-rating-per-user enforcement, average calculation, and aggregate display on product cards. Can you design the system?
Add a star rating system to product pages. Build a 5-star clickable UI, create a Rating data type, store averages on Product records, and display aggregate ratings on product listing cards.
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.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation