This section states the purpose of each page.
In this summary, we will describe each page and its content. The Page Element is the fundamental one that contains all the other elements.
Tip: See Bubble Reference for more information about Pages element https://bubble.io/reference#Elements.Page 🙂
This is the main page typically encountered first on the web app that usually contains links to the other pages of the site. A homepage includes a variety of menus that make it easy for users to find the information they need.
Here, users see the landing page with top tier categories, reviews, as well as call to action buttons to start a membership.
The listed categories on the top of the page are simply pulled from the Category object:
The call-to-action button "TRY IT FOR FREE" is redirecting to the admin-page and sends the Current User's Creator object:
This page is designed to manage platform data, e.g. Users, Items, Payments… and others. Only users with admin rights are able to access this page (in read-only mode), and those users who have access rights can edit or delete anything here.
Admin: See the instructions on how to grant Admin Rights in your template.
Here, this page is for the owner of the app where the platform commission can be set. It also contains a chart for payments and a list of app users. The users list can be edited.
Tip: The platform commission can be set here.
To block users, this template is using the Ionic Toggle element from a free plugin called Ionic Elements. This toggle is named "IonicToggle A" and can be found here:
Tip: Users with
blocked? = yesstatus will not be able to access the home page.
This is the page for editing the profile page of the creator. Here, creators are able to manage multiple tabs: Post, Supporter, Tiers and Page.
Tip: When users click on the "POST" tab, they are actually redirected to the admin-post page.
Tip: When users click on the "SUPPORTER" tab, they are actually redirected to the admin-supporter page.
Tip: When users click on the "TIERS" tab, they are actually redirected to the admin-tiers_edit page.
In this tab, the creators can edit their account information like name, background poster, bio, social links.
In this tab, the creators can manage their existing posts or create new ones.
Tip: There are three types of posts a creator can choose: Text, Image and Video.
When clicking on one of the post types, the appropriate group will appear based on custom states. So, when the "Group Text" is clicked, the custom state called Post_Type for the page element will get value of Text:
When "Group Image" is clicked, the state value is set to Image:
When "Group Video" is clicked, the state value is set to Video:
This page contains the tier supporters that can be managed.
The list of supporters is being pulled from the User object in a simple RepeatingGroup element, but the list is filtered to display the supporting creators only, here:
On this page, the creators can edit their tiers or publish new ones.
This page contains the messaging chat between platform users.
The chat is an actual RepeatingGroup element called "Conversation", where the cell items are Conversation objects:
When this cell is being clicked, a URL parameter is sent to the chat with a unique id, to actually open the appropriate discussion:
This page shows the selected tier from tiers page. It includes all workflows for Stripe payments.
Payments: See the documentation on how to set Stripe Payments in Bubble App.
Users are able to change the amount they want to pay, change the tier, select the option to get a physical reward by filling in the address, or refuse to get a physical reward.
Tip: The amount users are about to pay should be equal to at least tier's initial price, or more.
The "PAY WITH STRIPE" button can be located here:
In case the user's name is not empty, the payment will process the transaction by using the user's name to display at checkout:
In case the user's name is empty, it will display the user's email instead:
This page is for exploring creators and it has a filter with the categories.
The categories from the left-side menu are being pulled from the Category object, in a simple RepeatingGroup element, here:
The list of creators are filtered based on the current page's object, to display the appropriate creators when users click on the category:
When the repeating group cell is clicked, it will search through the creators based on the selected category:
This page contains the frequently asked questions (FAQs) that may be listed.
Tip: The FAQs can be created either in as database records (e.g. "FAQ" data type), or option sets, to be easily modified via admin panel if you will, and displayed in a simple RepeatingGroup element.
This page displays the feed. The users are able to scroll through the supported creators' tiers, view the suggested creators, see the following list, etc.
The post items are being pulled from the Post object, into a simple RepeatingGroup element, here:
This is the page where users see the legal statement that specifies how the company manages the collected user data.
This page contains the profile information about users. This data can be edited.It comes with multiple tabs as well: Overview, Posts, Community.
This is the profile tab for the creator that contains the video overview, posts.Post
This profile tab shows all posts.
CommunityThis profile tab shows all community posts.
Tip: Only a supporting user can add a post or a comment.
This is the "Settings" page for a standard user. The user can edit the profile information like name, email, address, etc., as well as cancel his supporting tiers. This page can be accessed from the home page by clicking the "Settings" button in the left-side menu.
The "Cancel Supporting" button will remove the Current User from the tier's Supporters list:
This is the page where users see the agreement act between both sides: the company that has the web application and users who access the web application.
Tip: The text on this page is a placeholder and should be modified according to your own terms of service.
On this page, a supporter can select a tier from the creator. The users are able to support a new tier and proceed to checkout page for payment completion.
The "SUPPORT" button can be located here:
This button will redirect the supporter to checkout by sending the Tier object in order to display the appropriate tier information:
This page is used for resetting the password. It comes with a simple form with two input elements for a new password and confirm it, as well as a submit button.
This is a custom-designed page for 404 redirect errors, informing a user that the requested web page cannot be found, or it doesn't exist.