Plura: A Revolutionary SaaS Application for Agency Owners

Plura empowers agency owners to build and manage their businesses seamlessly with innovative features and customizable tools.

### Unlock Your Potential: Build a Powerful Multi-Tenant SaaS Application
* 🚀 Imagine having the superpowers to **create anything you can dream of**; this is what the Plura project offers, a **multi-tenant SaaS application** designed for agency owners.
* 🛠 Built using advanced technologies such as Bun, Stripe Connect, Next.js 14, Tailwind CSS, and Clerk authentication, this project has been meticulously developed over two months to **empower users, even beginners, to navigate its architecture easily**.
* 📋 The first step involves creating a **functional landing page** where agency owners can sign up, followed by a **dashboard that allows them to manage their agencies and clients efficiently**.
* 💳 Integrating Stripe Connect enables users to **charge monthly subscriptions** and **collect platform fees** from transactions, offering a **seamless onboarding experience** for agency owners and their clients.
* 📊 Users can upgrade to premium plans, access **customizable add-on products**, and manage their subscriptions through a professional interface that **enhances user experience**.
* 📈 The application supports sub-accounts for clients, allowing agency owners to **manage multiple clients effectively**, with features such as **media storage**, **contact management**, and **Kanban-like pipelines for tracking tasks**.
* 🔧 The intuitive funnel builder enables sub-account users to create and manage websites and sales funnels, with **drag-and-drop functionality** and **responsive design previews** to ensure **optimal user experience**.
* 🌐 Join the free community to access **valuable resources, mentorship**, and a chance to learn freelancing skills that can help you **achieve your goals** while building this **powerful application together**.

### User Management and Agency Setup in Clerk
* 👤 To manage the current user, we first check if a user **exists**; if not, we **return immediately**.
* 📥 If the user is present, we fetch their data from the database using their **email address**, including necessary details like **agency**, **sidebar options**, **sub-accounts**, and **permissions**.
* 🔍 If no user data is found, we prompt the user to **create an agency account**, while also checking for roles such as **sub-account** or **guest**.
* 📩 For users with an invitation, we verify their invitation status and create a team user if applicable, ensuring to **log relevant activities**.
* 📝 To create activity logs, we define a function that **captures user actions**, linking them to the relevant **agency or sub-account**.
* 🚀 We also handle user metadata updates and deletion of invitations post-account creation to **streamline user management**.
* 🔗 Finally, we implement **redirection logic based on user roles and agency existence**, guiding users to the appropriate pages based on their status.
* ⚙ The overall structure ensures a **seamless experience for users** while managing **agency and sub-account functionalities effectively**.

### Building a Custom Modal and User Management System in React
* 🔧 The process begins by creating a **custom modal component** to manage user interactions effectively, which includes **extracting properties** and customizing the UI elements like the **X icon** that appears on the modal.
* ⚙ As part of the setup, unnecessary focus rings and other styles are removed to **enhance the visual appeal**, while ensuring that props are passed correctly and that optional settings are implemented.
* 📊 The layout includes a sidebar that displays user information, with specific conditions to **show or hide elements based on device type and user permissions**, allowing for a **responsive design**.
* 🖼 An image component is introduced to showcase logos, with specific styling applied to ensure a **clean and professional appearance**, while popover components are utilized to display **additional options and functionalities**.
* 📝 A command input feature is integrated to allow users to search for accounts, with **dynamic rendering based on user roles and permissions**, ensuring that **only relevant data is displayed**.
* 🔒 User permissions are managed through a structured approach, ensuring that **agency owners cannot change their roles**, while providing functionality to **update permissions for sub-accounts**.
* 🚀 The final touches involve creating an **onboarding Launchpad** that guides users through **essential setup steps**, integrating various components seamlessly to **enhance user experience**.
* 📈 Overall, the system emphasizes a **structured approach to user management**, ensuring that all functionalities are **intuitive and accessible**, while also being **visually appealing**.

### Building a Sub-Account Management System with Media Upload and Pipelines
* 🔍 The project focuses on creating a **sub-account management system**, allowing users to **manage sub-accounts**, **upload media**, and **interact with pipelines**.
* 🖼 The implementation includes a media upload feature where users can **upload images and files to their media bucket**, making it **easier to manage assets for their projects**.
* 💾 A structured approach to managing uploaded media is established by creating a **media component** that displays **all media files** associated with a sub-account.
* 🗂 The code includes a **robust alert dialog system** that prompts users for confirmation when deleting media files, ensuring that **accidental deletions are minimized**.
* ⚙ The system also integrates a **pipeline management feature**, allowing users to **create and manage pipelines**, which are essential for **tracking project progress**.
* 📜 The architecture includes various components such as **loading indicators**, forms for media upload, and a layout structure that **organizes the user interface effectively**.
* 🔄 Error handling is implemented throughout the system, providing users with **feedback during interactions** and ensuring a **smooth user experience**.
* 🔗 The project emphasizes **modular design**, allowing for **easy scalability and maintenance** by separating concerns across different components and files.

### Building a Comprehensive Pipeline Management System
* 🔄 The system begins by checking for existing pipeline details; if none exist, it redirects the user to **subaccount management for creating a new pipeline**.
* 📊 It retrieves pipelines associated with a specific **subaccount ID**, which are then displayed in a **dropdown for selection**.
* 📋 The concept of lanes is introduced, where a pipeline is akin to a **board**, and lanes represent the **columns** on that board, requiring data on **tickets and tags**.
* 📂 A new type called **LaneDetails** is created, extending the Prisma client to include **tickets and tags**, ensuring all necessary information is **imported for further processing**.
* 🔍 Queries are constructed to fetch lanes along with their associated **tickets and tags**, ensuring the data is **ordered correctly for user display**.
* 📑 A UI component is built using **Tabs** from the UI library, which allows users to **navigate between different views** within the pipeline management interface.
* 📝 The creation of a **Pipeline Info Bar component** is initiated, which will display **essential information** and allow users to **manage pipelines effectively**.
* 🛠 Throughout the development process, various components are created, such as forms for creating pipelines and lanes, ensuring the system is **robust and user-friendly**.

### Building a Dynamic Tag Management System
* 🔍 The primary goal is to create an input field that allows users to **search for existing tags** and **filter them accordingly**.
* ✏ If the searched tag does not exist, users should have the option to **create a new tag** by providing a **title** and selecting a **color**.
* 🛠 The component will accept several props including **`subaccount ID`**, a function **`get selected tags`**, and a default tags array to **manage the state of selected tags**.
* 🎨 A constant for tag colors will be defined, including options like **blue, orange, and green**, and a type for tag colors will be **exported for future use**.
* 📊 State management will involve **tracking selected tags** using the `useState` hook, and a `useEffect` will be implemented to **update selected tags whenever they change**.
* 💡 The UI will feature an **alert dialogue for tag selection**, displaying selected tags in a **visually appealing format**, and allowing users to **remove tags with an X icon**.
* 📝 The component will also include a **search input for users to find tags quickly** and a button to **trigger the tag creation process**, ensuring a **smooth user experience**.
* 🔄 Finally, the backend functionality will be integrated to handle **tag creation and deletion**, ensuring that the system is **robust and user-friendly**.

### Building a Subscription-Based Funnel Management System with Stripe Integration
* 🛠 The process begins by setting up the model and router using `useModel` and `useRouter`, respectively, while creating a state for the **selected price ID** to manage subscription plans.
* 📊 To ensure that the necessary data is available, the plans data must be defined in the modal provider, which includes **importing the required types from the Prisma client**.
* 💳 The next step involves creating a **subscription state** to manage the **subscription ID** and **client secret**, which will be used to facilitate payments through Stripe.
* 🔄 A `useEffect` hook is implemented to handle the **creation of a subscription** when the component renders, making an **asynchronous call to the Stripe API** to fetch the **client secret** based on the selected **price ID**.
* 📬 If a plan already exists for the user, a toast notification will inform them that their plan has been **successfully upgraded**, and the router will refresh to reflect the changes.
* 📋 The subscription form wrapper is imported to display the subscription options, with the **selected price ID being set through a click event**, allowing users to **choose their desired plan**.
* 💻 As users interact with the form, they can see their **selected plan details**, and upon submission, the necessary actions will be triggered to **confirm the payment and update the subscription information accordingly**.
* 🔗 Finally, a webhook is set up to ensure that any subscription events from Stripe are properly handled, allowing for **seamless integration and management of subscriptions** within the application.

### Building a Comprehensive Funnel Editor: Architecture and Functionality
* 📱 The funnel editor is designed to be **responsive**, ensuring **full width on mobile devices** while managing **overflow appropriately**.
* 🎨 A placeholder image created in Canva has been converted to SVG format, allowing for **color adjustments in light and dark modes**.
* 🔗 The editor's functionality includes links to specific funnel IDs and preview links, with **error handling for non-existent domains**.
* 🛠 The architecture consists of a **navigation editor sidebar** and the **main editor**, wrapped in a **data layer** to manage **editor state and history**.
* 📜 Editor elements are categorized into **custom static elements** and **recursive elements**, which can contain other elements, enhancing the editor's **flexibility**.
* 🔄 The history state management allows for **undo and redo functionalities**, tracking changes in the editor and providing a **seamless user experience**.
* 💡 The editor supports a variety of components, including sliders and input fields, for customizing element styles, such as **color and opacity**.
* 📂 A media bucket feature enables users to **upload and manage media files**, integrating them into the funnel editor for **dynamic content creation**.

### Building a Dynamic Funnel Page Editor with Drag-and-Drop Functionality
* 🛠 The process begins by creating a query function named `get funnel page details`, which retrieves specific page content based on a **funnel page ID**, allowing for **dynamic content loading**.
* 📦 When data is fetched, if a response is received, it dispatches a **`load data` action** to update the state with the fetched elements and determines if the component should be in **live mode**.
* ⚡ To enhance performance, server-side rendering is utilized to **pre-load data**, preventing delays that could result in a **blank screen** during client-side data fetching.
* 📲 The editor's layout is designed to **adapt to different modes** (preview and live), adjusting margins and padding to ensure a **seamless user experience** across devices.
* 🖱 Interactivity is introduced with click events that dispatch actions to **change the selected element**, enhancing user engagement through **visual feedback**.
* 🔄 A recursive component structure is implemented to handle various element types (text, containers, etc.), allowing for **nested components** and maintaining a **clean codebase**.
* The drag-and-drop feature is integrated, enabling users to **move elements within the editor**, which is **crucial for a flexible design process**.
* 💻 Additional components, such as contact forms and payment forms, are built to allow users to **create functional elements**, with careful attention to **data handling and submission processes**.

### Building a SaaS Application with Stripe Integration: A Comprehensive Guide
* 🚀 The loading form for the application utilizes Global loading, displaying the form if **both client ID and client secret exist**; otherwise, it shows a **loading message**.
* 🔄 Debugging revealed that the recursive component needed **support for the checkout form**, prompting an import to resolve **loading issues**.
* 🔍 Research indicated that the create checkout session must return a valid response with **JSON data** to avoid errors, such as "**unexpected end of JSON**."
* ⚠ An unnecessary section checking if the agency account is connected was identified, with an emphasis that the focus should be on **collecting payments for Plura**.
* 💡 A challenge was presented to **implement a feature for transferring money to connected accounts**, with resources provided for further exploration.
* 💻 The dashboard was developed to display various metrics, including **net income** and **potential income**, utilizing Stripe data to **enhance functionality**.
* 📈 The application was successfully deployed on Vercel, with a focus on ensuring that **all environment variables and database connections** were correctly configured for production.
* 🔗 The importance of setting up webhooks for Stripe integration was highlighted, emphasizing the **need for proper endpoint configurations** to handle connected accounts effectively.

SaaS Website Builder, Project Management And Dashboard: Nextjs14, Bun, Stripe Connect, Prisma, MySQL

Giving you free web development tips and tricks everyday!

Im Perrin,
A seasoned web developer with over 7 years of professional experience. My passion lies in utilizing modern technologies to create user-friendly responsive web applications. Ive worked with startups and fortune 5 companies helping them generate more than $20M+ in revenue! Im here to share my knowledge with you today so that you can accomplish the same, if not even better! 


Web Prodigies

Plura is a multi-tenant SaaS application designed to empower agency owners, using technologies like Bun, Stripe Connect, and Next.

The platform offers a seamless onboarding process, dynamic dashboard, and the ability to create sub-accounts for clients.

With features like custom Stripe forms, add-on products, and a fully functional website builder, Plura aims to provide agency owners with the tools they need to manage and grow their businesses effectively.

Downloading Images and Setting Up the Project

Download all images from the public folder and organize them into an assets folder.

js' Image component and set the source to the downloaded preview image.

Build the navigation component, set up dynamic routing, and initialize Prisma for database management.

Building Relationships in an Agency Database

An agency can have multiple owners, while each owner can only belong to one agency.

The relationship is established through an agency ID, with a cascading delete action to remove owners when the agency is deleted.

The database schema includes tables for users, permissions, agencies, sub-accounts, notifications, and more, with various fields and relationships to manage user access and actions within the agency.

The form includes features for uploading a logo, entering agency details, and providing a goal for the agency.

It uses a combination of UI components and hooks for state management and API calls.

The form also includes validation, error handling, and the ability to create or update agency information, with a seamless transition to the agency's page upon successful submission.

The sidebar component is designed to be reusable for both agency and sub-account views, as well as mobile devices.

It takes two props: ID (string) and type (either agency or sub-account).

The component fetches user details, determines the appropriate logo, and generates sidebar options based on the user's role and permissions.

Upserting Sub-Accounts: A Step-by-Step Guide

The upsert sub-account query is built using an async function that takes the sub-account as a parameter and checks for the agency owner.

If the agency owner is not found, an error is logged.

The function then creates a new permission and upserts the sub-account, setting the necessary fields and connecting the permission.

Default sidebar options are also created for the sub-account.

The process is repeated for the user details, with the ability to change user information and update permissions.

The implementation includes error handling, loading states, and a custom modal for creating sub-accounts.

The component structure includes a form item for user roles with a select dropdown, using the Shad CN UI library for the select component.

The logic handles user role changes, disabling the dropdown for certain roles, and saving user details.

Additionally, the component includes a button for submitting changes, a section for user permissions, and a dynamic list of sub-accounts with the ability to change permissions and delete sub-accounts.

The code also implements a modal for creating new sub-accounts and a data table for displaying user roles and permissions.

Setting Up a Data Table with React and Trans Stack

The process begins by installing the Trans Stack table using a Bun command and then running the development server.

Key imports from Trans Stack React Table are made, including column definitions and core row models.

The data table component is then created, with generic types for data and value, and a React fragment is used to structure the layout, including a search component and table rendering logic.

Building the Media Component and Pipeline Management

The media component displays all uploaded media files for the user, allowing easy access to copy-paste URLs.

The setup includes creating a media folder, defining a media page, and implementing functions to fetch and create media files.

The pipeline management involves setting up pages for pipelines, querying pipeline details, and using a dropdown for selecting and managing multiple pipelines.

The process involves creating a custom modal for a pipeline, followed by building a simple form with one field for the pipeline details.

The form schema and the upsert functions for both the funnel and pipeline are defined, along with the necessary types.

The component structure includes a tabbed interface for viewing and managing pipelines, with features for adding lanes, updating orders, and managing tickets with tags.

The use of React Beautiful DND is incorporated for drag-and-drop functionality, and various queries are created to handle data fetching and updates.

Building a Ticketing System with Drag-and-Drop Functionality

The ticketing system is being developed with a focus on creating and managing tickets through a pipeline view.

The process involves importing necessary components, setting up state management, and implementing drag-and-drop functionality for ticket lanes.

Additional features include assigning team members, adding tags, and searching for contacts, all aimed at streamlining the ticket management process.

The Tag Creator component allows users to search for, create, and select tags.

It uses state management to keep track of selected tags and provides functionality to add and delete tags.

The component also fetches existing tags from the database and updates the UI accordingly, while offering a seamless drag-and-drop feature for organizing tasks.

Implementing Contact Management and Stripe Integration

The contact management system uses an async function to upsert contacts in the database, with a simple form for name and email.

The system allows for assigning contacts to tickets and provides a pipeline view of estimated ticket values.

The tutorial then transitions to integrating Stripe for account management, creating connected accounts, and setting up subscriptions, with detailed steps for configuring the Stripe dashboard and updating the application.

Implementing a Subscription Model with Stripe

The subscription model is integrated by importing necessary components and using URL search parameters to determine the user's plan.

A pricing card is created to display plan options, with a button that triggers a modal for plan selection.

The subscription form is set up to handle user input and interact with Stripe for payment processing, while a webhook is established to synchronize subscription data with the database.

Debugging and testing are conducted to ensure the functionality works as intended.

Debugging Subscription Creation and Connecting Stripe Accounts

The user struggled with creating a subscription, initially signing up for the wrong plan due to the settings' pro-rated charging.

They then faced challenges in updating the plan and connecting Stripe accounts for both the agency and sub-accounts.

The process involved creating dynamic folders and pages for funnels, setting up product tables, and implementing drag-and-drop functionality for funnel steps.

Building a Funnel Page with Drag-and-Drop Functionality

The code outlines the process of creating a funnel page with a drag-and-drop feature, using a provided function for page mapping and state management.

It includes functions for handling drag events, updating the page order, and making API calls to save changes.

The editor's architecture is explained, highlighting the use of static and recursive elements, and the implementation of a history state management system for undo and redo actions.

Creating a Redux-like Editor State Management

The editor's state is managed using a reducer that dispatches actions like adding, updating, and deleting elements.

The reducer uses a switch statement to handle different action types and updates the editor's state and history stack accordingly.

The context provider is set up to provide the editor's state and dispatch function to components, allowing them to manage the editor's state and actions seamlessly.

The funnel editor includes a tab list with multiple triggers for settings, components, stacks, and media files.

A second sidebar is created to render the specific tab content based on user selection.

The editor allows for real-time customization of elements, including text and media, with features like draggable components, live mode, and the ability to update styles and properties dynamically.

Building a Drag-and-Drop Editor with Recursive Components

The editor's container component is designed to be recursive, allowing for the nesting of other elements and containers.

Drag-and-drop functionality is implemented to enable users to move elements from the sidebar into the container.

The component also includes features for selecting, deleting, and duplicating elements, as well as dynamically rendering child elements based on the container's content.

Building a Dynamic Web Component with Link and Form Functionality

The component renders a link or span based on the production mode, preventing unwanted page redirects.

A recursive component is used to create a two-column layout, allowing for the addition of elements.

The contact and payment forms are built to capture leads and process payments, with API calls and client secret generation integrated for Stripe functionality.

Building a Web Application with Subdomains and Funnels

The application requires a unique subdomain for each funnel and retrieves funnel page data based on the subdomain.

It includes logic to handle page not found errors and updates visit counts for funnel pages.

The dashboard provides metrics for agencies and sub-accounts, offering insights into closed sessions, pending sessions, net income, and potential income, with a focus on freelancing and building a supportive community for success.

Building a SaaS Application: From Development to Deployment

The process involves calculating pipeline values, creating card components, and implementing a progress component for pipeline tracking.

The application also includes a funnel performance chart, checkout activity, and a transaction history table.

Finally, the deployment to Vercel and setting up a production database with PlanetScale completes the application setup.