How to build a star rating system with Momen？
Introduction
The star rating system is commonly used in movies, restaurants, and hotels to let users rate products or services. Adding a rating system to your app makes it easier for users to provide feedback and helps vendors gather insights. In this tutorial, we'll show you how to build a star rating system in Momen—without writing any code.
Key Component in This Project
Conditional view will be used in this project. It displays different content based on specific conditions.
Step-by-Step Guide
Data Model
Create a score_record table to store user's rating. Set up a 1:N relationship with the account table. Becasue one user can have multiple rating records.
UI
Add a conditional view and add five cases.
Add images in each case. Mind the layout and the width of the images.
Action
Click on the page, go to the right panel → Data, and create a new page variable to store user's score:
Name: score
Type: Big Int
Default value: 1 (representing a 1-star rating)
Configure actions for each star.
Select the first star, go to Actions, and set:
On Click → Set Page Variable → score = 1
Select the second star, set:
On Click → Set Page Variable → score = 2
Repeat this for the remaining stars, updating the score value accordingly.
Configure Conditions
Set conditions for each case: page variable/score equal to the number of stars.
Adding a Submit Button:
Add a button labeled Submit Rating.
Configure an Insert Action:
Table: score_record
Field: score → Insert page variable: score
User ID: Insert current user’s ID (if login is implemented).
Final Thoughts
Now you’ve successfully built a star rating system in Momen—without writing a single line of code! This system allows users to provide feedback while storing their ratings in a structured database.
Resources
You can check our video tutorial for this project: https://youtu.be/fuJNEAJ2Ei0
We just released our comprehensive courses. Learn to build a web app step by step: https://www.youtube.com/playlist?list=PLvdix_Sk3fBpWevnT02AgnHPJ45E4gR5W
