Building a Multi-Level System from Scratch with Bubble 😎😎🐱‍🏍🐱‍🏍

This video provides a detailed, step-by-step tutorial on building a multi-level marketing (MLM) system from scratch using Bubble, a no-code development platform. The creator emphasizes the simplicity and foundational aspects of the system, aiming for high functionality. The tutorial covers essential components such as database structuring, user authentication (login and registration), profile management, and a referral system to track direct and indirect downlines across multiple levels. It also touches upon user interface (UI) design, including responsive layouts and visual elements like profile pictures and progress bars for tracking level advancement. The video highlights the importance of design in user experience and encourages viewers to join their WhatsApp group for support and questions.

Building a Multi-Level Marketing System with Bubble

The tutorial begins by outlining the objective: to develop a simple yet highly functional MLM system. The presenter welcomes new viewers and encourages them to subscribe, like, and share the video. They also mention a separate series on creating a Point of Sale (POS) system, available in the video description for those interested in learning a new profession.

"For those of you who are new here on the channel, I ask you to subscribe, leave your like, share the videos, watch the classes, and if you have any questions, join our WhatsApp group in the video description."

Application Setup and Page Configuration

The first step involves creating a new application within the Bubble editor, named "app multis." The presenter then configures the main page layout, setting it to a column type with five-pixel spacing between elements and a fixed width. This provides a clean and organized structure for the application's interface.

Designing the Dashboard Group

A central group, designated as the "dashboard," is created. This group is also set as a column, centralized, with a minimum width of 320 pixels. A light background color is applied to the page to differentiate visual groups, with the dashboard group itself having a white background. An icon is placed at the top, labeled "dashboard," and grouped with a text element to ensure they move together. The dimensions of this group are adjusted for better aesthetics, with a minimum width of 150 pixels and a height of 100 pixels. The dashboard will eventually display user-specific information.

User Profile Section

A new group is added within the dashboard to display user profile information. This group is configured as a row, centralized, and will contain an image element for the user's profile picture and a text element for their full name. The image is set to be circular with dimensions of 50x50 pixels. The text for the name is styled with a larger font size (24) and aligned centrally with the image. This section dynamically pulls information for the currently logged-in user, showing their profile picture and full name.

Database Structure for MLM System

A critical phase is the creation and structuring of the database. The presenter details the essential fields for the "Users" data type:

Additionally, a "Network" data type is established to manage the multi-level structure:

Referral Link and Copy Functionality

An input field labeled "Input Link" is added below the profile section. This field will display the user's unique referral link, composed of the website's URL and the user's token. A "Copy Link" button is also included. To enable the copy functionality, the presenter installs a "Copy to Clipboard" plugin. An alert message "Link copied successfully!" appears upon successful copying.

Classification and Level Progression

Below the referral link, a "Classification" section is introduced, containing a dynamic progress bar for each level (Level 1, Level 2, etc.). The presenter installs a "Progress Bar" plugin. Each progress bar tracks the advancement through the specific level. The value of the progress bar is calculated by searching the "Network" data type for users sponsored at that particular level. For example, Level 1's progress bar counts users where "First Sponsor" equals the current user's token and multiplies the count by 25 to show an accelerated progression. This system is designed to provide bonuses or rewards upon reaching 100% completion for each level.

"Here's where the secret of the business lies: it will count how many users are registered at the first level. Then you will set a condition for when the exact number of users reaches 100%, you will give a prize, a gift, a bonus—it's all the same thing—to the person who reaches the first level. That's the idea of the multi-level system."

Initially, all level texts (Level 1, Level 2, etc.) are set to be invisible and collapse when hidden. They become visible based on conditions related to the user's network. For instance, "Level 0" is visible if the user's token is not found in the "First Sponsor" field of any network entry (meaning they haven't sponsored anyone yet). Subsequent levels become visible when the user has sponsored at least one person at that specific level (e.g., Level 2 becomes visible when someone is found in the "Second Sponsor" field with the current user's token).

Registration Page Development

A separate "Registration" page is created to handle new user sign-ups. This page includes input fields for:

Full Name
Nickname
Email (type: email)
Password (type: password)
Profile Photo (picture uploader)

All fields are marked as mandatory. Crucially, an input field is included to display the "Sponsor" of the new user. This field is automatically populated by extracting the "token" parameter from the URL, which is how the system identifies who referred the new registrant.

User Registration Workflow and Multi-Level Logic

The "Confirm Registration" button on the registration page triggers a workflow that manages user creation and network updates:

Account Creation: A new user account is created using the provided email and password.
User Data Storage: The user's full name, nickname, profile photo, and the sponsor (obtained from the URL parameter) are saved.
Token Generation: A unique "token" is generated for the new user, combining their nickname with four random numbers.
Network Entry Creation: A new entry is created in the "Network" data type for the newly registered user.
- First Sponsor: Set to the value of the "Sponsor" input field (the direct referrer).
- Second Sponsor: A search is performed in the "Users" data type where the token matches the new user's first sponsor. From this result, the sponsor's sponsor (the second level up) is pulled.
- Third and Fourth Sponsors: Similar logic is applied, progressively pulling the sponsor of the previous level's sponsor.
- Referrals: The current user's email is added to the "Referrals" field for their direct sponsor. Note: The video shows some confusion on this, but the intent is to track direct referrals.
Input Reset: All input fields on the registration page are reset.
Navigation: The user is navigated to the "Index" page after successful registration.

Login Page Functionality

A "Login" pop-up is created on the index page, appearing only when a user is not logged in. It features input fields for email and password, and a "Login" button. The login workflow authenticates the user, and upon success, hides the pop-up and makes the main dashboard visible.

Network Visualization (My Network)

A "My Network" section is introduced, accessible via a floating footer with navigation icons (Home, My Network, Logout). This section (initially hidden) displays a repeating group of all users within the current user's network. The repeating group filters "Network" entries where any of the sponsor fields (first, second, third, or fourth) contain the current user's token. This allows users to view their entire downline across different levels. Each entry in the repeating group shows the profile picture and full name of the networked user.

Testing and Debugging

The presenter conducts a live test, registering a user ("Naruto") and demonstrating the referral link copying. They then register another user ("Maria") using Naruto's referral link. This demonstrates how Naruto's classification progresses, showing 50% completion for Level 1 after Maria's registration (since the progress is multiplied by 25 and two registrations would net 50, but the video mentions only one registration got it to 50 suggesting 1 registration = 50% for level 1). The video concludes with the system generally functioning as intended, encouraging viewers to perform further testing and provide feedback.

Feature	Description	Key Elements
Application Setup	Creating a new Bubble app and configuring basic page layouts.	New app creation, Column layout, fixed width.
Dashboard Design	Setting up the main user interface for the dashboard.	Dashboard group (column), central alignment, icon, text.
User Profile	Displaying logged-in user information.	Current user's photo (circular), full name, central alignment.
Database Structure	Defining data types and fields for users and network.	Users (Name, Nickname, Photo, Sponsor, Token), Network (Referrals, 1st-4th Sponsors).
Referral System	Generating and allowing copying of unique referral links.	Input field for link, Copy button, "Copy to Clipboard" plugin, alert message.
Level Progression	Visualizing user progress through MLM levels.	Progress Bar plugin, dynamic calculation based on sponsored users, conditional visibility of levels.
Registration Page	Enabling new user sign-ups with sponsor tracking.	Input fields (Name, Nickname, Email, Password, Photo), Sponsor field populated from URL parameter.
Registration Workflow	Automating user creation and network updates upon registration.	User creation, data storage, token generation, Network entry creation (recursive sponsor linking), input reset, page navigation.
Login Functionality	Allowing users to log into the system.	Login pop-up (email, password), user authentication, pop-up hiding, dashboard visibility.
Network Visualization	Displaying the user's downline structure.	Repeating group pulling "Network" data, filtering by current user's token in sponsor fields, displaying networked user's photo and name.

Takeaways

No-Code Development Power: This project demonstrates the capability of Bubble as a no-code platform to build complex, functional applications like an MLM system without writing a single line of code.
Database-First Approach: Proper database structuring is crucial for managing complex relationships, especially in MLM systems with multiple levels of referrals and sponsorships.
Visual Feedback for User Engagement: Implementing visual elements like progress bars provides users with immediate feedback on their progress and motivates them to achieve higher levels within the system.
Importance of User Experience (UX): The tutorial highlights that while functionality is key, the design of an application's frontend (UI/UX) significantly impacts user adoption and satisfaction.
Community Support for Learning: The presenter emphasizes the value of community (via a WhatsApp group) for supporting learners and troubleshooting issues, underscoring that collaboration can overcome development challenges.