How to build an eLearning platform in Bubble.io: Step-by-Step Guide

In the Data tab, create these Data Types: (1) Course — fields: title (text), description (text), instructor (User), thumbnail (image), category (Option Set: CourseCategory), is_published (yes/no), price (number). (2) Module — fields: course (Course), title (text), order_index (number), description (text). (3) Lesson — fields: module (Module), title (text), order_index (number), video_url (text), content (text), duration_minutes (number). (4) Quiz — fields: lesson (Lesson), question (text), options (list of texts), correct_answer_index (number). (5) Enrollment — fields: student (User), course (Course), enrolled_date (date), completed_date (date), progress_percent (number). (6) LessonProgress — fields: enrollment (Enrollment), lesson (Lesson), completed (yes/no), completed_date (date), quiz_score (number). (7) Discussion — fields: course (Course), author (User), message (text), parent_discussion (Discussion).

Create a 'courses' page with a Repeating Group showing published courses (Do a Search for Courses where is_published = yes). Display thumbnail, title, instructor name, category, and price. Link each cell to a 'course-detail' page (type = Course). On the detail page, show the course description, module list (Repeating Group of Modules where course = Current Page Course, sorted by order_index), and an Enroll button. The Enroll workflow: (1) Create an Enrollment with student = Current User, course = Current Page Course, progress_percent = 0. (2) Navigate to the first lesson of the first module.

Create a 'lesson' page (type = Lesson). At the top, embed the video using an HTML element with an iframe pointing to the lesson's video_url. Below the video, display the lesson content text. On the left sidebar, show the course module structure with a nested Repeating Group: outer RG for Modules, inner RG for Lessons within each module. Highlight the current lesson. Add checkmarks next to completed lessons by checking if a LessonProgress exists where enrollment's student = Current User and lesson = Current Cell's Lesson and completed = yes. Add Previous and Next buttons that navigate to the adjacent lesson based on order_index.

Add a Mark as Complete button below the lesson content. The workflow: (1) Create a LessonProgress with completed = yes if one does not already exist, or update the existing one. (2) Calculate new progress_percent on the Enrollment: count of completed LessonProgress records divided by total lessons in the course, multiplied by 100. (3) Update the Enrollment's progress_percent field. For quizzes, when a lesson has associated Quiz records, display them after the video. Show the question, answer options as clickable buttons, and check the selected answer against correct_answer_index. Store the quiz_score on the LessonProgress. Only allow Mark as Complete if the quiz score meets a minimum threshold (e.g., 80%).

On the course detail page, add a Discussion tab. Display a Repeating Group of Discussions where course = Current Page Course and parent_discussion is empty (top-level posts), sorted by Created Date descending. Inside each cell, show the author, message, date, and a Reply button. Replies are loaded in a nested Repeating Group where parent_discussion = Current Cell's Discussion. The Reply button shows a text area and Submit button that creates a new Discussion with parent_discussion set to the current post. Add a New Discussion form at the top for starting new threads.

When an Enrollment's progress_percent reaches 100, trigger a workflow to generate a certificate. Create a Certificate Data Type with fields: enrollment (Enrollment), certificate_number (text, auto-generated), issued_date (date). The workflow creates the Certificate record and updates the Enrollment's completed_date. For the visual certificate, create a 'certificate' page showing the student name, course title, completion date, and certificate number in a designed layout. Use Bubble's built-in ability to convert a page to PDF or use a plugin like PDF Conjurer to generate a downloadable certificate. Add a View Certificate button on the student dashboard.