Explore

Build

On this page you can find full details of your build, listed under the following sections:

⁠

Users⁠

- An overview of the different user roles required

⁠

Pages⁠

- An overview of each page in your app and what Canvas assets you’ll need to build it

⁠

Screens⁠

- A list of mockups you should mimic while building your own pages

⁠

Features⁠

- A list of all the flows and app logic you’ll need to implement

Users

Users

Name

What they do

How they signup/login...

Logged out

View homepage, browse classes by an instructor

N/A

Landlords

Browse pre-screened tenants, register for full access

Anyone can sign up with an email and password

Instructor

Create classes, bulk send email to students

Anyone can signup/register as an instructor (requires connecting Stripe connect v3)

App admin

Manage app settings & data

Must be invited by app admin via email

App

(Not a real user) This covers actions the app takes automatically

There are no rows in this table

⁠

Pages

Pages

Name

Purpose

Canvas Assets required

Homepage

Public landing page: learn about the service & signup/login

n/a

Marketing pages

Optional pages with marketing content (about, team, etc.)

n/a

Simple page where a user can signup/login (as either a standard user or instructor)

n/a (comes with Canvas template)

Browse and subscribe to classes offered by instructors

Page:

Search bar page with filters group visible

⁠

List of classes RG:

2-Column Repeating Group (Link, Text, and Button)

⁠

Class

View details for a class and register

Page:

Standard page

⁠

Class details:

Listing details with Icons and Menu Focus Group

⁠

Reviews RG:

Reviews (Text Only) Repeating Group

⁠

Leave a review popup:

Rating Popup

⁠

Payment popup:

Stripe Credit Card Purchase Popup

⁠

Portal

Private portal for instructors to manage their classes

Page:

Standard Portal / Dashboard Page

⁠

Participants list:

Standard Data Table

⁠

Classes list:

Standard Data Table

⁠

Class templates list:

Standard Data Table

⁠

Send SMS popup:

Feedback / Contact Popup

⁠

Create class popup:

Standard Form Popup

⁠

Create class template popup:

Standard Form Popup

⁠

Note: Every data table includes the reusable element menufocus_template. You should make a copy of this for every type of data you need one for. See

here

⁠

for more details

⁠

@App admin

⁠

portal

Manage app settings & data

n/a (comes with Canvas template)

Account

Private portal for app admins to manage app settings & data

n/a (comes with Canvas template)

There are no rows in this table

⁠

Screens

Page

Screen

Image

Notes

⁠

@Homepage

⁠

: Sample

⁠

@Marketing pages

⁠

: Sample

⁠

@Login

⁠

: Sign up (Step 1)

⁠

@Login

⁠

: Signup (Step 2)

⁠

@Login

⁠

: Login

⁠

@Search

⁠

(include filters group)

⁠

@Class

⁠

: Default view

⁠

@Class

⁠

: Payment popup

⁠

@Class

⁠

: “Paid” view

⁠

@Class

⁠

: Rating popup visible view

⁠

@Portal

⁠

: Class types tab

⁠

@Portal

⁠

: Create class template popup

⁠

@Portal

⁠

: Delete class template popup

⁠

@Portal

⁠

: Classes tab

⁠

@Portal

⁠

: Create class popup

⁠

@Portal

⁠

: Send email popup

⁠

@Portal

⁠

: Participants tab

No need for the New button

⁠

@Account

⁠

: My profile tab (standard)

⁠

@Account

⁠

: My profile tab (instructor)

⁠

@Account

⁠

: Notifications tab

⁠

@Account

⁠

: Payments tab

No need for Stripe here. You can use built in Bubble functions to get these.

⁠

@App admin portal

⁠

Features

Flow

Page

Feature

User(s)

Image(s)

Screen(s)

Service(s)

Marketing content

Homepage

Any user can visit the public homepage. You (the developer) can configure the page however you want using the marketing page builder, or just leave it with the default setup. (no custom mockup needed)

Marketing pages

Anyone can use the header & footer menus to navigate additional marketing pages as configured by the

@App admin

⁠

(no custom mockup needed)

User signup

On the

@Login

⁠

page, anyone can sign up as a

@Landlords

⁠

@Instructor

⁠

These fields are required for each user type:

Step 1 - Email and password (required)

Step 2 - First & last names (text, required), Profile picture (image, required)

⁠

@Instructor

⁠

s only - Upon signup

@Instructor

⁠

s will be redirected to their account page where they can complete their instructor profile.

Developer notes:

Email verification as part of signup can be turned on/off by app admins, it should be turned OFF for this application

On the

@Login

⁠

page, anyone can log into their account by entering an email and password.

Search for classes

Any user can visit the public search page, where they can take several actions:

Browse a list of upcoming classes, viewing the name, start date/time, price, overall rating (the rating is an average of all ratings given for the same class template using star icons)

Filter the list of classes by

Class name (text input on the page, not in the filters reusable group)

Instructor name (search input)

Price (two inputs, creating a range)

Date (date input)

Category (multi-select group)

Click on a class to link to its individual class details page for more information

Developer notes

For the class name search, use a ‘fuzzy search’ approach. See

here

⁠

for how to set this up

View class details

Class

Any user can visit the public

@Class

⁠

details page, where they can review detailed information on the class, including:

Name

Price

Description

Start date/time

Duration

Places remaining

Category

List of existing user reviews (Reviews will display the review’s text and rating (0-5) )

Please show: reviewers name, as well as rating score and rating text

Note: Each class is attached to a ‘class template’. The reviews displayed will be the aggregated list of reviews given for all of the classes of a particular class template

Enroll in a class

Class

@Landlords

⁠

User can enroll in the class by paying the class fee via Stripe. This will:

Send them a confirmation email which includes the class’s video conference link

Display the video conference link as a Bitly link which the user can click to be redirected.

Trigger a payout to the instructor minus the app commission (% of payment)

You should use the Stripe plugin to achieve this

Mark the ‘Enroll’ button as ‘Enrolled’ and make it unclickable

Additionally:

User’s can’t enroll to their own class

A user will only be able to pay for the class if the number of participants is less than the class’s max participants

If this is not the case the 'Enroll’ button will be un-clickable and read ‘Class full’

Developer notes

See

here

⁠

for how to set up the Bitly link

See

here

⁠

for an overview of the Stripe checkout experience, and

here

⁠

for how to set it up using the Stripe plugin

Review a class

Class

Click ‘Leave a review’ to trigger a popup where they can leave a review

A review requires a rating (0-5) and a text (260 characters or less)

This button will only be visible if the class date has passed and the user is enrolled

The review will be connected to the class template for the particular instance of the class

Leaving a review will send an email notification to the class instructor

Manage classes in a portal page

When an instructor logs into the application, they are taken to their secure personal

@Portal

⁠

page where they can manage their Classes.

⁠

Schema of the core data structure. Note that every time an instructor wants to run an instance of a particular class template, they create it via the ‘Classes tab’ specifying the specific date/time amongst other values.

Non-instructors cannot access this page and will be redirected to the search page if they load it

Portal

From the ‘Classes’ tab:

Create a new class via popup by providing (all inputs required):

Class template (class template)

Selecting the class template will autofill the remaining inputs (where possible) to match the template, but the input values can still be edited

Class Name (text)

Description (text)

Price (number)

Max participants (number, max 50)

Start date & time (date)

Video conference link (text)

Duration (number, hours)

View their classes

Clicking a class will open the ‘Participants’ tab and filter the list to only show participants registered to the clicked class

View the Bitly link for the class page in the row

Sort classes by closest start date (default), furthest start date, lowest price

From the 3-dot menu a user can:

Edit a class via popup

Send a bulk email to the class’s participants via popup

Developer notes

You’ll need to adjust the data table columns on the portal page. Be careful when doing so. Make sure the the column headers (text elements) are perfectly aligned with the corresponding column data (groups), so that you don’t see funky, misaligned tables when you hit preview.

⁠

Manage class templates

Portal

From the ‘Class templates tab:

Create a new class template via popup by providing (all inputs required):

Name (text)

Description (text)

Price (number)

Max participants (number)

Duration (number, hours)

Category (custom data type)

View their created class templates

From the 3-dot menu:

Edit the class template via popup

Editing a class template has no effect on any classes (instances) associated with the class template. The class template is just used to populate the initial values for the class (instance).

Delete the class template via popup

Delete should be a soft delete, meaning that the class template isn’t actually deleted from your app database, but rather removed or hidden from the site so it’s not accessible by users. This approach prevents orphan, or disconnected and unreachable data from being created when an object is deleted.

Developer notes

The ‘Confirm delete popup’ is included in the menufocus_template element which is included in every data table.

Manage participants

Portal

From the ‘Participants’ (students) tab:

View a list of participants across all of their classes, viewing their full name and total of registered classes with this instructor

Select participants manually, or select all visible and send a bulk email to all selected participants via popup

Once all emails have been sent the instructor will receive an email notification that the emails have all been sent

Developer notes

Use a recursive workflow to send the bulk emails. See

here

⁠

for guidance on how to set this up

Use the same Send email popup from the Classes tab

Manage account settings

Any user can navigate to their personal

@Account

⁠

page, where they can manage manage the following settings: (The

@Account

⁠

page is included within the Canvas Base Template, and the following tabs exist as Figma components. Please begin with those components and make any minor modifications).

Account

My profile tab: All logged-in Users can manage their profile information from the

@Account

⁠

page.

All logged-in Users can view and update their personal information (profile picture, first/last name) from this page

Users who sign up as

@Instructor

⁠

s through the

@Login

⁠

page will be automatically directed to this page and tab to add their bank details through Stripe. It is required that all

@Instructor

⁠

s add their bank details through Stripe.

Any

@Landlords

⁠

user can decide to sign up as an

@Instructor

⁠

by registering their bank account with Stripe (via Stripe hosted form)

This will update the

@Landlords

⁠

‘s role to

@Instructor

⁠

After registering with Stripe, this button will read ‘Update your bank account’, and clicking it will re-launch the Stripe Connect flow, allowing the user to update their details

Once registered with Stripe, the

@Instructor

⁠

will have access to the

@Portal

⁠

page.

Developer notes

(The

@Account

⁠

page is included within the Canvas Base Template)

The user can register their bank account using Stripe Connect. See

here

⁠

for general info, and

here

⁠

for how to set up the integration.

Account

Notifications tab:

@Landlords

⁠

and

@Instructor

⁠

Users can manage their settings here:

The user can view and update whether they receive bulk emails triggered by the instructor

Account

Payments tab:

@Landlords

⁠

s can manage their payment info

The user can view and update their current credit card on file

The user can view a list of previous transactions through the app, viewing the transaction date, class, and amount

Clicking a transaction will take them to the associated class page

Credentials tab: The user can update their email or password (note: current password is required to update either) (no mockup needed)

Manage app data & settings

App admin portal

@App admin

⁠

can navigate to the

@App admin portal

⁠

where they can manage settings & data for the app

Note: The features below are not exhaustive — the full app database can be accessed/controlled from the Bubble editor after the build

Note: The Airdev team periodically updates how we construct the

@App admin portal

⁠

, so the exact layout may differ from the description below — if anything it will be improved!

Branding tab:

@App admin

⁠

can update basic app identity information including name, logos, page styles, and SEO tags

Pages tab:

@App admin

⁠

can create and edit marketing pages (e.g., about, team) by adding and customizing templated blocks

Header / footer tab:

@App admin

⁠

can edit aspects of the header and footer navigation (e.g., adding links to marketing pages)

Note: We recommend avoiding adjustments to menu items added by the Airdev team as part of the build

Emails tab:

@App admin

⁠

can edit the copy for templated emails triggered by the

@App

⁠

, using mail-merge terms setup by the Airdev team

Settings tab:

@App admin

⁠

can edit app-wide settings, including:

App commission: update the % of session payments going to the app

Categories (view, add, delete)

Delete should be a soft delete, as for class templates

App email address: the address email notifications come from

Legal docs: terms of service and privacy policy language

Cookies & password policies:

Signup requirements: email/phone verification, etc.

Multi-language support: ability to setup multiple language support (manual effort involved)

Developer notes

For the App commission and Categories settings, Canvas gives you some pre-built UI which you can modify to set this up. See

here

⁠

for how to configure these.

Analytics tab:

@App admin

⁠

can view basic metrics on user signups and activity over time

Users tab:

@App admin

⁠

can manage app users:

View the full list of users, including pic, name, email, role, and last active date

Filter by name, role, or active status

Create a new user with name, email, and role

Download the list of users to CSV

General features

Any signed in user can logout from any page (using the upper-right corner menu)

Emails triggered by the app will be sent using our

standard responsive HTML template

⁠

with app branding

When a class finishes (when the start date + duration passes), all registered users will receive an email asking them to leave a review.

Things to keep in mind (developer):

Share a public link of your app when submitting so we can check workflows/data if needed

Always consider edge cases. Make constraints on the inputs that are reasonable (i.e. a user probably shouldn’t be able to filter classes that are over $1,000,000…)

⁠

Want to print your doc?
This is not the way.

Try clicking the ··· in the right corner or using a keyboard shortcut (

CtrlP

) instead.