Learn It - Online Course Platform

Learn It is fully functional app template for online course like application, create and manage your courses, get a full freedom of creation and learn new skills

---

Intro

Links

🖥️ Preview link

🌐 Template page on Bubble Marketplace

---

Screenshots

Index page

Features

Courses page

About us

Student dashboard

Teacher dashboard

---

Template details

LearnIt - a great template for the exchange of knowledge and experience. There are two types of users in this template - "Teacher" and "Student". "Teacher" can create a course, convey its knowledge, practice, and experience. The created course can be paid or be free. "Student" can choose the course of interest to him and learn something new. For each type of user, we created informative dashboards with all the necessary information and statistics.

Learn It template features the following:

✅ Responsive design

✅ Signup/Login

✅ Demo Teacher/Student

✅ Teacher dashboard

✅ Student dashboard

✅ Adding, editing and choosing of courses

✅ Statistics by courses (number of use and stage of passage)

✅ The opportunity to leave a review

✅ Search for courses by categories

This template is sold "as is" but if there are any critical bugs, feel free to reach out. Our team will try to fix them ASAP. We tried to keep all the workflows and design architecture simple for beginner-intermediate users to use and adjust. However, we recommend having at least moderate experience with Bubble to be able to fully use and edit the app’s backend. If you need any assistance to customize this template for your personal or business project, feel free to reach out to our team via [e-mail]. We are always there to help build new products and mobile/web applications. We hope this template would become a great starting point for your project.

Removing the banner

1. Open the app in Bubble editor

2. Go to settings -> SEO/Metatags

3. Remove the content of "Script in the body"

---

User flows

Main user flow:

-> Sign up/Login; -> Course search; -> View course; -> Course purchase and payment; -> Ability to leave comments; -> View all subscriptions and analytics in your personal dashboard.

---

Key features

MULTISELECT EDITOR

DROPDOWN RICH TEXT

CHART ELEMENT

COURSE MANAGEMENT

STUDENT PROGRESS TRACKING

COLLABORATION TOOLS

Workflows

Primary colors and their purposes

Green

Emphasizes actions related to creating or modifying records in the database, indicating successful operation completion.

For example:

Example 1

Example 2

Red

Designated for actions involving deletion or resetting of values, aiding users in quickly identifying them.

For example:

Example 1

Example 2

Blue

Reserved for actions that do not impact application resources, such as opening or closing pop-up windows.

For example:

Example 1

Example 2

Orange

Used for actions related to app navigation, providing ease of orientation within the interface.

For example:

Example 1

Example 2

Brown

Utilized for custom workflows and API work, highlighting these actions among others.

For example:

Example 1

Example 2

Purple

Left to the developer's discretion for assigning color to actions as they see fit.

For example:

Example 1

Example 2

Cyan

Intended for actions involving the use of Custom Events, ensuring ease of perception for complex operations.

For example:

Example 1

Example 2

Grey

Employed for all other actions not covered by other colors, aiding in making the interface clear and balanced.

For example:

Example 1

These standards are purely recommendations. Possible discrepancies do not affect the functionality of the application.

---

Pages

Below, you will find a list of all the pages available on this platform, along with a brief description of their functionality.

Index: Explore our landing page for insights on the template, featuring descriptions, a company directory, the best courses and the ability to sort them by category.

All Courses: This page contains a brief description with all the courses that are on our site and also there is a possibility to sort them by:

• Categories

• Skills

• Duration

• Price

Course Page: Contains all information about the course such as title, price, duration, how many students have purchased this course, description, what will be taught on this course reviews and many more useful information.

Contact Us: Connect with platform administrators effortlessly through our user-friendly contact page.

Dashboard Student: This is a place where students can manage and view all information about their purchased courses, favorite courses, interaction, notes and there is also a section with account settings and help.

Dashboard Teacher: This is a place where teachers can manage and view all information about their courses, performance, analytics, interaction and there is also a section with account settings and help.

Docs: Access all necessary platform documentation, including Privacy Policy, Terms & Conditions, and Frequently Asked Questions (FAQ).

About Us: Explore our about us page for insights more information about us.

Check Out: This is the page where the student enters when he/she buys a course and contains information and fields that must be filled in to buy the course.

Library: This is a page with books where the student can sort them and buy the book they want.

Register Page: A page where users can create an account and also log in to the site.

Reset Password: Effortlessly reset your password and receive updated login credentials for seamless access.

---

Reusable elements

1. Footer - a section at the bottom of a web page containing additional information such as contacts and links. Used in the following pages: Found on all application pages.

2. Header - the top part of a web page containing the logo, application name, navigation elements, and other important components. Found on all application pages.

3. Signup / Login Popup - A popup where users can create an account and also log in to the site.

---

Data Types

Category

This data type is designed for storing all Categories related information.

Field name	Type	Notes
Image	Image	Image of category
Name	Text	Category name

Course

This data type is designed for storing information related to Course.

Field name	Type	Notes
Active	Yes/No	Course status
Category	Category	Course category
Description	Text	Course description
Feedback	List of Feedbacks	Course feedbacks
Name	Text	Course name
Photo	Image	Course photo
Price	Number	Course price
Purchased	List of Purchases	Purchased courses
Rating	Number	Course rating
Sections	List of Sections	Course sections
Skills	List of Texts	Course skills
Statistic	List of Course Statistics	Course statistics
Students	List of Students	Course students
Teacher	Teacher	Course teacher
Training Process	List of Texts	Course training progress
What Will Learn	List of Text	What will learn in course

Course Statistics

This data type is designed for storing information related to Course statistics.

Field name	Type	Notes
Complete Lessons	List of Lessons	Course complete lessons
Course	Course	Course name
End Date	Date	Course end date
Start Date	Date	Course start date
Student	Student	Student name

Doc

This data type is designed for storing information regarding Docs.

Field name	Type	Notes
Cover	Image	Doc Image
Description	Text	Doc description
File	File	Doc file
Genres	Option set: Genres	Doc genres

Features

This data type is designed for storing information regarding Features.

Field name	Type	Notes
Description	Text	Feature description
Title	Text	Feature title

Feed

This data type is designed for storing information regarding Feed.

Field name	Type	Notes
Body	Text	Feed content
Country	Text	Feed country
Creator	Text	Feed creator
Image	Image	Feed image

Feedback

This data type is designed for displaying preview of Feedback.

Field name	Type	Notes
Comment	Text	Feedback content
Course	Course	Feedback course
Rating	Number	Feedback rating

Lesson

This data type is designed for storing all information related to Lesson.

Field name	Type	Notes
Course	Course	Course name
Description	Text	Lesson description
Materials	List of Files	Lesson materials
Name	Text	Lesson name
Questions	List of QAs	Lesson questions
Section	Section	Lesson section
Time	Number	Lesson time
URL	Text	Lesson URL

Note

This data type is designed for storing all candidate related Notes.

Field name	Type
Content	Text	Note content
Creator	User	Note creator
Create Date	Date	Note create date

Notification

This data type is designed for storing user related information to Notification.

Field name	Type
Course	Course	Course name
Recipient	User	Notification recipient
Seen	Yes/No	Notification seen
Sender	User	Notification sender
Text	Text	Notification content

Progress

This data type is designed for storing user related information to Progress.

Field name
Lesson	Lesson	Lesson name
Purchased	Purchased	Progress purchased
Status	Yes/No	Progress status

Purchased

This data type is designed for storing Purchased related information.

Field name	Type
Course Price	Course	Course price
Course Purchased	Number	Course purchased
Progress	List of Progress	Purchased progress
Student	Student	Purchased student

QA

This data type is designed for storing QA related information.

Field name	Type
Answer	Text	Answer content
Course	Course	Course name
Lesson	Lesson	Lesson name
Question	Text	Question content

Section

This data type is designed for storing Section related information.

Field name	Type
Course	Course	Course name
ID	Number	Section ID
Lesson	List of Lessons	Section lessons
Name	Text	Section name

Student

This data type is designed for storing Student related information.

Field name	Type
Complete Courses	List of Courses	Student complete courses
Course Statistics	List of Courses Statistics	Student statistics
Courses	List of Courses	Student courses
Favorites Courses	List of Courses	Student favorite courses
Finished Lesson	List of Lessons	Student lessons
Library	List of Docs	Student docs
Purchased	List of Purchases	Student purchased
Teachers	List of Teachers	Student teachers

Teacher

This data type is designed for storing Teacher related information.

Field name	Type
Bio	Text	Teacher bio
Courses	List of Courses	Teacher courses
Feedback	List of Feeds	Teacher feedbacks
Library	List of Docs	Teacher libraries
Specialization	Text	Teacher specialization
Students	List of Students	Teacher students

User

This data type is designed for storing user related information and precisely to indicate user type.

Field name	Type
About	Text	User information
Courses	List of Courses	User courses
Email Notifications	Yes/No	User email notification status
Email	Text	User email
Name	Text	User name
Notes	List of Notes	User notes
Notifications	Yes/No	User notification status
Profile Photo	Image	User photo
Purchased	List of Purchases	User purchased
Student	Student	User students
Surname	Text	User surname
Teacher	Teacher	User teachers
Type	Option set: User Type	User type

---

Option sets

Duration

• 1 - 5 lessons

• 6 - 10 lessons

• 11 - 15 lessons

• 16 - 20 lessons

Genres

• Art

• Article

• Bios & History

• Science

• Psychology

Notification Type

• New course!

• Platform news!

User Type

• Teacher

• Student

---

The template is available in its current form, however, further alterations can be negotiated.

Don't hesitate to reach out to us with any questions, and we'll gladly explore options to accommodate your concepts – Visit us at https://appassion.io/ or email us at [e-mail]

We are always at your service through: Upwork, Clutch.