logo
This section states the purpose of each page.

Introduction

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 πŸ™‚

Pages

index

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.
Image without caption
☝
Tip: Users with blocked? = yes status will not be able to access the home page. This can be managed by admin users on the admin page.
The listed categories on the top of the page are simply pulled from the Category object:
Image without caption
The call-to-action button "TRY IT FOR FREE" is redirecting to the admin-page and sends the Current User's Creator object:
Image without caption

admin

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.
Image without caption
πŸ’‘
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:
Image without caption
πŸ’‘
Tip: Users with blocked? = yes status will not be able to access the home page.

admin-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.
Image without caption

Post

πŸ’‘
Tip: When users click on the "POST" tab, they are actually redirected to the admin-post page.

Supporter

πŸ’‘
Tip: When users click on the "SUPPORTER" tab, they are actually redirected to the admin-supporter page.

Tiers

πŸ’‘
Tip: When users click on the "TIERS" tab, they are actually redirected to the admin-tiers_edit page.

Page

In this tab, the creators can edit their account information like name, background poster, bio, social links.
Image without caption

admin-post

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.
Image without caption
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:
Image without caption
When "Group Image" is clicked, the state value is set to Image:
Image without caption
When "Group Video" is clicked, the state value is set to Video:
Image without caption

admin-supporter

This page contains the tier supporters that can be managed.
Image without caption
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:
Image without caption

admin-tiers_edit

On this page, the creators can edit their tiers or publish new ones.
Image without caption

chat

This page contains the messaging chat between platform users.
Image without caption
The chat is an actual RepeatingGroup element called "Conversation", where the cell items are Conversation objects:
Image without caption
When this cell is being clicked, a URL parameter is sent to the chat with a unique id, to actually open the appropriate discussion:
Image without caption

checkout

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.
Image without caption
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:
Image without caption
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:
Image without caption
In case the user's name is empty, it will display the user's email instead:
Image without caption

explore

This page is for exploring creators and it has a filter with the categories.
Image without caption
The categories from the left-side menu are being pulled from the Category object, in a simple RepeatingGroup element, here:
Image without caption
The list of creators are filtered based on the current page's object, to display the appropriate creators when users click on the category:
Image without caption
When the repeating group cell is clicked, it will search through the creators based on the selected category:
Image without caption

faq

This page contains the frequently asked questions (FAQs) that may be listed.
Image without caption
πŸ’‘
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.

home

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.
Image without caption
The post items are being pulled from the Post object, into a simple RepeatingGroup element, here:
Image without caption

privacy

This is the page where users see the legal statement that specifies how the company manages the collected user data.
πŸ’‘
Tip: The text on this page is a placeholder and should be modified according to your own privacy policy.
Image without caption

profile

This page contains the profile information about users. This data can be edited.It comes with multiple tabs as well: Overview, Posts, Community.
Image without caption
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.

settings

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.
Image without caption
The "Cancel Supporting" button will remove the Current User from the tier's Supporters list:
Image without caption

terms

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.
Image without caption

tiers

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.
Image without caption
The "SUPPORT" button can be located here:
Image without caption
This button will redirect the supporter to checkout by sending the Tier object in order to display the appropriate tier information:
Image without caption

reset_pw

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.
Image without caption

404

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.
Image without caption

Helpful?