# Frontend vs Backend, Explained with a Lovable Form > The frontend is what people see and click; the backend receives the data and does the work. A plain-English guide using a Lovable form and an n8n workflow. Source: https://learn.ynteractive.com/content/blog/frontend-vs-backend-explained · Updated 2026-10-30 · Free from Stepthrough (https://learn.ynteractive.com) Quick answer The [frontend](https://learn.ynteractive.com/content/glossary/frontend-vs-backend) is the part of an app people see and click, like a signup form in a browser; the backend is the part that runs out of sight, receiving the data, applying the rules, saving records and sending emails. In the free lesson [Build a Web App with an AI Backend](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend), Lovable builds the frontend from a written [prompt](https://learn.ynteractive.com/content/glossary/prompt) and an [n8n workflow](https://learn.ynteractive.com/content/glossary/workflow) is the backend, connected by a webhook. [AI Lead Magnet Signup Form](https://learn.ynteractive.com/content/lead-magnet-signup-form-ai-welcome-email) uses the same split for a marketing signup. Last updated October 30, 2026 [Take the free module →](https://learn.ynteractive.com/courses/intro-to-ai-automation/8)Module 8 of the free [Intro to AI Automation](https://learn.ynteractive.com/courses/intro-to-ai-automation) course, about 15 minutes. No account needed. By [Robert Breen](https://learn.ynteractive.com/content/about) · Published October 30, 2026 · Updated October 30, 2026 · 5 min read Lovable · n8n · Beginners This guide is for marketers, office staff and owners who want to understand the words developers use, and how the pieces of a no-code build fit together. ## What is the frontend? The frontend is everything a visitor interacts with: the page, the fields, the button, the messages that appear. The [glossary entry on frontend vs backend](https://learn.ynteractive.com/content/glossary/frontend-vs-backend) uses a form in a browser as the example, which is exactly what the Lovable lessons build. In [AI Lead Magnet Signup Form](https://learn.ynteractive.com/content/lead-magnet-signup-form-ai-welcome-email), the frontend is a "Get the free guide" page for a made-up coffee brand, Harbor & Pine Coffee Roasters. It asks four questions: **Name**, **Email**, **What do you want to improve?** and **How do you brew now?** The frontend's jobs: - Show the fields and labels. - Check the input before sending, such as a valid email format. - Show what's happening: a **Sending...** button, then a success or error message. - Send the answers to the backend. ## What is the backend? The backend is the part that does the work after someone clicks submit. Visitors never see it. In the lessons, the backend is an n8n workflow: 1. **On webhook call** receives the form data. 2. An **AI Agent** reads it and follows its system message. 3. A **Google Sheets Tool** saves the lead. 4. A **Gmail Tool** sends the email. 5. **Respond to Webhook** tells the frontend it worked. In the marketing lesson, the agent's system message tags each lead with one segment, **New to Brewing**, **French Press & Pour-Over**, **Espresso at Home** or **Gift Buyer**, and emails "a short, warm welcome with a link to The Better Cup at Home guide, plus one tip that fits their segment. No discounts and no health claims." All of that happens in the backend. ## Try it free, step by step **Lovable + n8n: Build a Web App with an AI Backend**. Build a contact form in Lovable and connect it to an n8n workflow — webhook trigger, AI Agent, Google Sheets, Gmail, and a Respond node that ties it all together. You do every step yourself in a practice copy of Lovable and n8n, it checks your work as you go, and “Do it for me” finishes any step you get stuck on. Free, and nothing touches your real accounts. [Start the free lesson](https://learn.ynteractive.com/modules/lovable-n8n) [Or read the full step-by-step guide](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend) ## How do the frontend and backend talk to each other? The frontend sends a request to an address the backend listens on. In the lessons, that address is an n8n [webhook](https://learn.ynteractive.com/content/glossary/webhook) URL, and the data travels as JSON, a simple text format of named values. The Lovable prompt spells out the names: "The data should be sent as JSON with keys: name, email, interest, brewMethod." On the n8n side, the AI Agent's prompt template pulls those same names back out: ```text Name: {{ $json.body.name }} Email: {{ $json.body.email }} Interest: {{ $json.body.interest }} Brew Method: {{ $json.body.brewMethod }} ``` The keys must match on both sides. If the frontend sends `brewMethod` and the backend looks for `brew_method`, that field arrives empty. [What Is JSON in n8n?](https://learn.ynteractive.com/content/blog/what-is-json) explains the format, and [Connect a Lovable Form to n8n with a Webhook](https://learn.ynteractive.com/content/blog/lovable-form-n8n-webhook) walks through the connection. ## Why does the backend answer the frontend? So the visitor sees an honest message. The webhook is set to respond **Using 'Respond to Webhook' Node**, which makes the form wait until the workflow finishes. Then the frontend shows the success message from the prompt, or, if the request fails, the friendly error: "Something went wrong. Please try again." Without that reply, a form can say "Thanks!" even when nothing was saved. The frontend only knows what the backend tells it. ## Where do secrets live, frontend or backend? Out of the frontend's code. Anything in the frontend can, in principle, be seen by visitors, so private values belong in settings, not in the page. The lesson's Lovable prompt says "Do not hard-code any webhook URL" and points to a secret named **N8N_WEBHOOK_URL**, added in Lovable under **More** in project settings. The glossary entry on environment variables explains the idea: named settings stored outside the code and read when the app runs. API keys, like the OpenAI key the agent uses, live in the backend as n8n credentials. The form never sees them. ## Which part should handle the rules? The backend, almost always. The frontend can check simple things, like a required field or an email format. Business rules, such as which segment a lead belongs to, which team gets a request or what the reply should say, belong in the backend, where you can change them without rebuilding the page and where visitors can't skip them. That's why the lessons keep the Lovable prompt focused on fields, wording and validation, and put the thinking in the AI Agent's system message. To change how leads are tagged, you edit one system message in n8n. ## Do I need to know code to build both? No. In the lessons, the frontend comes from a prompt and the backend from clicking nodes. What you do need is the vocabulary, so you know which part to change when something's wrong: | Problem | Usually the | | --- | --- | | A field is missing or worded badly | Frontend (edit the Lovable prompt) | | The form says it failed | Connection (check the webhook URL secret and that the workflow is published) | | The email says the wrong thing | Backend (edit the system message) | | A field arrives empty | Both (check the JSON key names match) | [What Is Vibe Coding?](https://learn.ynteractive.com/content/blog/what-is-vibe-coding) covers building the frontend by prompt, and the [Lovable tool page](https://learn.ynteractive.com/content/tool/lovable) lists every Lovable lesson. Lovable and n8n Cloud both have paid plans, and the AI step uses OpenAI API credit, which is pay-as-you-go. ## Key takeaways - The frontend is what visitors see and click, such as a form; the backend receives the data and does the work out of sight. - In the lessons, Lovable builds the frontend from a prompt and an n8n workflow is the backend. - The frontend sends data to the backend's webhook URL as JSON, and the key names must match on both sides. - A Respond to Webhook node lets the backend tell the frontend whether it worked, so the success message is honest. - Keep secrets like the webhook URL in Lovable's project settings and API keys in n8n credentials, never in the page's code. ## Frequently asked questions **Is a Lovable app frontend or backend?** In the lessons, the Lovable form is the frontend and n8n is the backend. Lovable can do more, but the lessons use it for the page people see. **What is the backend of a form?** Whatever receives the submission and acts on it. In the lessons, an n8n workflow saves the entry to Google Sheets and sends an email through Gmail. **Why is my form field empty in n8n?** The key name sent by the form probably doesn't match the one the workflow reads. Check the JSON keys in the Lovable prompt against the n8n expressions. **Should validation happen in the frontend or backend?** Simple checks, like a required field or email format, can happen in the frontend for a better experience. Business rules belong in the backend. ## Free lessons in this post - [Lovable + n8n: Build a Web App with an AI Backend](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend): Build a contact form in Lovable and connect it to an n8n workflow — webhook trigger, AI Agent, Google Sheets, Gmail, and a Respond node that ties it all together. - [Build a Lead Magnet Signup Form with an AI Welcome Email](https://learn.ynteractive.com/content/lead-magnet-signup-form-ai-welcome-email): Build a "Get the free guide" signup form in Lovable for Harbor & Pine Coffee Roasters and connect it to n8n — the AI agent tags each lead by interest, saves it to… ## Watch it in a free lesson: Lovable + n8n: Build a Web App with an AI Backend ### Build a Web App with an AI Backend: video walkthrough Full walkthrough · 9:03 · with captions Build a contact form in Lovable and connect it to an n8n workflow — webhook trigger, AI Agent, Google Sheets, Gmail, and a Respond node that ties it all together. The whole lesson narrated step by step, recorded in Stepthrough’s simulated practice environment. [Watch it with chapters and the full transcript](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend#watch) From the free lesson [Lovable + n8n: Build a Web App with an AI Backend](https://learn.ynteractive.com/content/lovable-n8n-web-app-ai-backend) ## Related terms Plain-English definitions, each with an example from a free lesson. [Frontend and backend](https://learn.ynteractive.com/content/glossary/frontend-vs-backend) · [Prompt](https://learn.ynteractive.com/content/glossary/prompt) · [Workflow](https://learn.ynteractive.com/content/glossary/workflow) · [Audience segmentation](https://learn.ynteractive.com/content/glossary/audience-segmentation) · Conversion rate · [Deployment (publishing a web app)](https://learn.ynteractive.com/content/glossary/web-app-deployment) · Drip campaign · Email deliverability [The full AI glossary](https://learn.ynteractive.com/content/glossary) ## Related prompts - [A/B test plan prompt](https://learn.ynteractive.com/content/prompts/ab-test-plan-prompt): Plan one clean A/B test for an email, form or page: a single change, a stated guess, the number that decides the winner and when… - [Buyer persona prompt](https://learn.ynteractive.com/content/prompts/buyer-persona-prompt): Write a buyer persona from real customer words, such as signup answers and reviews: their goal, worries, words they use and what… - [Data cleanup plan prompt](https://learn.ynteractive.com/content/prompts/data-cleanup-plan-prompt): Turn messy spreadsheet columns into clean, consistent ones: a column-by-column plan with standard values, rules for odd entries… - [Lead magnet outline prompt](https://learn.ynteractive.com/content/prompts/lead-magnet-outline-prompt): Outline a free guide or checklist worth signing up for: one problem, short practical sections built from your own know-how, and… [All free prompt templates](https://learn.ynteractive.com/content/prompts) ## Visual guides The same ideas as quick visual guides: swipe through the slides, or read each one as text. - [Build a web form with an AI backend, no code](https://learn.ynteractive.com/content/visual/lovable-n8n-form): Most website forms just land in an inbox and wait. This one does the work. You describe the form in Lovable, and it builds it. - [Mistake to Avoid: Testing an Unpublished n8n Workflow](https://learn.ynteractive.com/content/visual/mistake-testing-an-unpublished-workflow): A visual tip: an n8n production webhook URL only works once the workflow is published. Publish first, then copy the URL into your app. - [n8n Webhook URL: Don't Paste It into Your Page](https://learn.ynteractive.com/content/visual/mistake-webhook-url-in-the-page): Where should your n8n webhook URL go? Not in the page code. Store it as a Lovable secret so it stays out of the source and is easy to change. [All visual guides](https://learn.ynteractive.com/content/visual) ## Keep reading - [How to Write a Lovable Prompt for a Form](https://learn.ynteractive.com/content/blog/lovable-prompt-for-a-form): A Lovable prompt for a form, section by section: fields, heading, webhook keys, submission states, validation and the secret, and how to adapt it. - [Automate a Lead Magnet Welcome Email with AI](https://learn.ynteractive.com/content/blog/lead-magnet-welcome-email): Lead magnet welcome email automation: a signup form sends each lead to an n8n AI agent that tags it, saves it and emails the guide with one tip. - [What Is Lovable? Build a Web Form from a Written Prompt](https://learn.ynteractive.com/content/blog/what-is-lovable): What is Lovable? A plain guide to the tool that builds web apps from a written prompt: how it works, what it's good for, what it costs and where n8n fits. [All blog posts](https://learn.ynteractive.com/content/blog) · [All free tutorials](https://learn.ynteractive.com/content)