Pages Overview

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 structure of the page starts with a hero element with a CTA button, followed by a block with 6 features shown around a CV example, a block with testimonials, and a CTA section.
Image without caption
Besides the main content it also comes with two tabs:
  • Affiliates - this tab displays all advantages of the affiliate program in 8 blocks, with a Call To Action button downside.
  • Pricing - this tab stores the information about the pricing plans available on the template. The tab content is displayed in a hero section, followed by 6 blocks and a call to action block.
Note: Switching between tabs works by changing elements’ custom states.

affiliate

This page displays the information about affiliates (once the user’s request is accepted by the admin). Here, users can copy and share referral links or coupon codes.
Affiliates are able to sign up with Facebook, Twitter, or Google and then submit an application form for manual approval by the admin.
Their status will remain pending until admin approval when it becomes approved. Approved affiliates can then set their referral code and create a discount coupon after which their status becomes active and they can view the main affiliate panel.
Image without caption

dashboard

This is the main page of the template, where users can edit and publish their resumes.
Image without caption

Editor

The editor on the left side of the user’s dashboard is where users make all changes to their resume visible on the right.
Show/Hide
The editor makes use of custom states to show and collapse sections and uses conditional workflows to prevent editing when the resume is published.
Sections & FormsThe Basic, Contact & Profile sections contain inputs that are binding on the parent element’s thing.
The remaining sections with their own thing type have repeating groups and buttons for adding or deleting new things. These things can then be edited within the repeating groups with parent-bonded inputs.
Note: Switching between tabs works by changing elements’ custom states.
💡
Note: For a better UI/UX, the photo uploader is custom styled with opacity: 0 and placed above a button while a group shows the uploaded photo.

Publishing

A resume can be edited, downloaded, or publicly viewed only when it is published. Download and Web version buttons are hidden when the resume is unpublished, while the editor sections are disabled when the resume is published.
When a resume is published, a new PDF is generated and the download PDF and web version buttons become visible again.

Settings&Rewards

Besides the main viewer tab, it comes with two more tabs:
  • Settings - this tab displays all personal user settings like full name, email, connected accounts, sharing URL, and subscription.
  • Rewards - this tab stores the information user’s referral activities: referral URL, links to social media, earnings/referrals amount, and withdrawal history.

liveresume

After the resume is published, the user is redirected here once he presses the “Web version” button on the dashboard page. Here he can see the created resume.
Also, it is available through the user’s shared URL link available on the settings tab of the dashboard page.
Image without caption

manage

This is the admin dashboard, where all app statistical data are displayed.
Image without caption
It comes with 3 tabs:
  • Dashboard - shows information summary.
  • Users - shows the list of registered users.
  • Affiliates - stores the list of affiliates.

pdfresume

After the resume is published, the user is redirected to this page once he presses the “Download PDF” button on the dashboard page, to see the created pdf file.
Image without caption

signup_log_in

This page comes with simple signup and log-in page functionality. Here, users can sign up with their credentials or by logging through a social network: LinkedIn, Facebook, or Google.
Image without caption
It also comes with a referred users count workflow:
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.
Image without caption
💡
Tip: The text on this page is a placeholder and should be modified according to your own terms of service.
💡
Tip: Also, make sure you have Privacy page in your app. This will help you go through App Store and Google Play approval procedures, in case you decide to convert your Bubble app into native iOS and Android apps. These links are also important for Facebook login.

reset_pw

Here, users reset their password after accessing the link in the mail.
Image without caption

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