Turn n8n Workflows Into FULL Web Apps (No-Code Tutorial)

No-Code Full Stack App with Lovable, Naden, and Supabase

Key Concepts:

• No-code development
• Full-stack application
• AI agent
• Webhooks
• Authentication
• Chat history
• Supabase
• Naden
• Lovable

1. Introduction

The video demonstrates how to build a no-code full-stack application using Lovable for the front-end, Naden for the back-end AI agent, and Supabase for authentication and chat history storage. The application is a simple AI-powered coaching service.

2. Setting up Lovable

• Navigating to lovable.dev and creating a new project.
• Using a universal prompt generator to define the application's purpose and design. The example used is a "modern look for a coach AI app."
• Example: The prompt used is for an AI-powered coaching service.
• The importance of using a prompt generator to conserve Lovable's message limit (5 messages per day on the free tier).

3. Connecting Lovable to Naden via Webhooks

• Creating a new workflow in Naden.
• Downloading a pre-built Naden "brill" (workflow) instead of starting from scratch.
• The Naden workflow receives information from Lovable via a webhook (POST method).
• The AI agent in Naden uses a system prompt ("You're a helpful assistant, provide brief three-sentence responses") and a SER API tool for internet access.
• The Naden workflow sends responses back to Lovable via a "Respond to Webhook" node.
• Copying the Naden webhook URL (test URL initially) and pasting it into the Lovable project settings.
• Technical Term: Webhook - An automated HTTP request sent from one application to another when something happens.
• Troubleshooting: Addressing errors by identifying that the Naden workflow was not "listening" (testing) and that Lovable was not receiving the response from the webhook.

4. Integrating Supabase for Authentication and Data Storage

• Connecting Lovable to a Supabase project.
• Authorizing Lovable to access the Supabase account.
• Step-by-step process:
  1. Go to Lovable and click "Manage Supabase."
  2. Connect to the appropriate Supabase organization.
  3. Authorize Lovable to access Supabase.
• The video highlights that Supabase provides two free projects.
• The initial Supabase project has no tables or authentication set up.
• Using Lovable to generate SQL code to create tables for chat history and user authentication in Supabase.
• Step-by-step process:
  1. Instruct Lovable to "create a sign-up and login and store the auth in Supabase."
  2. Review the generated SQL code in Lovable.
  3. Apply the changes, which executes the SQL code in Supabase.
• Lovable automatically updates the user interface to include "Sign In" and "Sign Up" buttons.

5. Implementing User Authentication

• Signing up for a new account using the Lovable interface.
• The sign-up process sends a verification email to the user.
• The user's email and authentication information are stored in the Supabase authentication table.
• The video demonstrates creating multiple user accounts and verifying them.
• Example: Creating accounts for "[email protected]" and "[email protected]."
• Technical Term: Authentication - The process of verifying the identity of a user or device.

6. Storing and Retrieving Chat History

• Interacting with the AI agent after logging in.
• The chat history is stored in the "chat_messages" table in Supabase.
• The video demonstrates how the chat history is saved and retrieved when the user logs in again.
• Example: Sending messages like "Hi, how do I switch careers to AI?" and "How are you?" and verifying that they are stored in Supabase.
• The video shows how to log out and log back in to verify that the chat history is persistent.

7. Customization and Further Development

• The video mentions the ability to customize the user interface and remove animations using Lovable's AI.
• The video suggests the possibility of allowing users to interact with the chat without logging in, but requiring login to see previous chat history.

8. Conclusion

The video successfully demonstrates how to create a full-stack no-code application using Lovable, Naden, and Supabase. It covers connecting the front-end to the back-end, implementing user authentication, and storing chat history in a database. The application is a functional AI-powered coaching service with persistent user data.