Creating client-branded applications doesn’t have to be complicated. In this guide, I’ll walk you through the process of building a multi-step article generation app using Lovable for the front end, Supabase for the backend, and n8n for automation—all without writing a line of code.
Building client-branded applications involves several key concepts that can simplify the development process. Understanding these concepts ensures that you create applications that meet client needs effectively.
At the core of this process is the decision between a multi-instance and multi-tenant architecture. This decision shapes how client data is managed and how the application will scale. A multi-instance approach creates separate applications for each client, while a multi-tenant approach allows multiple clients to access the same application. Each has its advantages and challenges.
In addition, payment processing is crucial for monetizing your application. You can handle payments outside the application or integrate directly with payment platforms. This choice impacts how you manage user accounts and subscriptions.
Choosing the Right Architecture: Multi-Instance vs. Multi-Tenant
Selecting the right architecture is foundational for any application. Here’s a breakdown of the two main choices:
- Multi-Instance: Each client has a separate application. This makes it easier to isolate client data and customize features based on specific needs. However, it can lead to higher costs and complicated onboarding processes.
- Multi-Tenant: All clients share the same application, which is more cost-effective and easier to scale. Data is separated by user IDs and access roles, but it requires careful management to ensure that clients do not see each other’s data.
Making this decision requires careful consideration of your clients’ needs and your long-term goals for the application.
Setting Up Payment Processing
Payment processing can be a complex task, but it’s essential for building a profitable application. You have two primary options:
- External Payment Handling: You can take payments during the onboarding process outside of the application. This method allows for easier management of user accounts in Supabase.
- Direct Integration: Integrating payment processing directly within your application can streamline the user experience. However, this option is still developing, and it’s wise to have a developer review the implementation before going live.
Choosing to handle payments externally simplifies the architecture. It reduces the need for in-app payment management and helps focus on building core features.
Designing the User Interface with UXPilot
The user interface is the first touchpoint for your clients, making it crucial to get it right. I use UXpilot to create the designs for the application. This tool allows for quick iterations and updates based on feedback.
When designing the interface, start with a clear prompt that outlines what you want. For example, “Build an app that allows users to generate articles.” This sets the stage for the design process.
Using UXpilot, I generated wireframes and then moved to high-fidelity designs. Each element can be adjusted based on user needs and preferences. This iterative process ensures that the final design aligns with client expectations.
Creating the Front-End with Lovable
Lovable is a powerful tool for creating the dynamic front end of your application. Begin by crafting a prompt that clearly defines the user interface components you need. For instance, include forms for article titles and instructions, as well as buttons for generating and publishing articles.
Each step in the application should be clearly outlined. For example:
- Step One: Generate an outline with fields for article title and instructions.
- Step Two: Generate the article, requiring inputs like title, tone of voice, and keywords.
- Step Three: Edit and publish the article, allowing for final adjustments before publishing.
- Step Four: Provide the user with a link to the published article.
At the end of this process, ensure you integrate Supabase for authentication, including login and logout functionalities. This structure sets the foundation for a smooth user experience.
Connecting to Supabase for Backend Services
Connecting to Supabase is a straightforward process and crucial for managing backend services. I started by navigating to the manage Supabase section within Lovable. This is where I could set up the connection to my Supabase project.
After clicking the option to connect, I was prompted to create a new project. I chose a name for the project and selected the most economical compute size. Entering a database password was next, along with selecting a region for the project. Once I confirmed these settings, Supabase began creating the project. This process typically takes a couple of minutes to complete.
Setting Up User Authentication
User authentication is vital for any application, especially when handling sensitive data. I opted to manually create users for this client portal. This approach allows me to control user access without the risk of self-registration from the front end.
After successfully connecting to Supabase, I went to the authentication section. Here, I clicked on “create new user” and entered a username and password. I also checked the option to auto-confirm the user account. This streamlined the process and ensured that I could log in immediately.
Testing the Connection
Once the user was created, I returned to the application interface to test the login functionality. I entered the credentials I just set up. The login was successful, confirming that the connection to Supabase was working as intended.
With the user interface now displaying correctly, I was ready to proceed to the next phase: generating article outlines. To do this, I typed a sample title and left the instructions blank, clicking the “generate outline” button to see how it performed.
Integrating n8n Workflows for Article Generation
Integrating n8n into the workflow is where the magic happens. I started by creating a workflow specifically for generating article outlines. This workflow begins with a webhook that receives article title and instructions.
The next step in the workflow involves sending the title to Perplexity, a language model that can access real-time information from the web. The prompt I constructed asked it to summarize relevant facts and figures related to the article topic. If instructions were provided, they would also be included in the prompt sent to Perplexity.
Testing the Webhook
Before integrating this with Lovable, I found it beneficial to test the webhook independently. I created a separate HTTP request scenario in n8n. Here, I copied the production URL for the webhook and set the method to POST.
The parameters for testing included the article title and any instructions I wanted to provide. After running the test, I confirmed that the response included both an article outline and a list of citations, validating that the workflow was functioning correctly.
Testing the Article Outline Generation
With the workflows in place, I returned to Lovable to initiate the article outline generation. I configured it to call the previously tested webhook with the necessary parameters. This step was essential for ensuring that the integration between Lovable and n8n was seamless.
Once I pressed the “generate outline” button, I observed that the workflow executed successfully, returning the expected data. The article outline populated correctly in the interface, confirming that the integration was working as designed.
Generating the Full Article Content
After successfully generating the outline, I moved on to the next phase: creating the full article content. This involved setting up another webhook in n8n that would receive the outline and title as inputs.
The prompt I crafted for this webhook instructed the model to write a complete article based on the provided outline. It included sections for an introduction, key takeaways, and more. I ensured that the response would be formatted correctly in HTML to facilitate easy rendering in the application.
Testing Article Generation
Before finalizing the integration, I wanted to test the article generation workflow. I created a test scenario with the necessary parameters, including the title, outline, and any additional instructions. Running this test provided me with a valid HTML response, confirming that the article generation process was functioning correctly.
Image Generation for Articles
To enhance the articles further, I decided to integrate an image generation service. This involved setting up another webhook in n8n specifically for generating images based on the article title.
When a user clicks the button to generate an article, this webhook would also be called, sending the article title as part of the request. The response would contain the URL for the generated image, which I planned to populate in the featured image section of the article.
Finalizing the Image Integration
After setting up the image generation webhook, I returned to Supabase to add the necessary secrets for this integration. This step ensures that sensitive information remains secure and is not exposed in the front-end code.
Once the secrets were in place, I tested the image generation process. The workflow executed successfully, providing a valid image URL that I could use in the article’s featured image section.
Publishing Articles to WordPress
Publishing articles is a critical step in the workflow. I set up a final webhook to handle this task seamlessly. When the user clicks the publish button, this webhook gets triggered, which sends the article data to WordPress.
To start, I navigated back to Supabase and added a new webhook URL to handle the publish action. This is stored in Supabase secrets under the name ‘publish article webhook URL’. The JSON body includes essential parameters, ensuring the article is formatted correctly for WordPress.
Once everything was configured, I pressed publish. The system showed that it was processing the request. Shortly after, I received a confirmation that the article was generated successfully. However, the article link initially appeared to be incorrect. Despite that, the WordPress link was valid, and when I clicked it, I found that the article had indeed been published successfully.
This process not only confirmed that the content was pushed to WordPress but also ensured that the article history was recorded in the database. The client can now review previous articles generated through this application, which adds significant value.
Testing the Full Workflow
To ensure everything was functioning correctly, I decided to run an end-to-end test. I created a new article titled “What are AI Agents?” and generated the outline. This test was crucial for validating the entire workflow from start to finish.
After generating the article, I was able to edit it as needed. I pressed the next step to proceed through the article creation process. The system displayed the generated content and an image, which was a pleasant addition.
Next, I saved the article as a draft. The system confirmed that the draft was saved successfully. However, I noticed that the saved draft was not displaying correctly in the posts section. This required a review of the routing logic to ensure that unpublished posts could be accessed correctly.
Debugging Common Issues
Throughout the development process, I encountered several issues that required attention. One of the common problems was the display of images and content in the editor. The HTML didn’t render perfectly, which initially caused confusion.
To resolve this, I had to ensure that the editor was properly configured to display headings and bullet points. After reviewing the settings, I was able to fix this part, leading to a better user experience when editing articles.
Another issue arose with broken images appearing in the articles. This was traced back to the initial prompts I used in the article generation process. I had to adjust the instructions provided to the model to prevent it from generating unnecessary image tags.
Implementing Security Features
Security is paramount, especially when dealing with webhooks and sensitive data. I introduced an authorization key to secure all webhook calls. This ensures that only authorized requests are processed.
To do this, I created a new credential in the webhook settings. I labeled it appropriately for easy access across different scenarios. After that, I added a new secret in Supabase called ‘Blogging Webhooks API Key’. This secret now holds the API key necessary for secure communications.
Each webhook call now includes an authorization header. This significantly enhances security by ensuring that only requests with the correct token are allowed to interact with the webhooks.
Deploying the Application
Once everything was functioning smoothly, I moved to deploy the application. I pressed the publish button in Lovable, which made the app live on a subdomain. This built-in deployment feature simplifies the process considerably.
If a custom domain is desired, I can easily connect a domain purchased through services like Namecheap or GoDaddy. This flexibility allows for branding that aligns with client needs.
Adding new user accounts is also straightforward. I can create new users directly from the dashboard, which streamlines the onboarding process for clients. This functionality is crucial for expanding the user base efficiently.
Finally, I added a feature to regenerate images for articles. If an image is missing, the system defaults to a gray background. This improves the visual aspect of articles and ensures consistency across content.
The application is now a solid foundation. It can be extended with additional functionalities like social sharing and enhanced editing scenarios. After making updates, testing them is essential before publishing the changes to the live site.
