Skip to content
Airdev Bootcamp Capstone Scope - Class Creator
Share
Explore

Build

On this page you can find full details of your build, listed under the following sections:
- An overview of the different user roles required
- An overview of each page in your app and what Canvas assets you’ll need to build it
- A list of mockups you should mimic while building your own pages
- A list of all the flows and app logic you’ll need to implement
Users
0
Search
Name
What they do
How they signup/login...
1
Logged out
View homepage, browse classes by an instructor
N/A
2
Student
Browse classes, register for classes
Anyone can sign up with an email and password
3
Instructor
Create classes, bulk send email to students
Anyone can signup/register as an instructor (requires connecting Stripe connect v3)
4
App admin
Manage app settings & data
Must be invited by app admin via email
5
App
(Not a real user) This covers actions the app takes automatically
There are no rows in this table

Pages
0
Search
Name
Purpose
Canvas Assets required
1
Homepage
Public landing page: learn about the service & signup/login
n/a
2
Marketing pages
Optional pages with marketing content (about, team, etc.)
n/a
3
Login
Simple page where a user can signup/login (as either a standard user or instructor)
n/a (comes with Canvas template)
4
Search
Browse and subscribe to classes offered by instructors
5
Class
View details for a class and register
Page:
Leave a review popup:
6
Portal
Private portal for instructors to manage their classes
Participants list:
Classes list:
Class templates list:

Send SMS popup:
Create class popup:
Create class template 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
for more details
7
@App admin
portal
Manage app settings & data
n/a (comes with Canvas template)
8
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
Search
Page
Screen
Image
Notes
Homepage
1
@Homepage
: Sample
Homepage.png
Marketing pages
1
@Marketing pages
: Sample
Marketing page.png
Login
3
@Login
: Sign up (Step 1)
Login - Signup step 1.png
@Login
: Signup (Step 2)
Login - Signup step 2.png
@Login
: Login
Login.png
Search
1
@Search
(include filters group)
Search.png
Class
4
@Class
: Default view
Class - default view.png
@Class
: Payment popup
Class - payment popup.png
@Class
: “Paid” view
Class - paid view.png
@Class
: Rating popup visible view
Class - Rating popup visible view.png
Portal
8
@Portal
: Class types tab
Portal - Class types tab.png
@Portal
: Create class template popup
Portal - Create class template popup.png
@Portal
: Delete class template popup
Portal - Delete class template popup.png
@Portal
: Classes tab
Portal - Classes tab.png
@Portal
: Create class popup
Portal - Create class popup.png
@Portal
: Delete class popup
Portal - Delete class popup.png
@Portal
: Send email popup
Portal - Send email popup.png
@Portal
: Participants tab
Portal - Participants tab.png
No need for the New button
Account
4
@Account
: My profile tab (standard)
Account - My profile tab (standard).png
@Account
: My profile tab (instructor)
Account - My profile tab (instructor).png
@Account
: Notifications tab
Account - Notifications tab.png
@Account
: Payments tab
Account - Payments tab.png
No need for Stripe here. You can use built in Bubble functions to get these.
App admin portal
1
@App admin portal
App admin portal.png

Features
Search
Flow
Page
Feature
User(s)
Image(s)
Screen(s)
Service(s)
Marketing content
2
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)
Logged out
Homepage.png
Homepage: Sample
Marketing pages
Anyone can use the header & footer menus to navigate additional marketing pages as configured by the
@App admin
(no custom mockup needed)
Logged out
Marketing page.png
Marketing pages: Sample
User signup
2
Login
Login
On the
@Login
page, anyone can sign up as a
@Student
or
@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
Logged out
Login - Signup step 1.png
Login: Sign up (Step 1)
Login: Signup (Step 2)
Login
On the
@Login
page, anyone can log into their account by entering an email and password.
Logged out
Login.png
Login: Login
Search for classes
2
Search
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
for how to set this up
Student
Instructor
App admin
Search.png
Search (include filters group)
View class details
1
Class
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, profile picture, 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
Student
Instructor
App admin
Class - default view.png
Class: Default view
Class: Payment popup
Enroll in a class
1
Class
A
@Student
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
for how to set up the Bitly link
See
for an overview of the Stripe checkout experience, and
for how to set it up using the Stripe plugin
Student
Class - paid view.png
Class: “Paid” view
Review a class
1
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 (280 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
Student
Class - Rating popup visible view.png
Class: Rating popup visible view
Class: “Paid” view
Manage classes in a portal page
4
When an instructor logs into the application, they are taken to their secure personal
@Portal
page where they can manage their Classes.
Instructor
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.

Instructor
Non-instructors cannot access this page and will be redirected to the search page if they load it
Portal
Portal
Portal
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.

image.png
Instructor
Portal - Classes tab.png
Portal: Classes tab
Portal: Create class popup
Portal: Delete class popup
Portal: Send email popup
Manage class templates
1
Portal
Portal
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.
Instructor
Portal - Class types tab.png
Portal: Class types tab
Portal: Create class template popup
Portal: Delete class template popup
Manage participants
1
Portal
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
for guidance on how to set this up
Use the same Send email popup from the Classes tab
Instructor
Portal - Participants tab.png
Portal: Participants tab
Portal: Send email popup
Manage account settings
5
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).
Student
Instructor
App admin
Account
Account
My profile tab:
@Student
s can manage their profile info
The user can view and update their personal information (profile picture, first/last name)
Any standard user can sign up as an instructor by registering their bank account with Stripe (via Stripe hosted form)
Once registered, 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 their portal page
Users who sign up as instructors via the login page will be automatically directed to this tab

Developer notes
(The
@Account
page is included within the Canvas Base Template)
The user can register their bank account using Stripe Connect. See
for general info, and
for how to set up the integration.
Student
Instructor
App admin
Account - My profile tab (standard).png
Account: My profile tab (standard)
Account: My profile tab (instructor)
Account
Notifications tab:
@Student
and
@Instructor
Users can manage their settings here:
The user can view and update whether they receive bulk emails triggered by the instructor
Student
Instructor
App admin
Account - Notifications tab.png
Account: Notifications tab
Account
Payments tab:
@Student
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
Student
Instructor
App admin
Account - Payments tab.png
Account: Payments tab
Credentials tab: The user can update their email or password (note: current password is required to update either) (no mockup needed)
Student
Instructor
App admin
Manage app data & settings
8
App admin portal
An
@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!
App admin
App admin portal.png
App admin portal
Branding tab:
@App admin
can update basic app identity information including name, logos, page styles, and SEO tags
App admin
Pages tab:
@App admin
can create and edit marketing pages (e.g., about, team) by adding and customizing templated blocks
App admin
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
App admin
Emails tab:
@App admin
can edit the copy for templated emails triggered by the
@App
, using mail-merge terms setup by the Airdev team
App admin
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: including 2-factor authentication with
@Bitly
, 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
for how to configure these.
App admin
Bitly
Analytics tab:
@App admin
can view basic metrics on user signups and activity over time
App admin
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
App admin
General features
5
Any signed in user can logout from any page (using the upper-right corner menu)
Student
Instructor
App admin
Emails triggered by the app will be sent using our with app branding
App
SendGrid
When a class finishes (when the start date + duration passes), all registered users will receive an email asking them to leave a review.
App
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 ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.