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.
The page is designed as a landing with basic sections to present the platform: hero, features, CTA buttons, etc.
Tip: There are 2 subscription types: Free and Premium.
The CTA buttons are located at the top and bottom of the landing page, allowing the user to quickly select the appropriate subscription type to access the music platform.
The subscription buttons are either redirecting to the login_signup or mymusic pages, depending whether or not the user is logged in.
Tip: The actual payment is completed on
login_signup or profile pages.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.
Here, the admin users are able to manage the following platform data: Users, Albums and Tracks.
Users
It is possible to view all the users with their subscriptions as well.
Tip: Users can be deleted here.
In order to delete a user, just click the ✖️ button:
Depending on the access rights, the admin user will be able to perform this action or not. This workflow can be found here:
If the
access_rights value is set to no, the following workflow actions will run to simply display the permission popup:
If the value is set to yes, the following workflow actions will run to actually delete the user record from the database:
Albums
Here, all the albums data can be managed with their name, description, genre, tracks, etc.
Tip: Albums can be deleted here.
The same workflow principles apply to albums as well as for Users data:
The albums data can also be modified in this admin panel tab. The design element can be found here, it's called "Group Edit Album":
Tracks
The same as Users and Albums, the Tracks data can be managed with all its information like name, artist, genre and the actual songs.
The music element can be found here:
These track records can be deleted as well as users or albums data. Here are the workflow events that trigger the appropriate actions, depending on the access rights:
login_signup
This page is used for creating an account or logging in to an existing one. To access it, users will click on “Signin” button in the header.
On this page, users are offered a demo user to log in and test all the template features. For detailed information on how to remove this button, see the Remove Demo Login section.
Here it is possible to switch between the login and signup forms, by clicking the Register or Log in buttons in the top-right corner:
When creating a new account, users enter all the form details and then hit the Sign up button. They will be asked to choose a plan: Free or Premium.
The appropriate workflows for these buttons can be found here, colored in green:
mymusic
This page is designed as a SPA (Single Page Application) to display, add, remove and manage the albums with all the tracks. It is where the platform users search through numerous song libraries, find their favorite artists and enjoy listening to their music. 🎵
The first thing to see is the Browse section where all the albums are displayed available on this platform.
All the albums can be filtered by Genre & Moods or New releases. It is also possible to search through album names or songs, for instance:
The result will list all the songs available:
Tip: The songs can be added to Favorites or downloaded on the local device.
The Favorites tab can be found in the right-side menu by clicking the burger icon.
This design element is called "FloatingGroup Side Menu" and can be found here:
The database-related actions can also be located on this page (in case artists want to delete a track from their album), which are colored in red, for example:
profile
This page is designed to edit the user's profile information. Here, it is possible to change the first name, last name, username, and the subscription plan.
The list of all subscription transactions can be found here as well:
In case the new user selects the Free plan and is willing to switch to the Premium plan, the payment is processed on this page as well:
reset_pw
This page is for resetting the password. It simply comes with a form to generate a new password:
404
This is a page for 404 redirect errors, informing a user that the web page he or she is looking for cannot be found.
