27min

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.

This is the main page of your app. It simply includes the signup and login forms with beautiful animations.

Index: Preview
Index: Preview

Tip: The search box and admin page redirect can be found in the Header reusable element.

Tip: Initially, the design element might be hidden.

Here is how to unhide 👀 them:

Index: Unhiding elements (design)
Index: Unhiding elements (design)

To check the animation workflows, locate them in the Workflow tab here:

Index: Animate action (workflow)
Index: Animate action (workflow)

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.

This is the 🔐 admin panel page. Users with admin rights are able to view this page and use its features at the fullest. Here, the admin user manages platform data like Users, Feeds and Comments, as well as 📈 stats for each tab.

Tip: We are using the Bubble's native Chart Element plugin to display stats.

👤Users

Admin: Users
Admin: Users

🧻Feeds

Feeds
Feeds

💬Comments

Admin: Comments
Admin: Comments

Admin: See the instructions on how to grant Admin Rights in your template.

feed

This page is the 🏠 home page of this template. Here, the users will find a short overview of their profile on the left-hand side, showing the profile photo, number of profile views and connections.

In the middle is the live update of posts from the different accounts users are following with 🖼️ pictures and 💬 comments and the number of likes with it.

On top of the live posts, an update is the user's personal post section, here it is possible to compose a post and add pictures or videos, and post it live.

On the right-hand side is a list of suggested 👤 accounts for the user to follow.

Feed: Preview
Feed: Preview

When a user hits the "POST" button, a Feed new object is created:

Feed: "POST" button (design)
Feed: "POST" button (design)
Feed: New feed (workflow)
Feed: New feed (workflow)

Then, the Current User's userFeedlist is updated:

Feed: Adding new feed (workflow)
Feed: Adding new feed (workflow)

messages

This page is the 💬 chatting page. Here, Linky users are exchanging messages, being able to send 🖼️ image messages as well.

Document image

Tip: Initially, the design elements might be hidden.

Here is how to unhide 👀 them:

Press the "eye" icon
Press the "eye" icon

my_network

This page shows an overview of a user's 🤝 network. On your left-hand side, there is a short overview of the profile showing a profile photo, number of views and connections. In the middle, there is a list of accounts under the tab of 🙋‍♂️ People a user may know. On the right-hand side is the total number of connections a user has made.

Here is how a user can send an invitation request:

My network: Send a connection request
My network: Send a connection request

And here is how to accept the invitation:

My network: Accept an invitation
My network: Accept an invitation

When pressing the "Connect" button, it is adding the Current User to the invitation list userWaitingForApprovalof the selected User:

My network: "Connect" button (workflow)
My network: "Connect" button (workflow)

profile

Here, users are able to modify their personal information: name, profile photo, background photo, education, experience, etc.

Profile: Preview
Profile: Preview

On this page, there are a couple of buttons that are hidden on preview in case the Current User is viewing his own profile:

Group "User message"

Profile: Group "User message" conditional (design)
Profile: Group "User message" conditional (design)

Group "User connect"

Profile: Group "User connect" conditional (design)
Profile: Group "User connect" conditional (design)

Tip: These groups are hidden to the Current User to prevent from sending an invitation request to himself.

And if user tries to Connect, the Current User's userWaitingForApproval list is updated:

Profile: Sending an invitation request (workflow)
Profile: Sending an invitation request (workflow)

profile_views

This page is simply displaying the list of users that have viewed the profile.

Profile views: Preview
Profile views: Preview

The RepeatingGroup element is located here:

Profile views: Design
Profile views: Design

The profile name is clickable. It redirects to the profile page, also sending the Creator (User) object:

Profile views: Go to user's profile (workflow)
Profile views: Go to user's profile (workflow)

reset_pw

This page is used for resetting the password. It simply comes with a form to set the new password and confirm it.

Reset password: Design
Reset password: Design

Tip: The Group "Reset Password" has a conditional to be hidden when the Current User is not logged in, so it doesn't cause any troubles when users simply preview the page, without being logged in.

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.

404: Design
404: Design

It is simply redirecting back to the index page when users click on the "Back to Home" button.

📜 Table of Contents

In order to properly configure the template please read the *required sections of this documentation.