Coursely - Online Learning | Udemy Template
Template page link: https://zeroqode.com/template/coursely---online-learning-%7C-udemy-template-1510064490072x585729930097066000
Coursely is an amazing template for an online learning platform similar to Udemy. This responsive platform allows any user to sell their course and get paid automatically. Have a lesson, course, or curriculum to share? Get paid for generating subscribers! This no-code app template features Stripe integration for credit card payments and Braintree for PayPal. The platform owner may establish commission rates, in order to profit off courses other content producers will add. The template comes with an admin dashboard to manage global settings, messaging functionality, and fully responsive user interface.
Landing page
Responsive design
Stripe payments
Braintree for Paypal payments
Admin dashboard
Messaging system
Users can record and upload videos made by possible by the ziggeo plugin.
Social media share links
Payments: See the documentation on how to set Stripe Payments in Bubble App.
The user data type stores all the information necessary for all the users to utilize this platform. Some of the fields on this data table include stripeseller (takes the value of either Yes or No and it is true when the user sells services using the Stripe integration), userInstructor (also takes either Yes or No), userExpertise, userClasses (takes a list of classes), userPhoto, userReviews, Conversation list (also takes a list as value), etc.
Courses created by users (Instructors) are grouped into predefined classes, this classes are loaded from the Category data table. It contains three fields or data table columns that include categoryClass (takes a list of classes), categoryName and subCategory (takes a list of Subcategories).
This data type holds all the details for courses created by a user. It has fields that include classCategory (takes the associated Category), classDraft (this field is either Yes or No), classPrice, classLesson (takes a list of Lessons), classUsers (takes a list of users), classSubCategory (takes the associated subCategory), classSection (List of Sections), etc.
The Conversation data type takes just two fields; the Message list (Takes a list of messages) and the Recipient (takes the associated user).
Dashboard menu holds only the menuIcon (takes an image) and the menuName.
Files can be uploaded on this platform and the file data type holds the field file that also takes a file format.
Every class or course created by a user has a number lessons in it and the details about each lesson is stored in fields on the lesson data type. These fields include lessonDurationSeconds (takes a number value), lessonFile, lessonInfo, lessonName and the lessonSection (takes the associated Section).
The body of conversations on this platform between users is stored in the messageBody field of the Messages data type. There is also the messageNew field that takes the value of either Yes or No and is true when the message is recent.
An agreed commission is paid by a service provider on this platform and this data type holds the field platformFee that takes a number value for that fee.
Users can always write reviews about available courses on the platform and the Review data type collects those reviews in fields like the reviewBody (takes a text value), reviewClass (takes value of the associated class) and the reviewRating (takes a number value)
Each class or course has lessons and a group of lessons fall under a section. This data type groups lessons using fields like the sectionClass (value is the associated class), sectionDescription, sectionLessons (value is a list of Lessons) and the sectionName.
This data type holds three fields that include category (associated Category), subCategoryClasses (takes a list of classes) and the subCategoryName.
Inside this data table, there is the Amount field (takes a number value) for the price set by the instructor, the Commissionfor the agreed fee paid by the instructor to the owner of the platform, the learner (the user purchasing a course), the refund field (takes value of either Yes or No and is true when the instructor has a refund policy), the instructor that owns the course being paid for, booking, listing and the stripe transaction id generated for every transaction.
The index page is the template's landing page, it features partnered companies, some courses available on the platform, testimonials from satisfied users and information about how the platform works. Also, call to action for quick a signup, login and to become an instructor are all found on this page.
There are no custom states on the index page.
This page populates a list of available courses under a given category. Each list item displays details about the course that include the price, class name, a brief headline, name of instructor. In addition to this, each list item provides the user with the option to bookmark a particular course.
Category page has no custom states.
When a course is selected from the category page, the class page is viewed and it provides more information about the course. This information varies from the course outline with video tutorials, what the course is all about, course requirements, duration of the course videos to reviews the course has been getting from other users.
States | Element | Note |
open section | RepeatingGroup Lesson Curriculum | open section takes a text as value and it determines which grouped list to open and view its child content |
close saction | RepeatingGroup Lesson Curriculum | This takes Yes or No as value and when it is true the open grouped list is collapsed |
Contact page provides the users with input forms to make inquiries or to ask for assistance. The form takes basic information such as name, subject for the message, email, and the content of the message.
This page has no custom states.
The help simply contains all help documentations and answers to frequently asked questions. It has no custom states.
This page is an alternate page for the landing page. There are no custom states here.
Privacy policy governing the use of the platform is viewed on this page.
The signup page contains three different views, one view is visible at a time. There is the signup form, the login form and the pop up dialog for resetting the password. Each view's visibility is triggered when a given action is performed.
States | Element | Note |
demo | signup | demo takes a value of either yes or no and is true when a visitor logs into the platform as a demo user. |
Terms and conditions of the platform are loaded on this page.
Simple page that displays blog posts and articles.
The checkout page populates a list of items selected by user and ready to be paid for. The user has the option to remove some items on this page and also to choose a payment method using either Stripe or Paypal.
checkout has no custom states
Within this page, all the details of a particular class can be viewed. These details include the list of the curriculum, number of students, number of courses in the class, instructor rating, number of reviews, information about the class instructor and an option to contact the instructor. In addition to this, the user can also share details about the class on their social media accounts, rate the class, write and post reviews.
There are no custom states on this page.
This page allows the admin user to perform read, write, update and delete actions on other user accounts.
States | Element | Note |
menu | dashboard | This state set and displays a view. |
When a user has a message, the inbox page displays the conversations in two lists; first is populated with the recipients name, and second is populated with the body of the message that is immediately visible once a recipient(list item) on the conversation list is clicked. While when there are no messages, the page shows the message to prompt the user that there no messages. Also within the list that shows the body of the conversation, the user has the option to send more messages.
There are no custom states.
When a user is an instructor, they have to create courses and this page provides a form to collect course details necessary for a creating and submitting a course. The user can also view, edit and delete already submitted courses and drafts.
On this page, the user can view and make changes to user information. Purchased courses, wish list and created courses if any are also displayed on this page. In addition to this, the profile page views course details such as number of students, number of courses the user is enrolled in, number of reviews and user ratings. There is also the option of sharing to social media accounts.
States | Element | Note |
coursesTab | profile | This state has values that determine which view the tab displays or the active view tab at a time on the profile page. In other words the coursesTab is used to change from one view to another. |
editProfile | profile | This state is also used to switch views; it takes Yes or No as its value and if true, |
This page is similar to the category page.
To setup your stripe account, go to stripe.com, create an account. You will be allowed to access your dashboard once you have successfully verified your email address and activated your account.
Click on Developers and then, API keys. copy your API keys. Ensure to use a live API key when your template goes live
Paste the API keys in the Stripe settings calling the plugin.
For Youtube API Call, during creation of application from template, Bubble may drop the values for URL parameters. If this happens it is possible to reinitialize the call, no worries.
You must have a developer account with Google to interact with the API. Create your development account at: https://console.cloud.google.com/home/dashboard and also enable Youtube API in console.
.png?alt=media&token=f9f31c99-7b57-4990-ad12-19efdf143943)
2. Get the key from Console - https://developers.google.com/youtube/registering_an_application#create_project
3. Paste the key in the URL parameters , where:
video_id = Youtube's video ID found in the URL parameter ?=
BzzqqCzJuSYkeyYoutube = The console's Youtube API key from you account
4. Initialize the API call
Now it is possible to use the API Connection for Youtube and manage videos.
Live Demo: https://udemytemplate.bubbleapps.io/