How to Build a Web App with Lovable, Supabase, and N8N in 1 Hour

Overview

This guide follows the exact steps shown in the 5minAI video. You will:

1. Create a Lovable project and connect it to GitHub.
2. Connect Lovable to a Supabase project and generate tables.
3. Build a simple dashboard UI in Lovable.
4. Set up N8N workflows for data CRUD.
5. Deploy the app and enable authentication.

Prerequisites

• A free account on Lovable (https://lovable.dev).
• A free account on Supabase (https://supabase.com).
• A free account on N8N Cloud (https://n8n.cloud).
• A GitHub account for version control.
• Basic familiarity with SQL and JSON.

Step‑by‑Step Instructions

1. Create and Configure the Lovable Project

1. Log in to Lovable and click Get Started.
2. Choose Create a new project and give it a name (e.g., Video Dashboard).
3. In the project settings, enable GitHub integration and connect your GitHub account. Create a new repo or link an existing one.
4. Save the repo; Lovable will push the project files automatically.

2. Connect Lovable to Supabase

1. In the Lovable project sidebar, click Integrations → Supabase.
2. Click Connect Supabase and paste your Supabase project URL and anon key.
3. Lovable will auto‑detect tables and generate CRUD components.

3. Create a Supabase Table for Videos

1. Go to your Supabase dashboard.
2. Create a new table named videos with columns:
   • id (UUID, primary key)
   • name (text)
   • link (text)
   • channel (text)
   • published_at (timestamp)
   • description (text)
3. Add a row‑level security policy: Authenticated users can read/write their own rows.

4. Build the Dashboard UI in Lovable

1. In Lovable, open the UI editor.
2. Drag a Table component onto the canvas.
3. Bind the table to the videos table from Supabase.
4. Add columns to display name, channel, published_at, and a link button that opens the video URL in a new tab.
5. Add a Button labeled Add Video that opens a modal form.
6. In the modal, add input fields for each column and a Submit button.
7. Configure the Submit button to trigger an N8N webhook (see next step).

5. Set Up N8N Workflows for CRUD

1. Log in to N8N Cloud and create a new workflow.
2. Trigger: Add an HTTP Request node set to POST at /webhook/add-video.
3. Action: Add a Supabase node (or use the HTTP node with Supabase REST API) to INSERT a new row into the videos table using the payload from the webhook.
4. Response: Return a success message.
5. Publish the workflow and copy the webhook URL.
6. Back in Lovable, set the modal Submit button’s webhook URL to the N8N URL.

6. Enable Authentication

1. In Lovable, open Auth settings.
2. Enable Supabase Auth and select the profiles table.
3. Add Sign‑Up and Sign‑In pages using Lovable’s built‑in components.
4. Protect the dashboard route so only authenticated users can view it.

7. Deploy and Test

1. In Lovable, click Deploy → Custom Domain or use the default subdomain.
2. Open the deployed URL, sign up, and verify that:
   • The dashboard loads the videos table.
   • Adding a video via the modal creates a new row in Supabase.
   • The link button opens the video in a new tab.
3. Check the N8N workflow logs to confirm the webhook was triggered.

Tips & Gotchas

• GitHub Integration: After the first push, Lovable will automatically sync changes. Use branches for experimental features.
• Supabase RLS: If you see Permission denied errors, double‑check the row‑level security policy.
• Webhook Payload: Ensure the JSON keys in Lovable match the column names expected by N8N.
• Real‑time Updates: Lovable supports Supabase real‑time. Enable it in the integration settings to auto‑refresh the table when new rows are added.
• Error Handling: In N8N, add a Set node after the Supabase insert to format a friendly error message if the insert fails.
• Testing Locally: Use the N8N local server and a tool like ngrok to expose the webhook during development.

Resources

• Lovable: https://lovable.dev
• Supabase: https://supabase.com
• N8N: https://n8n.cloud
• Video Transcript & Description: 5minAI YouTube